Colour Shades & Tints Generator
Build a 10-step 50-900 scale from one base colour, with HEX and WCAG contrast ratios.
About Colour Shades & Tints Generator
In HSL, 50% lightness is literally the same number for yellow and for blue, yet the eye reads 50% yellow as far brighter than 50% blue — so a ramp built by moving the L channel alone will not give visually even steps. This generator builds the standard 50-900 scale by interpolating your base colour toward white and black, and prints the real WCAG contrast ratio beside every step so you choose by number rather than by eye. Hue is held fixed across all ten steps, so the scale never drifts off-brand.
How to use Colour Shades & Tints Generator
- 1
Pick the base colour with the picker, or type it as HEX, RGB or HSL in the text field.
- 2
Set the variable name; it is reused in both outputs and any illegal characters are folded to hyphens automatically.
- 3
If the tints and shades look too saturated, enable softening to pull saturation down at the ends of the ramp.
- 4
Read each row for its HEX and its contrast against white and black, and click a HEX to copy that single step.
- 5
Copy the whole CSS custom-property block or the Tailwind config snippet from the panes below.
Frequently asked questions
Why are the steps not evenly spaced to my eye?
Because HSL is not a perceptual colour space. A fixed numeric lightness gap does not correspond to a fixed perceived gap, which is most obvious with yellows and cyans that look far more luminous than blues at identical L. For truly even spacing you would need a perceptual space such as OKLCH; here the contrast-ratio column is your practical, objective check.
Which step should I use for body text?
A common assumption is that 500 is the brand colour and therefore safe for text. It usually is not. Cyan #22d3ee scores only 1.81:1 on white, which fails even the large-text threshold. On a white background you typically have to go down to 600 or 700 to clear 4.5:1 — the on-white column tells you exactly where that happens.
Why do 50-300 look almost identical when I start from a light colour?
That is a genuine limitation of the method. The base always lands on step 500, so if its lightness is already around 90% there is only 10% of headroom left toward white and the top four steps necessarily bunch up. Feed it a mid-tone with roughly 45-60% lightness for a balanced ramp; the HSL readout under the input shows you where you are.
Will the output match Tailwind's own palettes?
No. Tailwind's default palettes are hand-tuned and deliberately shift hue slightly along the scale. This tool produces a mathematically consistent, fixed-hue ramp from your own colour. The snippet goes under theme.extend.colors, so it adds your scale without removing the built-in palettes.