What is the difference between a tint and a shade?

A tint mixes a colour toward white to make it lighter, while a shade mixes it toward black to make it darker. This tool builds both around your base colour.

Can I paste the result straight into my CSS?

Yes. The output is a :root block of CSS custom properties (--tint-1, --base, --shade-1, and so on) that you can drop into any stylesheet.

Is my colour sent anywhere?

No. Every calculation runs locally in your browser and nothing is uploaded.

CSS Color Shades & Tints Generator

Build shades and tints of any colour and copy them as CSS variables.

Shades and tints, ready as CSS variables

Pick a base colour and this tool builds a row of tints (mixed toward white) and shades (mixed toward black) around it, then emits a clean :root block of CSS custom properties you can paste straight into your stylesheet.

Choose how many steps you want on each side, copy the variables, and you have a consistent light-to-dark ramp for buttons, hovers, borders and backgrounds — all generated in your browser with nothing uploaded.