Shade Scale
A full light-to-dark scale from one colour, stepped so it looks even rather than measured even.
Result
Good to know
- Lightness is stepped in OKLCH rather than in sRGB. Walking sRGB bunches everything into the dark end, which is why hand-made scales so often have five usable light shades and two muddy dark ones.
- Hue and chroma are held from your colour, so the scale stays recognisably the same colour rather than drifting toward grey or toward another hue.
- The step numbers follow the 100-to-900 convention most design systems use, so the output drops straight into one.
- Click any swatch to copy just that one; the button above copies the lot as CSS variables.
30 views