Palette generator

How the palette is built

Two rules, and the second is the one that makes it useful.

Every stop sits at a fixed lightness. The ten stops are defined by target values on the CIE L* scale, not by how far they are mixed:

Stop	50	100	200	300	400	500	600	700	800	900
L*	96	92	85	75	62	50	41	35	28	24

Because the targets are absolute, 500 means the same brightness whether the color is a red, a green or a blue. That is what lets a token ladder work across a whole system rather than one hue at a time.

Your color keeps its place, and its value. Rather than forcing your color to be the 500, the generator measures its lightness and puts it on the stop it actually belongs to — then uses your exact hex for that stop, untouched. Every other stop is mixed from it toward white or black until it lands on that stop's target.

So a pale mint arrives at 100 with one lighter stop above it and eight darker below. A deep navy arrives at 900. Neither is forced into a shape that does not fit.

Why there is no position control

Because the position is not a choice — it is a measurement. A light pink is a 200 or a 300; calling it a 500 would not make it one, it would only bend the rest of the ramp out of shape to accommodate the claim.

This is also what keeps the palette stable. There is no control that can reshape it, so there is no way to end up with a "400" that is nearly white because the arithmetic was asked to fit too many stops into too little room.

What this does not do

Mixing happens in sRGB, toward white and black. That gets the lightness of every stop exactly right, but it desaturates as it goes — the further a stop is from your color, the greyer it becomes. Hand-tuned ramps like Tailwind's and Material's also shift hue slightly across the scale, warmer at the light end and cooler at the dark end, which straight mixing cannot reproduce.

In practice the stops near your color are close to what a hand-built ramp would give, and the far ends are flatter. If you need the chroma held all the way down, treat this as a starting point and adjust the extremes by hand.

Common questions

How do I get one stop out rather than all ten? Click the swatch. Each one copies its own hex, and the button at the top of the panel copies the whole named ramp.

What is in the downloaded image? All ten stops with their names and hexes, on a light sheet, with your own color marked. It is drawn in your browser, so nothing is uploaded, and the file is the same every time for the same color.

Why did my brand color land on 600 instead of 500? Because its lightness is nearer 600's target than 500's. That is information worth having: it means what you think of as your mid-tone is a step darker than a typical scale's midpoint, which is often why a brand color feels heavy in an interface.

Why doesn't this match the Tailwind palette exactly? The lightness of every stop matches closely. The hue and saturation do not, because Tailwind's scales are hand-tuned with a deliberate hue drift. Expect the right shape and a flatter color.

Can I get more or fewer than ten stops? Not here. Ten named stops are what design systems converge on, and a fixed ladder is what makes tokens comparable between palettes. For a free-form ramp, use tint and shade.

What if my color is nearly black or nearly white? It still lands on the closest stop — 900 or 50 — and keeps its exact value. The ladder does not extend past those, so a very dark color will sit noticeably darker than 900's target, leaving a larger gap to 800 than the other steps have.