Most people arrive at a color mixer with one very specific question:
what do these two colours make? The answer depends entirely on whether you are mixing
paint or light, and the two disagree so sharply that a tool giving only one
of them will look broken to half the people using it. This one gives you both, plus the plain
average a screen does, and you switch between them without losing your colours.
Pick your colours. Type a hex code into either row or click the swatch to open your system colour picker. Add Colour brings in a third, fourth or fifth — this is a color mixing generator for whole recipes, not only pairs.
Set the ratio. The plus and minus buttons set how many parts of each colour go in, exactly the way you would describe a mixture out loud. The percentage on the right shows what your color mixing ratio works out to.
Choose the model. Paint for pigment, Light for lamps and screens, Digital Blend for the straight average.
Take the codes. The result comes with hex, RGB, HSL and CMYK, each with a copy button, plus the nearest common colour name.
Nothing here needs an account and nothing you enter leaves the page. It is a
color mixing online tool in the tab you already have open.
Paint, light and blend: three different answers
Yellow and blue is the pair that shows why this matters. Mix the paints and you get green.
Shine the two lights on the same wall and you get something close to white. Average the two
hex codes and you get a muddy slate that is neither. All three are correct answers to
different questions:
Mode
What it models
Primaries
All three together
Paint
Pigment on paper. Each layer absorbs part of the light, so mixing takes colour away. This is subtractive mixing.
Red, yellow, blue
Near black — the brown mud every art student produces once
Light
Beams landing on the same spot, like stage lamps or the sub-pixels in your screen. This is additive mixing.
Red, green, blue
White
Digital Blend
The straight average of two hex codes. Not a physical process at all, but it is what software does by default.
—
Mid grey
If you are painting, printing or dyeing anything, Paint is the mode you want. If you are
working with LEDs, stage lighting or thinking about how a display actually produces colour,
use Light. Digital Blend is the one to use when you need the result to match what a browser
or a design tool will do on its own.
What colours make brown, purple and green
These three account for most of what people ask a mixer, and all three are pigment questions
— the Paint mode answers. The recipes panel above loads each one into the mixer so you
can shift the ratio and watch it move:
Green is yellow and blue in equal parts. More yellow moves it to lime, more blue to a deep bottle green.
Purple is red and blue in equal parts. Lean toward blue for violet, toward red for a warmer plum.
Brown is all three primaries at once — two parts red, two parts yellow, one part blue is a dependable mid brown. This is also why orange and blue makes brown, and why red and green does: each of those pairs quietly contains all three primaries. It is the same reason a palette turns brown when you stop washing the brush.
Orange is red and yellow; two parts red to one part yellow gives scarlet, the reverse gives amber.
Pink is red with white — one part red to three parts white. There is no way to reach pink without something lighter to mix into, which is why it is not on the wheel.
Using the colour mixing chart
A color mixing chart is a reference for the pairs that come up constantly, and
the one on this page is generated by the mixer rather than drawn once and left alone. Every
result square is the colour the tool would actually give you, so the chart cannot drift away
from the tool. Switching the mode rebuilds it, which makes the difference between
additive and subtractive mixing visible in one click: the same
twenty-two pairs, twenty-two different answers.
Clicking any row loads that pair into the mixer above, which is usually where you want to
start — the chart gives you the ballpark and then you adjust the ratio to land on the
exact shade.
For the full chart in printable form — every pair of primaries and secondaries, the
ratio ladders, mixing with white and black, and why five of the fifteen pairs come out brown
— there is
Colour Mixing
Chart: What Two Colours Actually Make.
Mixing colours in CSS
The CSS panel gives you the mixed colour as a custom property to paste into a stylesheet, and
alongside it the color-mix() function, which browsers evaluate themselves:
One thing to be careful about: color-mix(in srgb, …) is a plain average, so it
matches the Digital Blend mode and not Paint or Light. Paste that line expecting the
green you can see above and you will get grey. When you want the paint result in CSS, copy the
hex instead. Swapping srgb for oklab gives a perceptually smoother
blend that avoids the grey dip halfway between two hues — still an average, but a better
behaved one, and worth using for gradients and hover states.
How close is this to real paint?
Close enough to plan with, not close enough to skip the test swatch. The Paint mode uses an
RYB pigment model, which reproduces the behaviour every art class teaches — the right
hue, the right direction as you shift the ratio, and the right slide toward mud when all three
primaries turn up together.
What it cannot know is tinting strength. Real pigments are wildly unequal: a phthalo blue will
dominate a mixture at a fraction of the volume, while some earth colours barely register. If a
mixture matters, use this to work out the recipe and then mix a small amount on paper before
committing to it. For screen work there is no such caveat — hex codes are exact, and the
Color Converter
will take the result on to CMYK or HSL. If you want to see where the mixed colour sits in
relation to everything else, the
Color Wheel
builds harmonies around it.
Frequently Asked Questions
Yellow and blue make green when you are mixing paint, ink or anything else with pigment in it. Set the mixer to Paint, put yellow in one row and blue in the other, and the result comes out green. Add more yellow and it moves toward lime; add more blue and it moves toward a deep bottle green.
Brown is what happens when all three primaries are present at once. Two parts red, two parts yellow and one part blue is a reliable mid brown. You can get there from a secondary too: orange plus a little blue, or red plus green, both land in the same family because each pair adds up to the same three primaries.
Red and blue in equal parts. Lean the ratio toward blue for violet and toward red for a warmer magenta-purple. Adding even a trace of yellow will dull it, because yellow is the third primary and completes the set that turns any mixture brown.
Because they are two different physical processes. Paint is subtractive: each pigment absorbs part of the light hitting it, and what yellow and blue both fail to absorb is green. Light is additive: a yellow beam and a blue beam add together and the result is close to white. The mixer has both models, so switch between Paint and Light on the same two colours to see the difference.
Additive mixing starts with darkness and adds light. Its primaries are red, green and blue, and all three together give white. Subtractive mixing starts with white paper and takes light away. Its primaries are red, yellow and blue for artists, or cyan, magenta and yellow for printing, and all three together give near black. Screens are additive, everything printed or painted is subtractive.
Yes, up to five. Use Add Colour to bring in another row, and give each one a number of parts if they are not going in equally. Three parts of one colour to one part of another is exactly what you would tell someone at a paint counter, and the percentage beside each row shows what that ratio works out to.
Yes. Type or paste a hex code into any row, or use the swatch to open your system colour picker. The result is shown as hex, RGB, HSL and CMYK, each with its own copy button, along with the closest common name for the colour.
The CSS panel gives you the result as a custom property you can paste straight into a stylesheet. It also shows the equivalent color-mix function, which browsers can evaluate themselves. Note that color-mix in srgb is a plain average, so it matches the Digital Blend mode rather than the Paint or Light models.
It is a reference showing what common pairs of colours produce when they are mixed. The chart on this page is generated by the mixer itself rather than typed out, so every square is the colour the tool would actually give you, and clicking any row loads that pair into the mixer to adjust.
It is a good guide to the direction a mixture will go, not a substitute for testing on paper. Real pigments vary between brands and some are far stronger than others, so a cadmium red will overpower a mixture in a way the model does not predict. Use it to plan a mixture and to settle arguments about what makes what, then mix a small test swatch before committing.
No. Every calculation runs in your browser, nothing is uploaded or stored, and the tool keeps working offline once the page has loaded.