How to Generate a Tailwind Color Scale

Choose the base color

The base color should represent the brand or product role that anchors the scale.

Decide which shade label should contain the original color. Many systems place a primary brand value near 500 or 600, but the correct position depends on its lightness and expected usage.

Preserve the original value as a documented token so generated shades can be recalculated without losing the source.

Plan the shade progression

The 50–950 labels are ordered design tokens, not scientific measurements.

Light shades often serve backgrounds, selected rows, and subtle borders. Middle shades carry brand accents and controls. Dark shades support hover states, dark text, or dark-theme surfaces.

Uneven perceptual jumps make a scale difficult to use. Review the sequence visually and compare lightness differences rather than relying only on equal numeric interpolation.

Use OKLCH for controlled steps

OKLCH separates lightness, chroma, and hue so each dimension can be adjusted deliberately.

Lightness can move from near-white to near-black while chroma peaks around the useful middle of the scale. Hue can remain stable or receive small corrections to prevent muddy dark values and washed-out light values.

Clip or reduce chroma when a generated shade falls outside sRGB, and retain an sRGB fallback for broad compatibility.

Connect shades to semantic tokens

Components should consume role names rather than raw shade labels whenever possible.

For example, --color-action can point to a 600 shade in light mode and a 400 shade in dark mode. This allows the scale to remain stable while roles adapt across themes.

Create tokens for action, action-hover, action-active, focus, subtle background, border, and on-action text.

@theme {
  --color-brand-50: oklch(97% 0.02 250);
  --color-brand-500: oklch(62% 0.20 250);
  --color-brand-900: oklch(30% 0.10 250);
}

:root {
  --color-action: var(--color-brand-600);
  --color-action-hover: var(--color-brand-700);
}

Test component states

A scale is only useful when adjacent state values remain distinguishable and readable.

Test default, hover, active, focus, selected, disabled, loading, and visited states. Confirm that on-color text meets the intended contrast target and that focus remains visible around the component.

Check dark mode separately because the same shade numbers may not provide the right visual hierarchy on a dark surface.

Worked scale strategy

A vivid blue base can retain hue while lightness expands and chroma is reduced at the extremes.

Use low-chroma near-white values for 50 and 100, increase chroma through the middle shades, then reduce chroma again toward 900 and 950. The exact values should be inspected in the final browser gamut.

Color Pick lets you edit generated shades individually, preview website and mobile components, and export CSS variables or Tailwind-compatible data.

Common Tailwind scale mistakes

A generated sequence still needs product decisions.

• Placing the source color at an arbitrary label
• Using equal RGB mixes for every step
• Keeping excessive chroma in very light shades
• Allowing dark shades to shift hue unpredictably
• Using shade labels directly everywhere instead of semantic tokens
• Skipping focus, disabled, and dark-mode checks

Key takeaways

A Tailwind scale should be perceptually ordered, role-aware, and tested in components.

• Document the source color.
• Control lightness and chroma deliberately.
• Use semantic tokens above raw shade labels.
• Check gamut and provide fallbacks.
• Validate component states and dark mode.
• Export editable values rather than treating generation as final.

Frequently asked questions

Primary references

These sources support the standards and technical explanations in this guide. Color Pick recommendations and product-specific limitations are identified separately in the article.

1. Colors — Core conceptsTailwind CSS
2. Theme variables — Core conceptsTailwind CSS
3. CSS Color Module Level 4W3C
4. <color> CSS data typeMDN Web Docs