The mixed colour
-
HEX
— -
RGB
— -
HSL
— -
HSV
— -
CMYK
—
Your colours are converted in this browser. Nothing is uploaded and nothing is saved.
Mix two colours in any proportion and take the result in whichever notation you need. The blend is interpolated in sRGB — the same space the browser uses when it fades one colour into another — so the result matches what a CSS transition or a gradient would produce between the same two values.
That is worth stating plainly, because mixing light is not mixing paint. Halfway between blue and yellow in sRGB is a grey, not a green, and anyone expecting the pigment result will be surprised by the correct answer.
How to use this tool
- Enter or pick the first colour and the second.
- Drag the amount slider, or use the preset buttons for all of one, a quarter, half, three quarters or all of the other.
- Watch the result swatch and the values beside it.
- Copy the mixed HEX value, or every format at once.
Why mixing blue and yellow gives grey
Mixing paint is subtractive: pigments absorb light, so blue and yellow together leave mostly green. Mixing the colours a screen emits is additive, and averaging the three channels of blue and yellow gives roughly equal parts of red, green and blue — a grey. This tool does the arithmetic the screen does, which is what makes the result a real colour pair for CSS.
What the amount means
The amount is how much of the second colour goes into the mix, so 0% is the first colour exactly, 100% is the second, and 25% is one part of the second to three of the first. Because the interpolation is linear, moving in equal steps produces through the range produces visually uneven steps — mid-tones crowd together, which is a property of the space rather than of this tool.
Transparent colours
If either colour is translucent, the alpha values are mixed in the same proportion as the channels, and the result is shown over the checkerboard. That keeps the arithmetic consistent, though for what a translucent colour looks like over a specific background you want the contrast checker, which composites the colour first and measures the result.
Frequently asked questions
Why is mixing yellow and blue not green?
Because this mixes light, not pigment. Averaging the channels of blue and yellow gives a grey; green is what you get from mixing the two as paint, where the pigments subtract light instead.
Does 50% give the exact average?
Yes, channel by channel, then rounded to the nearest whole number — so 50% between two colours is the arithmetic mean of their red, green and blue values.
Can I mix more than two colours?
Not on this page. Two at a time keeps the amount control meaningful; mix the result with a third colour on a second pass, or use the palette generator for a whole family.
What happens if one colour is transparent?
The alpha values are blended in the same proportion as the colour channels, and the swatch shows the result over a checkerboard so you can see the transparency.