Designing a Custom Tailwind Color Scale
Step-by-step guide to generating a 10-step color scale for Tailwind CSS using HSL manipulation.
Published:
Tags: custom Tailwind color scale, Tailwind color generation, HSL color scale Tailwind
Designing a Custom Tailwind Color Scale A Tailwind color scale is 11 shades of one hue spanning from near-white to near-black. This guide explains the algorithm behind generating them and how to customize it for your brand. For the full overview of color utilities, see the Color Tools for Designers and Developers guide. --- Why Tailwind Uses a Numeric Scale Tailwind's scale (50, 100–900, 950) replaces subjective names like "light blue" with objective shade numbers. A component that uses and has a clear, predictable relationship — the same relationship that holds for every other color in the system. For your custom brand color, generating this same 11-step scale means you get identical predictability with your own color. --- The Lightness Distribution | Shade | Lightness | Visual Character…
Frequently Asked Questions
How do I generate Tailwind color shades?
Pick your base brand color as an HSL value. Fix the hue and adjust lightness from ~97% (shade 50) down to ~4% (shade 950) across 11 steps. Optionally, slightly reduce saturation at the extremes. A Tailwind shade generator automates this, producing an object of 11 hex values you can paste directly into tailwind.config.js.
What algorithm creates a good color scale?
Good scales interpolate lightness in a perceptually uniform space. Simple linear HSL interpolation works but can produce uneven visual jumps because HSL's lightness axis isn't perceptually linear. For better results, interpolate in oklch where equal L differences look equally different to human eyes. Most shade generators use HSL with slight saturation tweaks for the extremes to compensate.
How does HSL help with color shade generation?
HSL separates hue from lightness, so you can generate shades by holding H constant and sweeping L from high (light) to low (dark). In RGB or hex, you'd need to recalculate all three channels for every shade step. HSL makes the relationship explicit: shade 50 = same hue at ~97% L, shade 950 = same hue at ~4% L.
How many shades should a Tailwind color have?
The standard Tailwind scale has 11 shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. This gives enough granularity for backgrounds (50–200), borders (200–300), secondary elements (300–500), primary elements (500–700), text (700–900), and extreme dark surfaces (950). Fewer shades mean more limited component design options.
What is the lightness range for a color scale?
A practical range for 11 steps: shade 50 at ~97% L (near white), down to shade 950 at ~4–7% L (near black). The middle shade (500) sits near 50% L. The spacing is slightly non-linear — the light end is more compressed (50 at 97%, 100 at 94%, 200 at 87%) while the dark end spreads more (800 at 20%, 900 at 12%, 950 at 7%). This better matches how colors look on real screens.
All articles · theproductguy.in