Color mixer: paint mixing and light mixing side by side
Mix two to four colors in any proportion and see two answers at once: a paint-style result, where blue and yellow give green (#09902A), and a light-style result, where the same pair gives gray (#BCBCBC). The paint result is a model, not a recipe.
The paint result is a model, not a recipe: real pigments vary by brand, so mix a test patch first.
On this page
Ask a painter what blue and yellow make and the answer is green. Ask a screen designer and a naive average of the two gives a muddy gray instead. Both answers are right, because paint and light mix by different rules. This mixer shows both results for the same inputs so the difference is easy to see.
Using the mixer
Each color has a picker, a hex box and a Parts slider from 1 to 10. Two colors are loaded when the page opens, blue #0000FF and yellow #FFFF00, in equal parts. Add a color brings in a third and a fourth, with a white one as the default, and Remove color takes one out again. Below the inputs you get two swatches with their hex codes: Like paint and Like light.
Paint is subtractive, light is additive
Paint and ink work by absorbing. Each pigment removes some wavelengths from the white light bouncing off the page, and a second pigment removes more. Blue pigment absorbs red and some green, yellow pigment absorbs blue, and what both let through is mostly green. That is why paint mixes get darker, and why the traditional painter's primaries are red, yellow and blue (RYB).
Light works the other way. A screen builds colors by adding red, green and blue (RGB) light, so more light means a brighter result. Red and green light together look yellow. The mixer's light result averages the linear-light values of your colors, which models overlapping lamps of equal strength; averaging means equal parts of red, green and blue come out as a mid gray, #9C9C9C, not white.
For paint, the mixer uses a red-yellow-blue model based on Gosset and Chen's 2004 paper, described on the methodology page. It is a model of pigments in general, so a real tube of paint may land somewhere else. Mix a test patch first.
Reading a mixing chart
Here is every pair of five basic colors mixed one to one, using the paint model:
| Red | Yellow | Blue | White | Black | |
|---|---|---|---|---|---|
| Red | #FF0000 | #FF8000 | #92006D | #FF8080 | #800000 |
| Yellow | #FF8000 | #FFFF00 | #09902A | #FFFF80 | #808000 |
| Blue | #92006D | #09902A | #384F95 | #98A0C0 | #1C284A |
| White | #FF8080 | #FFFF80 | #98A0C0 | #FFFFFF | #808080 |
| Black | #800000 | #808000 | #1C284A | #808080 | #000000 |
Red and yellow give orange (#FF8000), red and blue give a purple (#92006D), and yellow and blue give the green (#09902A). The same red and yellow in the light model produce #BCBC00, a dull yellow, and red with blue gives #BC00BC.
Worked example
You are teaching a beginner acrylic class and want students to make a pink from red and white. Set Color 1 to red #FF0000 and Color 2 to white #FFFFFF. With 1 part red and 3 parts white, the paint result is #FFBFBF, a soft blush. With 3 parts red and 1 part white it is #FF4040, a strong coral-red. Students can try those ratios on a palette and compare their patches with the swatches. Real paint will drift from the screen, which makes a good talking point about pigments and white's covering power. Ignore the light swatch for this exercise, since it applies to screens.
Where to go next
To find colors that go together instead of blending, use the color wheel. To create lighter and darker versions of a single color, try the shade and tint generator.