1. Home
  3. Design
  5. Color Scale Generator (50–950)

Color Scale Generator (50–950)

Turn one base colour into a Tailwind-style 50–950 shade scale with CSS variables and config output.

Runs in your browser Free
Processed locally in your browser.

A complete scale from your brand colour

Design systems and frameworks like Tailwind CSS define each colour as shades from 50, 100, 200 … 900, 950. These shades give consistent options for backgrounds, borders, text and hover states. The Color Scale Generator produces the whole scale from a single base colour.

Perceptually even shades

Shades are computed in the perceptual OKLCH colour space, so lightness steps look even and the hue stays stable across the scale, without the muddy midtones of HSL-based methods. Colours outside the sRGB gamut are adjusted to valid values.

Outputs

  • CSS custom properties (like --brand-500)
  • A Tailwind configuration object
  • The HEX value of every shade

Optionally keep your base colour exactly as it is in the scale.

How to use Color Scale Generator (50–950)

  1. Pick your brand colour or enter its HEX code.
  2. Choose whether to keep the base colour as-is.
  3. Review the 50–950 scale.
  4. Copy the CSS variables or Tailwind config.

Why use this tool?

Produces consistent, professional shades for design systems in seconds.

FAQ

Is my own base colour part of the scale?

Yes. With 'Keep base colour as is' on, it replaces the step with the closest lightness.

Why is OKLCH better than HSL?

OKLCH is designed around human perception, so colours with the same lightness value really look equally bright.

Which shades should I use for dark mode?

Dark themes usually use 900–950 for backgrounds and 100–200 for text.

Related tools

Private

Color Palette Generator

Generate harmonious 5–8 colour palettes: random, complementary, analogous, monochromatic or triadic.

Open tool
Private

WCAG Contrast Checker

Check the contrast ratio of text and background colours against WCAG AA and AAA.

Open tool
Private

Color Code Converter

Convert colours between HEX, RGB and HSL with a live preview; alpha is supported.

Open tool
Private

Random Color Generator

Generate random colours as HEX, RGB and HSL; one at a time or up to 50, in pastel, vivid or dark styles.

Open tool