Color Blender
Note: Blue to yellow through sRGB passes through grey — that is the straight line between them in a space never built for perceptual mixing. Press "Compare the spaces" with two saturated colours to see the difference plainly.
In sRGB, mixing blue and yellow gives grey. That is not a quirk — it is what a straight line between those two points passes through in that space, and it is why so many hand-mixed palettes have a muddy middle. In OKLab, the same two colours meet through a green that stays saturated, because the space is built so that equal numeric distance corresponds to equal perceived difference. For any blend intended to look good rather than to satisfy an equation, OKLab is the right choice.
The steps are what make this a palette tool rather than a curiosity. Ten steps between a brand colour and a neutral gives a tint ramp; five between two brand colours gives a set of related accents that belong together because they share a path. Each step here reports its contrast against black and white, so the point at which the ramp stops being usable for text is visible rather than discovered later.
CSS can now do this natively. color-mix(in oklab, red 30%, blue) computes the blend in the browser, which means a single declaration can produce a hover state from a base colour without you generating and storing a second value. The output includes both — the computed hex for pasting anywhere, and the color-mix form for when you want the browser to do it.
Alpha is handled too, though it is worth remembering a translucent colour has no fixed contrast ratio until you know what is behind it.
Frequently Asked Questions
Why does mixing blue and yellow give grey?
Because in sRGB the straight line between them passes through the desaturated centre of the space. That is the arithmetic working correctly on a space that was never designed for perceptual mixing. Switch to OKLab and they meet through a saturated green instead.
Which space should I blend in?
OKLab for anything meant to look right — it keeps the midpoint saturated and produces evenly spaced steps. sRGB when you specifically need to match what another tool or an older browser produced, since that is what most of them do.
What is color-mix and should I use it?
A CSS function that computes the blend in the browser: color-mix(in oklab, var(--brand) 80%, black). It is supported everywhere current and means a hover state can be derived from a base colour rather than stored as a second value. Keep a plain hex fallback for older browsers, which drop the whole declaration.
How many steps should a ramp have?
Nine or ten if you are building a design system scale, matching the 50–900 convention. Three to five for a set of related accents. Past about twelve, adjacent steps become indistinguishable and you are storing values nobody can tell apart.
Can I blend colours with transparency?
Yes, and the alpha is interpolated along with the channels. Bear in mind that a translucent colour has no fixed contrast ratio — it depends entirely on what sits behind it, so the figures shown assume the colour is composited over the page background.
