Color Shades Generator
Build a 50–950 colour scale with tints and shades, ready for CSS or Tailwind.
One Brand Colour, Eleven Usable Shades
A design system needs more than one version of its brand colour: a pale wash for backgrounds, a mid tone for borders, a strong shade for buttons, a near-black for text. This generator builds the familiar 50 to 950 scale from a single colour, the way Tailwind’s own palette is built, so the steps look evenly spaced to the eye.
It works in OKLCH, a colour space designed around human perception, which is why the pale end does not bunch together and yellows do not go muddy the way they do when you simply mix with white and black. The classic RGB tints and shades are there too, and the whole scale exports as code.
Key features
- 50–950 scale — eleven steps modelled on Tailwind’s v4 palette.
- Perceptual OKLCH — even steps, with out-of-gamut colours mapped properly.
- Your exact colour kept — placed at the step nearest its lightness.
- Contrast labels — each swatch shows its best text colour and WCAG ratio.
- Five export formats — CSS variables, Tailwind v4 @theme, Tailwind v3 config, SCSS and JSON tokens.
This tool runs entirely inside your browser using native Web APIs. Your files and text are never uploaded to a server, never logged and never shared with third parties.
How to use: Color Shades Generator
- Pick your base colour
Use the colour picker or type a hex code. - Name it
The name is used in the exported variables, such as brand-500. - Check the scale
Click any swatch to copy its hex code. - Export
Choose a format and copy the code into your project.
Technical specifications
| Processing location | Entirely in your browser — no server round trip |
|---|---|
| Data uploaded | None. Files and text never leave your device |
| Price | Free — no account, no trial, no usage cap |
| Category | Design |
| Works offline | Yes, once the page has loaded |
| Browser support | Chrome 90+, Edge 90+, Firefox 90+, Safari 15+ |
| Interface languages | English, 中文, हिन्दी, Español, العربية |
Frequently asked questions
Why is my colour not at 500?
Because 500 is a particular lightness in the scale. A pale colour belongs nearer 200 and a dark one nearer 800; forcing it to 500 would make the rest of the scale uneven. Your exact colour is marked with a dot wherever it lands.
What is OKLCH?
A way of describing colour by lightness, chroma (colourfulness) and hue, designed so that equal numeric steps look like equal visual steps. It is supported directly in modern CSS, and it is what Tailwind v4 uses for its default palette.
What is the difference between a tint and a shade?
A tint is a colour mixed with white; a shade is mixed with black. They are the traditional way to lighten and darken a colour, shown here for reference alongside the perceptual scale.
Which shade should I use for text?
Each swatch shows whether white or black text on it passes WCAG AA, which needs a contrast ratio of at least 4.5:1 for normal text. Use a colour contrast checker to test specific pairs.
Does it work for greys?
Yes. A grey input produces a neutral scale with no tint introduced.