Orpheus

Generate a Colour Scale

Tints and shades, blended in OKLab so the steps look even.

Options
Steps
Show contrast against white and black
Result

Everything is processed in this tab. Nothing you paste is sent anywhere.

Every tool runs entirely in your browser. Your files are never uploaded to a server.

A colour scale mixes a base colour toward white for lighter steps and toward black for darker ones. Blending in OKLab rather than raw hex makes equal numeric steps look like equal steps.

How to use Colour Shades Generator

  1. Enter your base colours. Hex, shorthand hex or rgb(), one per line.
  2. Choose how many steps. Nine matches the 50–900 convention most design systems use.
  3. Read the contrast figures. Against white and black, so you can see which steps carry text.

About generating colour shades

A colour scale is a set of related tints and shades derived from one base, and the reason to generate rather than pick is consistency — nine hand-chosen values from the same hue will drift in saturation in ways that show when they sit next to each other. The important implementation detail is the colour space the blending happens in. sRGB hex values are gamma-encoded, which means they are not proportional to the amount of light a display emits. Averaging two hex values therefore averages the encoding rather than the brightness, and the result is consistently darker and less saturated than the eye expects — the classic muddy midpoint when blending two saturated colours. Converting each channel to linear light, mixing there, and converting back produces the result people actually want. It is the same conversion that underlies gradient rendering in modern browsers, and it is why a CSS gradient in oklab looks cleaner than the old default. Contrast ratios belong beside a scale rather than in a separate tool, because the practical question about any step is whether text can sit on it. The WCAG formula uses the same linear-light conversion with luminance weights per channel, and the thresholds worth remembering are 4.5:1 for body text and 3:1 for large text at AA. It is worth knowing the limitation: computed luminance and perceived lightness diverge somewhat around yellows and cyans, so a mathematically even scale can look slightly uneven there and is worth adjusting by eye.

Frequently asked questions

Why blend in OKLab rather than mixing hex values?
Because sRGB values are gamma-encoded, so averaging them averages an encoding rather than a colour — the familiar muddy midpoint. Linear light corrects that and overshoots the other way, brightening faster than the eye reads. OKLab is built so equal numeric steps look equal, which is what a numbered scale claims to be.
What do the numbers 50 to 900 mean?
A convention popularised by Material Design and Tailwind, where 500 is the base and lower numbers are lighter. It has no formal definition — the value is that everyone reading your CSS knows roughly what 700 looks like relative to 500.
What contrast ratio do I need?
WCAG AA requires 4.5:1 for body text and 3:1 for large text, which is 18pt or 14pt bold. AAA raises those to 7:1 and 4.5:1. The ratios here are computed with the standard relative luminance formula, so they match what an accessibility checker will report.
Why do the light and dark ends not go all the way?
Because a scale that reaches pure white and pure black loses the colour identity at both ends and gives you two useless steps. Stopping short keeps every step recognisably part of the same family, which is what a scale is for.
Should I generate a scale or pick each step by hand?
Generate first, then adjust. A mathematical scale is consistent and can look slightly off around yellows and cyans, where perceived lightness does not track computed luminance evenly. Hand-tuning two or three steps from a generated base is faster than choosing nine from nothing.

Last updated