Colour Shade Scale Generator

What this generator does

Gives you eleven steps from near-white to near-black in one hue, evenly spaced in perceptual lightness rather than in RGB. Built the usual way — in HSL, or by mixing towards white and black — the mid steps of a green ramp end up visibly lighter than the mid steps of a blue one, and every component that pairs them looks slightly wrong. Spacing the steps in OKLCH fixes that by construction: the lightness of step 500 is identical in every hue.

How to use this tool

1. Pick a hue in degrees, or paste a hex colour to take its hue.
2. Adjust the peak chroma if you want the ramp more or less colourful.
3. Press Generate scale.
4. Copy the ramp as hex, as CSS custom properties, or as `oklch()` values.

Understanding the controls

Hue

The hue the whole ramp holds, in degrees. Pasting a hex colour takes its hue and rebuilds the ramp around it, which is how you turn an existing brand colour into a full scale.

Peak chroma

How colourful the middle of the ramp gets. Chroma follows a curve rather than staying constant, because near-white and near-black physically cannot hold much of it — asking for a fixed chroma throughout just means the ends get silently reduced.

Worked examples

Hue 220 (blue)

50 near-white through 950 near-black, with 500 sitting at lightness 0.585 — the same lightness 500 has in every other hue.

Hue 140 (green)

The same eleven lightnesses. Only the hue differs, which is exactly the point.

Peak chroma 0.24

A more saturated ramp; the mid steps stay in gamut while the extremes are reduced further.

Common use cases

• Building a design system's colour tokens from scratch
• Adding a new accent colour to an existing system so it matches the ramps already there
• Generating a dark-theme ramp that mirrors a light one predictably
• Replacing a hand-tuned ramp where the mid steps never quite matched between hues
• Producing consistent state colours — success, warning, danger — at matched weights

How this generator works

The eleven steps are spaced evenly in OKLCH lightness from 0.97 down to 0.20, which is what makes them look evenly spaced. Chroma follows a curve that peaks around the middle of the ramp and falls away towards both ends, mirroring what hand-built design-system ramps do and what the sRGB gamut allows: at lightness 0.97 almost no chroma is displayable in any hue, so a flat chroma value would simply be clipped there. Each step is then gamut-mapped into sRGB, holding its lightness and hue, so the ramp is displayable throughout.

Randomness and fairness

Nothing here is random unless you ask for a random hue, which is drawn with the browser's cryptographic random number generator. Given a hue, the ramp is entirely deterministic — the same hue always produces the same eleven colours, which is what makes it usable as a design token source.

For how randomness is produced across the whole site, see how Generate Random works.

Limitations and good to know

• The ramp holds one hue throughout. Many hand-tuned systems shift hue slightly towards the ends — warmer in the tints, cooler in the shades — and that judgement is not automated here.
• Achievable chroma differs by hue even at matched lightness, so a yellow ramp will be less colourful than a blue one at the same setting. That is the sRGB gamut, not a fault.
• Step numbering follows the common 50–950 convention, which is a convention rather than a standard; systems that use 100–900 or 1–12 will need remapping.
• Matched lightness does not guarantee matched contrast ratio, because WCAG luminance and OKLCH lightness are different models. Check any text pairing directly.
• It generates one ramp. Deciding which hues a system needs, and what each means, is design work this cannot do.

Common mistakes

Expecting the same hex at step 500 across different hues

The hex will differ — that is the whole point. What matches is the lightness, which is what makes components built from different ramps look consistent.

Using a flat chroma across the whole ramp

Near-white and near-black cannot hold chroma. A flat value just gets reduced at the ends, producing an uneven ramp where it matters most.

Assuming step 500 is readable on white

Check it. Around 4.5:1 is roughly where the mid steps land, and it varies by hue. The contrast tool gives you the actual figure.

Practical tips

• Generate every ramp in your system with the same peak chroma so the whole set matches in weight.
• For a dark theme, reverse how you use the ramp rather than regenerating: what was 100 on light becomes 900 on dark.
• Paste your existing brand hex to take its hue, then use the generated 500 as the new brand step — it will usually be very close and will fit the rest of the system properly.

Privacy and your data

Nothing is stored and nothing is uploaded. A hex colour you paste is converted in your browser and is not sent anywhere or written into the page address. Analytics records that a scale was generated and never the colour.

Frequently asked questions

Why does my green ramp look less colourful than my blue one?

Because sRGB reaches much further into blue than into green at the same lightness. At mid lightness blue tops out around 0.31 chroma and green well below that, so a green ramp at the same setting is genuinely duller. It is a limit of the display gamut, not of the tool.

What do the numbers 50 to 950 mean?

They are a common design-system convention for tint and shade steps, with 50 the lightest and 950 the darkest. 500 is usually the base colour. The numbers are a naming convention rather than a measurement of anything.

Can I generate a ramp from my existing brand colour?

Yes — paste the hex and the ramp is built around its hue. The generated mid step will usually be close to your original but not identical, because it is placed at the lightness the system requires rather than wherever your original happened to sit.

Will step 500 pass WCAG AA on white?

Usually, and not always — it depends on the hue. OKLCH lightness and WCAG relative luminance are different models, so check the specific pair rather than relying on the step number.

Why eleven steps rather than nine?

Because 50 and 950 are the two most commonly added to the original nine, and having a very light and a very dark end saves most systems from adding them by hand later.