Colour Mixer & Blend Calculator

The ratio is the share of colour B, exactly as CSS color-mix() reads it: 0 % is pure A, 100 % is pure B. Each channel of the chosen colour space is interpolated linearly — mix = A × (1 − t) + B × t — and the result is rounded to whole 8-bit sRGB channels. The gradient table places n stops at equal spacing from A to B and shows the sRGB and OKLab results next to each other.

Averaging sRGB channel values averages gamma-encoded numbers, not light, so the middle of two saturated colours comes out darker and greyer than either end — red and blue meet at a dim #800080. OKLab (CSS Color Module Level 4) is a perceptual space in which equal numeric steps look like equal visual steps, so its midpoint keeps the expected brightness and hue. OKLab is the default here; sRGB is available for matching a blend made in an older tool. The warning appears when the two disagree by more than 0.03 in OKLCH lightness.

The mixed colour is reported with its WCAG 2 contrast against white and against black, so you can tell whether it will carry text. The color-mix() string is the CSS Color 5 syntax with the same space and percentages; browsers compute the identical result. Nothing leaves the browser; the same four anonymous usage counts as the rest of the site apply.