Colour blend calculator
Two colours and a position between them. The answer comes twice, because averaging hex values and mixing light are different sums with different results. Nothing you choose here leaves your browser — it is worked out on your own device, so there is nothing to send and nothing to log.
Black and white do not average to grey
Take #000000 and #FFFFFF and average the
numbers: you get #808080. Every colour tool does this.
But #808080 is not half the light of white. sRGB is
gamma-encoded: the number in a hex code is not
proportional to how much light the screen emits. 128 out of 255 is
about 21% of the light of 255, not 50%. So the
honest midpoint — the colour you get by mixing half the light
of black with half the light of white — is
#BCBCBC.
That is 60 levels out of 255 apart, on the one example everybody can check.
| Averaged | Mixed | Apart | |
|---|---|---|---|
| black + white | #808080 | #BCBCBC | 60 |
| red + green | #808000 | #BCBC00 | 60 |
| #404040 + #C0C0C0 | #808080 | #929292 | 18 |
Swept over 200,000 random pairs, the median gap is 22.8 levels and 86% of pairs differ by more than 8, which is a visible step. This is the normal case, not an edge case.
Which one do you want?
It depends what you are doing, and this page refuses to choose for you.
Mixing light is right for anything physical: overlapping projections, a photograph, what a screen does when it fades between two images. Image editors that blend correctly are doing this.
Averaging the encoding is right when you want the midpoint of the numbers, which is what CSS does in a plain gradient and what most design tools show. It is not wrong, it is a different question — but almost nobody realises they are answering it.
The reason it matters is that gradients built by averaging go
muddy in the middle. Black to white through #808080
spends most of its length looking dark, because the eye is reading
light and the numbers are not light.