Explore oklch(), color-mix(), and perceptually uniform palettes —
the color tools design systems should be built on.
L (lightness 0–1), C (chroma 0–0.4), H (hue 0–360°).
Compare the real oklch() swatch with an hsl() string using the same numbers.
Fixed L & C — sweep hue: OKLCH stays equally light; HSL does not
Mix two colors in oklch space for perceptually even blends.
Drag the ratio — output is a live CSS string you can paste into tokens.
Switch color space — notice srgb/hsl midpoints look muddier than oklch.
Lock lightness and chroma, step hue evenly — the recipe for accessible, consistent design tokens.