Color Shades Generator

Turn one color into a Tailwind-style 50–950 scale plus tints, shades and tones. Computed in OKLCH and sRGB, exported as CSS variables, Tailwind or JSON.

Shades settings

Base color

#3b82f6rgb(59 130 246)hsl(217 91% 60%)oklch(62.3% 0.188 259.8)

Tint / shade / tone steps

Export

Format

Token name

The 50–950 scale keeps your color as 500 and adjusts OKLCH lightness and chroma for the other steps, keeping the hue.

50–950 scale

#eef5ff

oklch(96.8% 0.015 257.2)

#e1edff

oklch(94.3% 0.028 258.4)

#c9deff

oklch(89.6% 0.051 259.4)

#a3c6ff

oklch(82.2% 0.089 260)

#73a8ff

oklch(73.2% 0.139 259.9)

#3b82f6

oklch(62.3% 0.188 259.8)

#266ad8

oklch(54.6% 0.182 259.9)

#1554b8

oklch(47% 0.17 260)

#074095

oklch(39.5% 0.15 259.7)

#002d72

oklch(32% 0.128 259.6)

#012156

oklch(26.5% 0.103 259.7)

Tints, shades and tones

Tints (mixed with white)

Shades (mixed with black)

Tones (mixed with gray #808080)

Mixed in sRGB like color-mix(in srgb, …) at equal steps; click a color to copy it.

Export code

:root {
  --brand-50: #eef5ff;
  --brand-100: #e1edff;
  --brand-200: #c9deff;
  --brand-300: #a3c6ff;
  --brand-400: #73a8ff;
  --brand-500: #3b82f6;
  --brand-600: #266ad8;
  --brand-700: #1554b8;
  --brand-800: #074095;
  --brand-900: #002d72;
  --brand-950: #012156;
}

Related Tools

View All

CSS Box Shadow Generator CSS Gradient Generator CSS Flexbox Generator CSS Grid Generator Border Radius Generator Glassmorphism Generator Neumorphism Generator Text Shadow Generator

What is Color Shades Generator?

Expands a single colour into an 11-step 50–950 scale like Tailwind's palettes, and into rows of tints (mixed with white), shades (mixed with black) and tones (mixed with grey). All values can be copied individually or exported as CSS variables, SCSS, Tailwind v3/v4 or JSON.

How to use Color Shades Generator

Enter the Base color.
Read the 50–950 scale; your colour is step 500.
Set the number of Tint / shade / tone steps for the mix rows.
Click any swatch to copy it.
Choose an export Format and Token name and copy the scale.

Example

Input

#3b82f6, CSS variables, token name brand

Output

:root {
  --brand-50: #eef5ff;
  --brand-100: #e1edff;
  --brand-200: #c9deff;
  --brand-300: #a3c6ff;
  --brand-400: #73a8ff;
  --brand-500: #3b82f6;
  --brand-600: #266ad8;
  --brand-700: #1554b8;
  --brand-800: #074095;
  --brand-900: #002d72;
  --brand-950: #012156;
}

When to use Color Shades Generator

Use it to build a full colour ramp for a design system or Tailwind theme from one brand colour, or to get hover/active variants. The scale is a sensible algorithmic starting point; for production design systems you may still fine-tune individual steps and check contrast for text use.

How Color Shades Generator works

For the scale the base colour is converted to OKLCH and kept unchanged at 500. Lighter steps move lightness a fixed fraction of the way towards 0.985 (95%, 88%, 75%, 55%, 30% for 50–400) and reduce chroma; darker steps move towards 0.2 (18%–85% for 600–950) with slightly reduced chroma. Hue is kept and every step is gamut-mapped to sRGB. Tints, shades and tones are mixes in gamma-encoded sRGB, like color-mix(in srgb, …), at equal steps of 1/(n+1).