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.
What people use it for
- Finding the midpoint between a brand colour and a neutral
- Checking whether two greys are far enough apart to read as different
- Building a tint of an accent without leaving its hue
- Settling how close two versions of a logo colour actually are
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 anywhere it is going to be pasted. Read the OKLCH line if you want to know how the blend sits between the two originals in lightness, because the HSL figure will not tell you that honestly.
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.