How to Create Color Shades in CSS (2026)

The brevio Color Shade Generator produces a full tint-to-shade scale from any base color — ready to drop into a CSS custom property palette, Tailwind config, or design token file. Everything runs in your browser with no uploads or server calls.

How Color Shades Work

A shade scale starts from a base hue and stretches toward white (tints) in one direction and toward black (shades) in the other. The most common convention is a 10-stop scale — 50 through 950 in increments of 100 — where 500 is the base color. This mirrors the Tailwind CSS and Material Design naming conventions that most teams already know.

The underlying math is straightforward: mix the base color with pure white or pure black in the HSL or LCH color space, adjusting lightness at each step. LCH produces perceptually uniform steps (equal perceived brightness difference between stops), which is why tools targeting accessible UI prefer it over plain HSL interpolation.

Shade Scale Anatomy

Using the Generated Shades in CSS

Once you have a scale, the cleanest way to integrate it is via CSS custom properties on :root. This keeps color logic in one place and makes dark-mode overrides trivial.

:root {
  --color-brand-50:  #eff6ff;
  --color-brand-100: #dbeafe;
  --color-brand-200: #bfdbfe;
  --color-brand-300: #93c5fd;
  --color-brand-400: #60a5fa;
  --color-brand-500: #3b82f6; /* base */
  --color-brand-600: #2563eb;
  --color-brand-700: #1d4ed8;
  --color-brand-800: #1e40af;
  --color-brand-900: #1e3a8a;
}

.btn-primary {
  background: var(--color-brand-500);
  border-color: var(--color-brand-600);
  color: #fff;
}

.btn-primary:hover {
  background: var(--color-brand-600);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-brand-500: #60a5fa; /* shift base to a lighter stop for dark mode */
  }
}

Accessibility: Choosing Stops for Text

WCAG 2.1 AA requires a contrast ratio of at least 4.5:1 for normal text against its background. On a white background, this typically means using stop 600 or darker for body text. On a near-black background (900+), stops 100–300 are generally safe. Always verify with a contrast checker — perceptual uniformity of the scale helps but does not guarantee compliance at every combination.

Frequently Asked Questions

How many shades do I need?

For most projects, 9–11 stops (50 through 900 or 950) is enough. Fewer stops mean more manual interpolation when a design calls for a value between steps. More than 11 stops rarely adds useful granularity and increases maintenance overhead.

Should I use HSL or LCH for shade generation?

LCH (or its relative OKLCH) produces perceptually uniform steps — each stop looks equally different from its neighbors to the human eye. HSL is simpler but can produce visually uneven jumps, especially in the blue and purple ranges. Use LCH if your platform supports it (modern browsers do via oklch()); fall back to HSL for maximum compatibility.

Can I use generated shades in Tailwind?

Yes. In tailwind.config.js, add the scale under theme.extend.colors with numeric keys matching the stop names. Tailwind will expose them as bg-brand-500, text-brand-700, and so on — exactly as you would expect from a built-in palette.

Generate your full palette in seconds with the Color Shade Generator — pick a base color and copy the result as CSS variables, a Tailwind config object, or a JSON token file.