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.

Worked 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;
}

You get five swatches from one hex value, all mathematically consistent and ready to use.

How to use these variables in practice

Once you have copied the :root block into your CSS, reference the variables by name wherever you need a shade or tint of your brand colour:

/* Button — base colour with hover shade and focus tint */
.btn-primary {
  background: var(--base);
  border: 1px solid var(--shade-1);
  color: white;
}

.btn-primary:hover {
  background: var(--shade-1);
}

.btn-primary:focus-visible {
  outline: 2px solid var(--tint-1);
}

/* Subtle background using lightest tint */
.highlight-box {
  background: var(--tint-2);
  border-left: 3px solid var(--base);
}

How many steps to generate?

• 2–3 steps each side is enough for most component libraries: one tint for backgrounds and disabled states, the base for the primary action, one shade for hover/active states.
• 4–5 steps is useful when building a full design token scale (100 through 900, like Tailwind CSS) from a single brand colour.
• More than 5 steps start to look visually similar and are harder to differentiate — use sparingly.

Tint/shade vs. opacity — which to use?

An alternative to generating shades is to use the base colour with CSS opacity or rgba. The difference is visible on non-white backgrounds:

• Opacity-based colours let the background bleed through, producing a different result on dark themes.
• Opaque tints/shades (what this tool generates) look consistent regardless of what sits behind them, which is usually what you want for borders, cards, and backgrounds.

For design systems that need to work across light and dark modes, generating separate tint/shade palettes for each mode gives you full control.

Renaming the variables

The default --tint-1, --base, --shade-1 naming is generic. For a production design system, consider renaming to match your scale convention — for example --brand-100 through --brand-900 to align with the Tailwind or Material Design naming patterns. The output is plain CSS text, so any text editor can do a find-and-replace after copying.