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.

What do the generated variable names look like?

The output is a :root block with names like --tint-1, --tint-2 for lighter steps, --base for your colour, and --shade-1, --shade-2 for darker steps, each set to a hex value.

How many steps should I generate?

Three to five steps on each side is usually enough for buttons, hovers, borders and backgrounds. More steps give a finer ramp but can be harder to keep visually distinct.

Is my colour sent anywhere?

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

CSS Color Shades & Tints Generator

This tool takes a base colour and generates a light-to-dark ramp of tints (mixed toward white) and shades (mixed toward black), then outputs them as ready-to-paste CSS custom properties. It is built for designers and front-end developers who want a consistent set of related colours for buttons, hover states, borders and backgrounds without picking each one by hand.

How it works

The base hex is parsed into RGB. Tints are produced by linearly interpolating each channel toward white (255) by increasing amounts, and shades by interpolating toward black (0). You choose how many steps you want on each side. The results are converted back to hex and emitted as a :root block of CSS variables, so you get a usable palette in one copy.

Example

From a base of #2563eb with two steps each side, the output looks like:

:root {
  --tint-2: #b6cbf8;
  --tint-1: #6e97f2;
  --base:   #2563eb;
  --shade-1: #19429d;
  --shade-2: #0c214e;
}

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.