Tints, shades and tones
These three words have exact meanings in colour theory:
- Tint: the colour mixed with white. Lighter and softer, good for backgrounds.
- Shade: the colour mixed with black. Darker and deeper, good for text and hover states.
- Tone: the colour mixed with grey. Less saturated and more muted, good for calm, grown-up palettes.
How the 50 to 950 scale works
Tailwind CSS made the 50 to 950 scale popular. 50 is almost white, 500 is a mid colour and 950 is almost black, in eleven steps. Because every colour uses the same steps, blue-600 and rose-600 feel equally strong, which makes a design easier to keep consistent.
This tool builds the scale in OKLCH, a colour space where equal steps look equal to the eye. Mixing with white and black in RGB tends to make light steps chalky and dark steps muddy; working in OKLCH keeps the hue steady and eases the saturation at both ends, much like Tailwind's own palettes. Your exact colour stays at its step, and you can choose which step that is.
Which step to use where
Check text pairs with a contrast checker. As a rough guide, text from 600 up passes on white for most colours, and text at 50 or 100 works on 700 and darker.
- 50 to 100: page and card backgrounds, badges
- 200 to 300: borders, dividers, disabled states
- 400 to 500: icons, illustrations, focus rings
- 600 to 700: buttons, links and their hover states
- 800 to 950: headings and body text, dark mode backgrounds
Adding the scale to Tailwind
For Tailwind v4, paste the @theme block into your main CSS file. It creates classes like bg-brand-50 and text-brand-900 with no config file. For Tailwind v3, add the colors object to theme.extend in tailwind.config.js. For plain CSS, the variables go in :root and you use them as var(--brand-500).
Frequently asked questions
What is the difference between a tint, a shade and a tone?
A tint is a colour mixed with white, a shade is mixed with black, and a tone is mixed with grey. Tints get lighter, shades get darker and tones get more muted.
How do I make a lighter or darker version of a colour?
Paste the colour here and pick a step: anything below its step is lighter and anything above is darker. In HSL you can also change only the lightness value.
What do Tailwind's 50 to 950 numbers mean?
They are lightness steps. 50 is the lightest, 500 is the middle and 950 is the darkest. The numbers are the same for every colour, so the scales line up.
Should my brand colour be 500?
Not always. A light colour like yellow fits better at 300 or 400, and a dark navy at 800 or 900. Nearest step puts it where its lightness fits; you can also choose a step.
Why use OKLCH instead of HEX?
OKLCH describes colour the way eyes see it, so steps look even, and Tailwind v4 uses it for its own colours. HEX works everywhere, so you can copy either.