Color Palette & Shades Generator

about this tool

One colour in, a palette out

Give the tool a brand colour in any CSS syntax and it builds the eleven-step scale that design systems and Tailwind use: 50 through 950, pale to dark. The work happens in OKLCH, where lightness matches perception and hue is independent of it, so the steps look evenly spaced and a blue stays the same blue as it darkens — neither of which is true in HSL or by mixing in RGB.

The target lightness of each step is read off Tailwind v4's own palettes (blue-50 is L 0.97, blue-500 L 0.62, blue-950 L 0.28), hue is held constant, and chroma follows a bell that peaks around 500–600 and falls to about a tenth at the pale end and two fifths at the dark end, as their palettes do. Your colour is placed exactly on the step whose lightness is nearest its own — the panel says which — so the scale contains your colour, not an approximation of it. Every step is checked against the sRGB gamut; one that would fall outside has its chroma reduced along the same hue until it fits, and the note lists which steps that happened to. A grey input gives a neutral ramp rather than an invented hue.

Each swatch shows the contrast ratio of white or black text on it, whichever is higher: 4.5 passes WCAG AA for body text, 3 for large text.

Tints, shades, tones and harmonies

Six tints (towards white), six shades (towards black) and six tones (towards grey), all mixed in OKLCH so the hue holds. Five harmonies — complementary, analogous, triadic, split complementary, tetradic — are hue rotations at the same lightness and chroma, clamped into sRGB where a rotated hue cannot hold the chroma. Every row copies as a comma-separated list; every swatch of the scale copies alone.

Export

Values can be written as hex, oklch(), hsl() or rgb(). The scale exports as CSS custom properties in :root, a Tailwind v4 @theme block (--color-brand-500, which makes bg-brand-500 and friends exist), a Tailwind v3 theme.extend.colors entry, SCSS variables, or JSON. The palette name is slugged for the variable names: "Ocean Blue" becomes ocean-blue.

Limits

The scale is one hue; a palette that shifts hue towards warm at the light end and cool at the dark end, as some hand-tuned systems do, is not generated here. The step lightness targets are Tailwind's, so a colour whose lightness sits between two targets moves to the nearer one and the rest of the scale is built around it — a very light saturated colour such as pure yellow therefore anchors at 100 and the scale below it is a series of darker yellows and olives, which is correct but may not be what a brand wants. Only the sRGB gamut is considered; Display P3 output is not offered. Nothing is stored.

To read any one of these values back as RGB or HSL, use the colour converter. Before committing a shade to body text, check it in the WCAG contrast checker — a mid-scale colour rarely passes on white.

To start from a photograph or screenshot instead of a single colour, the image colour picker extracts a palette from the picture itself.

questions

How is the 50–950 scale built?

In OKLCH, the perceptual colour space Tailwind v4 uses for its own palettes. Each step has a target lightness read off Tailwind’s scales — 50 is very pale, 500 is mid, 950 is very dark — the hue is held constant, and chroma follows a bell that peaks around 500–600 and tapers towards both ends. Your colour is placed exactly on the step nearest its lightness, so the palette contains it rather than an approximation.

Why OKLCH rather than HSL?

HSL lightness is not perceptual: HSL yellow at 50% is far brighter than HSL blue at 50%, and darkening a colour in HSL shifts its apparent hue. OKLCH lightness matches what the eye sees, so equal steps look equal and a blue stays the same blue as it darkens. Every modern browser now supports oklch() in CSS.

What is the difference between tints, shades and tones?

A tint mixes the colour with white, a shade with black, a tone with grey. Tints lighten without changing hue, shades darken, tones desaturate towards neutral. The tool mixes in OKLCH so the hue does not drift the way it does when mixing in RGB.

Why does a step say it was pulled into sRGB?

Some combinations of lightness and chroma do not exist in sRGB — there is no very light, fully saturated red. When a step would fall outside the gamut its chroma is reduced along the same hue until it fits, which keeps the colour recognisable. Clipping the red, green and blue channels instead would shift the hue.

How do I use the palette in Tailwind v4?

Copy the @theme export into your CSS: it declares --color-brand-50 to --color-brand-950, and Tailwind generates bg-brand-500, text-brand-700 and the rest automatically. For Tailwind v3, the config export drops into theme.extend.colors. Plain CSS variables, SCSS variables and JSON are there for everything else.