Color Shades

Build a full 50 to 950 scale from a single colour, with your own value kept exactly where it belongs.

Runs on your deviceDesign & ColorWorkingNo account needed

What this tool does

Color Shades converts the colour you give it to HSL and then moves only its lightness along a fixed ladder of rungs, measured once from a well-balanced reference ramp. Hue and saturation are carried through untouched, which is what makes the output read as one family: every step is the same colour seen at a different lightness rather than eleven swatches that happen to sit near each other.

Where your colour lands is decided by the colour itself, not by you. The tool picks the rung whose lightness is nearest yours, pins your value there unchanged, and rescales each half of the ladder so the steps above and below still reach the light and dark extremes. Your hex therefore appears in the result exactly as you typed it, at whichever step it genuinely belongs to — a pale mint anchors near 100, a deep navy near 900, and there is no setting that forces a colour onto 500 when its lightness says otherwise.

Three limits are worth knowing before you commit a colour ramp to a stylesheet. This is HSL lightness, not a perceptual measure, so the steps are evenly spaced arithmetically but not to the eye; a yellow at 500 reads far brighter than a blue at 500, and the hand-tuned scales shipped with design systems shift hue and saturation between steps in ways this deliberately does not. Alpha is dropped, so a semi-transparent input produces a fully opaque scale. And the contrast figures in the results table are measured against white and black only, so a step you intend to pair with some other text colour still has to be checked in WCAG Contrast Checker. All of the work happens in this browser tab — the colour is not uploaded, and the tool keeps working with the network off.

How to use it

  1. Set the base colour. Use the colour control in the settings, or paste one value into the input box: hex in 3, 4, 6 or 8 digits, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), or a CSS colour name. A pasted value takes priority over the picker.
  2. Name the scale. The name becomes the prefix on every step, so brand produces --brand-50 upward. Anything that is not a letter, digit, hyphen or underscore is replaced with a hyphen before it is used.
  3. Decide whether you want the 950 step. It is on by default and gives eleven steps. Turn it off for the ten-step 50 to 900 ramp that a lot of existing token sets still use.
  4. Choose the output shape. Custom properties inside a :root block, an SCSS map, or a JSON object of step to hex. Each swatch above the code carries its hex, the step name and the lightness, and the table beside them adds the RGB triplet.
  5. Copy the result. Copy output puts the generated code on your clipboard. There is no file to download here — the code block is the deliverable.

Processing & privacy

Runs on your device. Your file is processed directly in this browser.

Common use cases

Starting a design system from one brand colour

A client supplies a single hex and nothing else. This gives you the surrounding steps in one pass, already named in the convention your tokens use.

Filling in the steps around a colour you must keep

Because the base is anchored rather than recomputed, the shade that is already in production stays byte-identical while the rest of the ramp is built around it.

Making a tinted neutral

Feed in a grey with a few per cent of saturation and every step keeps that tint, which is what stops interface greys looking flat next to a coloured brand.

Getting dark-end surfaces from a light brand colour

The lower steps extend a colour that only ever existed as a mid-tone, giving you somewhere to put borders and pressed states.

Handing tokens to another codebase

The SCSS map and the JSON object carry the same values as the custom properties, so a Sass build and a JavaScript theme file can be generated from the same run.

Questions

Is my colour sent anywhere?
No. The conversion, the ladder and the code generation all run in this browser tab, so nothing about the colour is transmitted or stored, and the tool still works with the connection dropped.
Why is my colour not at 500?
Because the step is chosen by lightness. The tool anchors your value at the rung closest to it and rebuilds the rest around that, so a light colour lands high on the scale and a dark one lands low. There is no override that moves it to 500 — to sit at 500 the colour has to be a mid-tone.
Why do the gaps between steps look uneven?
The ladder moves HSL lightness, which is arithmetic rather than perceptual. Two adjacent light steps can look nearly identical while two dark ones look far apart, and the same step number on a yellow and a blue will not read as the same weight.
How is this different from Palette Generator?
Palette Generator varies hue to build a harmony of distinct colours. Color Shades holds hue and saturation still and varies only lightness, which is the difference between choosing a scheme and building the tints and shades of one colour already chosen.
Will it match Tailwind, Radix or another published palette?
No. The step names follow the same 50 to 950 convention, but published scales are tuned per colour, usually by nudging saturation and hue at the ends. This holds both constant, so expect a close relative rather than a copy.
Which steps can carry readable text?
Each row of the results table gives the contrast ratio against white and against black, plus a verdict naming whichever of the two clears 4.5:1 — or saying neither does. That covers black and white text only; for any other pairing, take the hex into WCAG Contrast Checker.
What happens to a semi-transparent colour?
The alpha is discarded. rgba(59, 130, 246, 0.5) is read for its hue, saturation and lightness, and every step comes back fully opaque.
What if I start from white, black or a pure grey?
You get a greyscale ramp, because saturation is zero and stays zero. Black anchors at the darkest step and the rest of the scale is built upward from it; white does the same from the top.

Related tools