How to mix colors
- Each row is one ingredient. Set its color with the swatch button or by typing a HEX code.
- Type how many parts of that color go into the mix. "2" and "1" means two parts of the first to one part of the second, exactly like a paint recipe.
- Add a color for up to six ingredients. Set a row to 0 parts to leave it out without deleting it.
- Read the three results on the right and copy whichever one you need.
The ratio bar shows your recipe as proportions, and the sentence under it spells out the percentages.
Three ways to mix, three different answers
Ask "what do blue and yellow make?" and you get different answers depending on what blue and yellow are.
Paint (subtractive)
Pigments absorb light. A blue paint soaks up most of the red and yellow wavelengths; a yellow paint soaks up blue. Mix them and the only light both let through is the green in between, so you get green.
HexaCalc models this with spectral.js, an MIT-licensed library that estimates a reflectance curve for each color across the visible spectrum and mixes them with Kubelka-Munk theory, the same physics paint companies use for color matching. With the default recipe, one part #1F3FBF blue and one part #F5D90A yellow give #649D41, a leafy green.
Light (additive)
Colored lights add together. Shine a red spotlight and a green spotlight on the same white wall and the overlap is yellow; add blue and you get white. The light result adds the channels in linear light, scaled by parts, and clips at full brightness. Pure red #FF0000 plus pure green #00FF00 gives #FFFF00.
Digital average
This is what you get from naive blending in code: the average of the RGB numbers, weighted by parts. One part pure yellow #FFFF00 and one part pure blue #0000FF average to #808080, a flat gray. That is why CSS color-mix() in sRGB, or a simple gradient midpoint, can look muddy. It is not wrong, it just models neither paint nor light.
| Recipe | Paint | Light | Average |
|---|---|---|---|
#FFFF00 + #0000FF, 1:1 | #398F54 green | #FFFFFF white | #808080 gray |
#1F3FBF + #F5D90A, 1:1 | #649D41 green | #F7E0BF cream | #8A8C65 olive gray |
#C2241B + #FFFFFF, 1:3 | #FFB7B1 pink | #FFFFFF white | #F0C8C6 dusty pink |
Mixing real paint from these numbers
The paint result is a prediction for idealised pigments. Real tubes differ: a phthalo blue and an ultramarine with the same screen color mix to quite different greens, because their spectral curves are not the same. Use the result as a target, then mix a small test batch:
- Start with the lighter color and add the darker one a little at a time. Dark, strong pigments (phthalos, quinacridones, black) overpower quickly.
- Measure parts by volume, drops or weight, and write the recipe down as you go.
- Let a test swatch dry. Acrylics darken as they dry; gouache often lightens.
- Compare the dried swatch with your screen in daylight, not under a warm bulb.
To tint toward white or shade toward black in even steps, the shades generator is quicker than mixing each step here.
Why tints made with white go cool and chalky
Mix red with white in the paint model (1 part #C2241B to 3 parts white) and you get #FFB7B1, a pink that leans slightly cooler and paler than a simple lighter red. Painters know this effect: white lowers chroma faster than it raises lightness. The digital average misses it. If you are planning paint mixes, trust the paint column.
Uses beyond paint
- Dyeing and resin. The subtractive model is a fair first guess for transparent dyes and pigmented resin, though concentration matters more there.
- Stage and LED lighting. Use the light column when you plan colored gels or RGB fixtures pointing at the same surface.
- UI states. Designers often derive hover colors by mixing a brand color with 10% black or white. Do it here with 9 parts color to 1 part black and compare the average and paint results.
- Gradients. If a gradient midpoint looks gray, compare it with the paint result and use that as an extra stop in the gradient generator.
FAQ
What two colors make green?
In paint, blue and yellow. On screens, green is a primary and cannot be mixed from other light primaries. Cyan light plus yellow light does give green, though.
What colors make brown?
Mix complementary colors in paint: orange with blue, red with green, or yellow with purple. Two parts orange #E07B24 to one part blue #1F3FBF gives #887732, an olive brown; add a touch of red to warm it up.
Why does the light result go white so quickly?
Because light only adds. Every extra light makes the result brighter, so three or more lights at full strength clip to white.
Is spectral.js accurate?
It is a physically based approximation that reproduces the familiar results (blue plus yellow makes green, not gray). It has no data on specific paint brands, so it cannot replace a test swatch.