Colour mixer
ΔE from the first colour 40.3 — clearly different colours
Calculated in your browser · nothing is uploaded
Blends two colours at any ratio and shows how different the result is from the first, as a perceptual ΔE figure rather than as a raw number. The blend can then be turned into a full palette without leaving the page.
How to use the colour mixer
This mixes in sRGB, which is what CSS color-mix in the srgb space does and what every image editor’s blend does, and it is not how paint behaves. Mixing blue and yellow light gives grey, not green, because screens add light while pigments subtract it. If you expected green, that expectation comes from a paint model and no screen tool will reproduce it. The ΔE figure underneath is the useful part: under about 1 the difference is invisible, 2 to 3 is noticeable side by side, and above 10 they read as different colours.
Questions
Because screens mix light additively and paint mixes pigment subtractively. Green is the paint answer; grey is the light answer.
Perceptual colour difference. Under 1 is invisible, 2 to 3 is noticeable side by side, above 10 reads as different colours.
In the srgb space, yes. CSS can also mix in oklab, which is perceptually smoother and avoids the muddy midpoint.
Hex for anything going into a design tool, HSL when you want to adjust lightness by hand, and OKLCH when you need two colours to look equally light; it is the only one of the four where that number means what you expect.
Not here. Mix two, copy the result, and mix that with the third.
The blend itself is one of the five swatches: the outlined one, and the other four are drawn from one colour-wheel relationship to it: analogous, complementary, split, triadic, or near-monochrome with a single accent. Which one is picked at random, which is why pressing again gives a different set that still belongs to the same colour. The five are also spread from light to dark on purpose: five hues at one lightness look arranged but leave you nothing to put text on.