CSS color-mix() generator — write and preview color-mix() with a fallback

How to use the CSS color-mix() generator

1. Pick the First colour and set First colour amount (0–100%). The second colour gets the remainder.
2. Pick the Second colour.
3. Choose the Interpolation space: sRGB, Linear sRGB, OKLab, OKLCH, CIE Lab, CIE LCH, HSL or HWB.
4. For OKLCH, LCH, HSL or HWB, choose the Hue interpolation: Shorter arc, Longer arc, Increasing or Decreasing.
5. Read the Computed colour and copy the CSS block, which has a HEX fallback followed by the color-mix() line.

What it does and when to use it

color-mix() lets CSS blend two colours at render time, so a hover colour, a border tint or a translucent surface can follow a theme variable automatically. Writing it is easy; predicting the result is not, because the space and hue method change the outcome a lot. This generator shows you the computed colour first, then gives you code in exactly the syntax the CSS Color Level 5 specification uses.

Use it when replacing Sass mix() with native CSS, when building theme tokens such as color-mix(in oklab, var(--brand) 80%, white), or when debugging an unexpected colour. For a quick two-colour blend with quarter steps, the colour mixer is simpler. For many stops in a row, use the gradient generator, and the CSS colour names reference lists keywords you can mix.

How it works

The tool follows the CSS color-mix() rules. With first amount p, the second amount is 100 − p. Both colours are converted to the chosen space and interpolated at p2 ÷ 100 of the way from the first to the second, with premultiplied alpha. In polar spaces the hue follows the chosen hue method, and a grey end takes the other colour’s hue. The result is converted back to sRGB and gamut-mapped for the HEX fallback.

Worked examples

These are the generator’s own outputs for red #ff0000 at 50% with blue #0000ff.

The sRGB line it writes is background: color-mix(in srgb, #ff0000 50%, #0000ff);, with background: #800080; above it as the fallback. In oklch with the longer arc the hue swings through green, and the code becomes color-mix(in oklch longer hue, #ff0000 50%, #0000ff).

Limits and tips

• Only the first percentage is set here, so the two amounts always add up to 100%. CSS also allows amounts that add up to less, which makes the result partly transparent.
• The fallback is a fixed colour; it will not follow a CSS variable.
• Everything is computed in your browser.