Color Shades Generator

Turn any color into an 11-step scale of tints and shades, generated in OKLCH for perceptually even steps.

Base color

Name

@theme {
  --color-brand-50: oklch(0.97 0.015 246.8);
  --color-brand-100: oklch(0.93 0.033 246.8);
  --color-brand-200: oklch(0.88 0.062 246.8);
  --color-brand-300: oklch(0.81 0.101 246.8);
  --color-brand-400: oklch(0.692 0.172 246.8);
  --color-brand-500: oklch(0.62 0.162 246.8);
  --color-brand-600: oklch(0.55 0.144 246.8);
  --color-brand-700: oklch(0.49 0.128 246.8);
  --color-brand-800: oklch(0.42 0.11 246.8);
  --color-brand-900: oklch(0.37 0.097 246.8);
  --color-brand-950: oklch(0.28 0.074 246.8);
}

What are shades and tints?

Tints are lighter variations of a color and shades are darker ones. Design systems like Tailwind CSS organize them into a numbered scale from 50 (lightest) to 950 (darkest), so a single brand color becomes a full family you can use for backgrounds, borders, text, and states.

This generator builds the scale in OKLCH, a perceptually uniform color space, so each step looks evenly spaced to the human eye and the hue stays consistent across the whole ramp, something naive HSL lightness math gets visibly wrong. Your exact input color is always preserved at its natural position in the scale.