Generate a configurable-length colour scale, light to dark — compare a perceptually-uniform OKLCH sweep against HSL and naive RGB blending side by side, for one colour or a whole design system at once.
Browse CSS lessonsOKLCH sweep
1
2
3
4
5
6
7
8
9
Sweeps lightness in OKLCH, a perceptually-uniform colour space, holding chroma and hue from your base colour — equal steps actually LOOK equally spaced. Recommended; this is what modern design tools and the CSS oklch() colour function use.
HSL sweep
1
2
3
4
5
6
7
8
9
Sweeps lightness in HSL, holding hue and saturation — simple, widely understood, and what most quick colour-shade tools do. Reasonable, but HSL lightness isn’t perceptually uniform, so steps can look bunched up or stretched depending on the hue.
Naive RGB blend
1
2
3
4
5
6
7
8
9
Blends your colour toward white or black directly in raw sRGB — what the W3Schools reference tool this was built from actually does. Included specifically so you can see the problem: blending in raw RGB desaturates and shifts hue as it goes, visibly worse than the other two.
1
2
3
4
5
6
7
8
9
A real button and badge using this colour’s OKLCH scale — text colour auto-picked for whichever of white/near-black actually passes AA against the background.
@theme {
--color-primary-1: #a6f0ff;
--color-primary-2: #85cdff;
--color-primary-3: #65aaff;
--color-primary-4: #4688ff;
--color-primary-5: #2866ee;
--color-primary-6: #0643ca;
--color-primary-7: #001ba7;
--color-primary-8: #040084;
--color-primary-9: #130062;
--color-neutral-1: #e4f7ff;
--color-neutral-2: #c3d5ee;
--color-neutral-3: #a2b3cc;
--color-neutral-4: #8293ab;
--color-neutral-5: #64748b;
--color-neutral-6: #47576c;
--color-neutral-7: #2c3b4f;
--color-neutral-8: #132133;
--color-neutral-9: #010919;
}All three algorithms target the same nominal lightness at each step — the point of comparing them is "same intended lightness, different maths for getting there," not three unrelated curves. The lightness curve itself is just even spacing from light to dark, not any framework’s hand-tuned per-colour values. Out-of-gamut colours (common at high chroma near the lightest/darkest steps) are clipped, not properly gamut-mapped — a real, stated limitation, not hidden.