Colour mixer — blend two colours in sRGB, OKLab, OKLCH and more

How to use the colour mixer

1. Choose the First colour and the Second colour. HEX, rgb(), hsl(), oklch() and CSS names all work.
2. Drag Amount of second colour to set the mix, from 0% to 100%.
3. Pick a space under Mix in: sRGB, Linear sRGB, OKLab, OKLCH, CIE Lab, CIE LCH, HSL or HWB.
4. Read the Mixed colour with its RGB, HSL and OKLCH values, and look at the quarter steps (0%, 25%, 50%, 75%, 100%).
5. Copy the CSS. Use the swap button to reverse which colour is first.

What it does and when to use it

The mixer finds the colour that sits a chosen distance between two others. Designers use it to make a hover colour by mixing a brand colour with a little black, to find a middle shade between two brand colours, or to test how a color-mix() rule will look before writing it.

The space you mix in changes the answer a lot, which is the main reason to use this tool rather than guess. For a whole run of steps between colours, the gradient generator is quicker. To lay one colour over another with transparency, use the alpha blend calculator. For the exact color-mix() syntax with both percentages, try the CSS color-mix() generator.

How it works

Both colours are converted into the chosen space, and each coordinate is interpolated: result = first + (second − first) × amount. Alpha is premultiplied, as CSS does. In the polar spaces (OKLCH, LCH, HSL, HWB) hue is interpolated along the shorter arc of the colour wheel, and a grey end borrows the other colour’s hue so the mix does not swing through an unrelated colour.

The result is converted back to sRGB. If it is out of gamut it is brought inside by reducing OKLCH chroma until the change is no longer visible, the gamut-mapping method in CSS Color Module Level 4.

Worked examples

These are the mixer’s own results.

Red and blue, 50% in sRGB. The result is #800080, rgb(128, 0, 128). The quarter steps are #ff0000, #bf0040, #800080, #4000bf, #0000ff.

Blue #3b82f6 and yellow #facc15, 50%. The space decides the outcome:

White and black, 50%. sRGB gives #808080. Linear sRGB gives #bcbcbc, because it averages light energy rather than encoded values.

Limits and tips

• This is light mixing, not paint or ink mixing. No setting predicts how two pigments combine.
• Only two colours at a time. Mix the result again with a third if you need to.
• Hue direction is always the shorter arc here. For longer or increasing hue paths, use the CSS color-mix() generator.
• The work happens in your browser; colours are not uploaded.