Tools
Colour Studio
Mix two colours in the browser and compare the colour spaces side by side, then derive a whole set of states from a single brand colour. Every swatch is painted by the declaration you copy.
Widely availablesince Nov 2025 Widely availablesince Nov 2025 Newly availablesince Sept 2024
The same two colours, mixed 0% to 100%, in each space. Watch the middle: sRGB goes grey and dull where OKLCH keeps its chroma.
Every colour above is computed by the browser from the one brand colour. Change the brand and the set follows, which is the point: one token, not six.
Why the colour space matters
Mixing is drawing a line between two colours and picking a point on it. The line is straight in whichever
space you name, and the spaces are shaped differently. In srgb the midpoint of two saturated
colours runs through a grey, dull middle, because sRGB is a description of a monitor, not of what an eye
sees. oklab and oklch are built so that equal steps look equal, and
oklch travels around the hue wheel, so the middle of a blue-to-orange mix stays vivid.
The ramps above are the same two colours in each space; the difference is not subtle.
Relative colour: one token instead of six
oklch(from var(--brand) calc(l - 0.06) c h) reads as: take the brand colour, split it into
lightness, chroma and hue, and rebuild it with the lightness lowered. A hover state, a muted variant and a
border stop being six hand-picked hex values that drift apart the first time the brand changes. They are
derived, so they cannot drift.
Shipping it safely
Check the badges at the top of this page: color-mix() and OKLCH are widely available, and
relative colour is newer. The copied CSS puts a plain hex first and the modern declaration second, so a
browser that does not understand the second line keeps the first. The hex is the value your own browser
resolved, read back from the rendered swatch. More on status at modern CSS:
what is safe to ship, and the palette generator builds the
ramp this studio mixes from.