A color shades generator for tints, shades, tones and full scales
The Color Shades Generator turns one colour into everything you need around it: tints (mixed with white), shades (mixed with black) and tones (mixed with grey) in 10% steps, plus a Tailwind-style 50–950 scale that keeps your exact colour at the right step and derives the rest in the perceptual OKLCH colour space.
Designers use it for hover and pressed states, borders, subtle backgrounds and dark-mode variants. Developers get a ready-made CSS custom-property block, a Tailwind theme.extend.colors entry or JSON. Every swatch copies its HEX with one click, and nothing is sent anywhere — the maths runs in your browser.
How to use the Color Shades Generator
- Type a base colour in any CSS format — HEX, rgb(), hsl(), oklch() or a name such as “royalblue” — or pick one with the colour square.
- Read the 50–950 scale. The outlined swatch is your exact colour; lighter steps go towards 50 and darker steps towards 950.
- Below it, pick from tints, shades and tones in 10% steps. Click any swatch to copy its HEX code.
- Give the scale a name (for example “brand” or “sky-blue”) so the generated variables and Tailwind classes use it.
- Choose CSS variables, Tailwind or JSON and press “Copy code”.
Color Shades Generator features
Tailwind-style 50–950 scale
Eleven steps whose lightness follows the curve of Tailwind’s own palettes, generated in OKLCH so every step keeps the same hue and looks evenly spaced.
Your colour stays exact
The base colour is placed at the nearest step unchanged, so a brand HEX code is never altered.
Tints, shades and tones
Thirty extra variants mixed with white, black and mid-grey — the classic painter’s definitions.
Chroma that tapers naturally
Very light and very dark steps get less chroma, avoiding the neon pastels and muddy darks that plain HSL lightness changes produce.
Three export formats
CSS custom properties (scale plus tints and shades), a Tailwind config block and JSON with HEX values.
One-click copying
Each swatch is a button that copies its HEX; the full code block has its own copy button.
Tints, shades and tones — what is the difference?
In colour theory a tint is a colour mixed with white, a shade is a colour mixed with black and a tone is a colour mixed with grey. This tool mixes in sRGB, the same arithmetic as the CSS function color-mix(in srgb, red 70%, white): a 30% tint of #FF0000 is #FF4D4D, a 50% shade is #800000 and a 50% tone is #BF4040.
Tints make good backgrounds and highlights, shades make good text, borders and pressed states, and tones give muted, sophisticated versions of a bright brand colour.
How the 50–950 scale is built
Each step has a target lightness in OKLCH, from about 97.5% at step 50 to 26% at step 950, matching the shape of Tailwind CSS’s default colours (its blue-50 is about 97% and blue-950 about 28%). Your base colour is placed at the step with the closest lightness. For the other steps the hue is kept and the chroma is reduced gradually towards both ends of the scale, then every colour is mapped into the sRGB gamut with the CSS Color 4 method.
Because OKLCH lightness tracks what the eye perceives, a yellow scale and a blue scale generated here will look equally light at the same step — something HSL cannot do. Learn more about the model in the Color Converter, which shows OKLCH values for any colour.
| Step | Typical use in a UI |
|---|---|
| 50–100 | Page and card backgrounds, subtle highlights |
| 200–300 | Borders, dividers, disabled states |
| 400–600 | Buttons, links, icons — the “brand” colour |
| 700–800 | Hover and active states, text on light backgrounds |
| 900–950 | Headings, dark-mode surfaces |
Using shades well
- For text on a light tint, pick a 700 or darker step and confirm 4.5:1 in the Contrast Checker.
- In dark mode, swap the roles: 900–950 for surfaces and 300–400 for accents.
- Combine two scales — a brand colour and a neutral — rather than many; build harmonies with the Color Palette Generator.
- For a smooth background blend of two steps, use the Gradient Generator.
Color Shades Generator FAQ
How do I generate shades of a colour?
Paste the colour into the base colour box. The tool instantly shows ten shades mixed with black, ten tints mixed with white, ten tones mixed with grey and an eleven-step scale. Click a swatch to copy it.
Why does the scale use OKLCH instead of HSL?
HSL lightness is not perceptual: a yellow and a blue with the same HSL lightness look very different in brightness, and darkening in HSL often turns colours muddy. OKLCH keeps perceived lightness and hue consistent, which is why modern design systems and Tailwind CSS v4 use it.
Does the generated scale match Tailwind’s built-in colours?
It follows the same lightness curve, but Tailwind’s palettes were hand-tuned, so a scale built from, say, blue-600 will be close to, not identical with, Tailwind blue. Use it for your own brand colours; use Tailwind’s palettes when you want theirs.
Which step should my brand colour be?
The tool picks the step whose lightness is closest to your colour, usually 500 or 600 for typical button colours. A very light brand colour may land at 300, a very dark one at 800.
How do I use the output in Tailwind CSS?
Choose the Tailwind tab and paste the block into tailwind.config.js (v3). You then get classes such as bg-brand-500 and text-brand-900. In Tailwind v4, paste the CSS variables into an @theme block with names like --color-brand-500.
Can I export the colours as JSON?
Yes. The JSON tab lists the base colour, every scale step and the tints, shades and tones as HEX values — handy for design tokens and Style Dictionary.