Skip to main content

Color Mixer

Mix two to four colors in parts, percent, millilitres or grams and see what you get as paint. Blue and yellow make green here, not gray.

What do you want to make?

As paintgreen#60A144
blue
1 part · 50%
yellow
1 part · 50%

Result

As paint

green

#60A144
rgb(96, 161, 68)

Pigment model (Kubelka-Munk): how paints mix on paper or canvas.

On a screen (RGB average) the same mix is olive, #8B9169

RGB average

olive

#8B9169
rgb(139, 145, 105)

What most color tools and a semi-transparent layer in an image editor give.

Scale to a batch

  • blue#1F4FB4250 ml
  • yellow#F7D21E250 ml

Measure all paints by weight or all by volume: paints differ in density, so grams and millilitres do not mix in one recipe.

From one paint to the other

#1F4FB4
#046273
#2E7E53
#60A144
#99BE37
#D1CF28
#F7D21E

Share of the second color.

What two colors make

Equal parts of two typical paint colors, computed with the same model. Tap a mix to load it into the mixer.

Color mixing chart

Nine typical paint colors mixed with each other in the same pigment model. Each square is the row color plus the column color; the diagonal is the paint on its own. Tap a square to see the mix above the chart.

More of the row color:

1 part blue + 1 part yellow: green #60A144

Paint mixing chart, ratio 1:1, row color to column color
whitewhiteyellowyelloworangeorangeredredpinkpinkpurplepurplebluebluegreengreenblackblack
whitewhite
yellowyellow
orangeorange
redred
pinkpink
purplepurple
blueblue
greengreen
blackblack

A model of typical pigments, not of a given brand. Real tubes with the same screen color can mix differently, so paint your own chart with your own paints before relying on it.

How it works

Each color is turned into a reflectance curve: how much light it reflects at each wavelength from violet to red. Mixing paints adds up how much each one absorbs, using single-constant Kubelka-Munk theory. Each color is weighted by the square of its share, its tinting strength squared and its luminance, so a 2:1 mix leans further than two-thirds of the way. The mixed curve is turned back into a screen color under daylight (D65). The calculation runs in your browser with the open-source spectral.js library (MIT).

The RGB average is the share-weighted mean of the red, green and blue values. It is what a semi-transparent layer in an image editor gives, and what most online color mixers show. More on our formulas: How we calculate.

What the model cannot know

Real paints are pigments, not screen colors. Two paints that look the same on screen can mix differently, and white, black and transparent paints vary a lot between brands. The model gives dark colors little weight: in equal parts with white, black counts for about 1%, so its grays come out light. The color names in the results are rough hints from the hue and lightness; the HEX value is the answer.

Color mixing: questions

What colors make brown?
Brown is a dark, muted orange, so start from orange or from red and yellow, then dull it with a little of a cool color. In our pigment model, purple and yellow in equal parts give brown (#BC8642), and red and green give grayish brown (#574145). Add more red or yellow for a warmer brown, a little blue for a darker one.
What do blue and yellow make?
Green. As paint, the blue and yellow shown in the table give green (#60A144). A plain RGB average of the same two colors gives olive (#8B9169), which is why many digital tools say the mix is grayish: they average light, not pigment.
What do red and blue make?
Purple, but a dark one: purple (#503251) in our model. Most reds contain some yellow, which pulls the mix toward brown. For a clean purple, start from a crimson or magenta rather than an orange-red.
What do green and purple make?
A muted color between them: grayish green (#395B53) in our model. Each absorbs much of the light the other reflects, so they dull each other.
How do I read the color mixing chart?
Pick a row color and a column color; the square where they meet is the mix. The ratio buttons set how much of the row color goes in: 2:1 means two parts of the row color to one of the column color, so the chart stops being symmetric. Print chart prints only the table, with the HEX value in each square.
Can I mix by percent, millilitres or grams?
Yes. Choose the unit above the colors: parts, percent, ml, g, fl oz, oz, teaspoons, tablespoons or drops. The mixer only uses the proportions, and shows each color's share of the amount; its pull on the result also depends on how strong the color is. "Scale to a batch" turns the recipe into amounts for the total you need. Measure either by weight or by volume, not both: paints differ in density, so 10 g and 10 ml of two paints are not the same proportion.
Why is paint mixing different from RGB mixing?
A screen adds light: red and green light together look yellow. Paint subtracts light: each pigment absorbs part of the spectrum, and a mix absorbs what both absorb. The mixer models this with Kubelka-Munk theory, which works with reflectance across the visible spectrum rather than with three RGB numbers.
Will my real paints mix exactly like this?
Not exactly. The model turns each screen color into a typical pigment curve, but two real paints with the same screen color can contain different pigments and mix differently. Brand, opacity, medium and drying all matter. Use the result as a starting point and test on a scrap.

Sources

  1. Kubelka P., Munk F. (1931). Ein Beitrag zur Optik der Farbanstriche. Zeitschrift für technische Physik 12, 593–601. English translation by S. Westin. Link
  2. spectral.js: Kubelka-Munk paint mixing in JavaScript (MIT licence). Link