Difficulty
Orange, purple, green, and other secondary colors made by mixing two primaries. Learn the basics of color mixing.
Look at the target color and move the red, blue, and yellow sliders to mix the same color. You can also adjust brightness with white and black. Press "Check" to see your score. 10 questions total.
When you mix red, green, and blue light together, you get white. This is additive color mixing, the method used by TV and phone screens. But when you mix red, blue, and yellow paint together, the result moves toward dark brown or black. This is subtractive color mixing, and it is the experience Color Mix Lab recreates.
In subtractive mixing, each pigment absorbs certain wavelengths of light and reflects the rest. Red paint absorbs blue and green light, reflecting only red wavelengths. Blue paint absorbs red and green. When you mix these two, the blue absorbs red, the red absorbs green, and the red partially absorbs blue, leaving very little light to reflect -- resulting in a dark purplish color. Light is being "subtracted" at each step, hence the name.
Color Mix Lab treats red, blue, and yellow as the paint primaries, and internally converts them to RGB using trilinear interpolation over the RYB color model (Gosset & Chen, 2004). This conversion ensures that mixing red and yellow gives orange, blue and yellow gives green, and red and blue gives purple -- just as it would with real paint.
The human eye has three types of cone cells, each responding most strongly to long wavelengths (red-ish), medium wavelengths (green-ish), or short wavelengths (blue-ish). Every color we perceive is the brain's interpretation of how these three cone types are stimulated. That is why three primary colors are sufficient to create virtually any color.
However, red-blue-yellow is not the only possible set of primaries. Additive color mixing (light) uses red, green, blue (RGB), and printing ink uses cyan, magenta, yellow (CMY). Red-blue-yellow became the traditional choice for paint because historically available pigments in these hues could produce the widest range of colors. Color Mix Lab adopts these primaries to match the experience children have with their first art supplies -- crayons and paints -- recreating it with sliders on screen.
Color has three properties: hue (the color family -- red, blue, green, etc.), saturation (vividness), and value or lightness (how light or dark it is). The three primary sliders let you roughly control hue and saturation, but they are not enough for lightness. That is where the white and black sliders come in.
Adding white is like squeezing white paint into the mix: the color becomes lighter and more pastel. Creating salmon pink or lavender gray is impossible without white. Adding black darkens and deepens the color. Forest green or plum cannot be reached without some black in the mix.
At the Hard difficulty, nearly every target color requires careful adjustment of both white and black. How much you add becomes the key factor in your score.
How different are two colors, objectively? The answer is deltaE (delta-E), a standard metric for perceptual color difference. Color Mix Lab uses the CIE76 formula. Here is how it works.
First, the on-screen color (sRGB) is converted to linear RGB by undoing gamma correction, then transformed through XYZ color space into CIE L*a*b*. L*a*b* was designed to approximate human color perception: L* represents lightness, a* the red-to-green axis, and b* the yellow-to-blue axis. The Euclidean distance between two colors' L*a*b* values is the deltaE.
A deltaE of 0 means the colors are identical. Around 2.3, the difference is barely perceptible to most people. Above 10, the colors are clearly different. Color Mix Lab converts this value to a 0-100 score (deltaE 0 = 100 points, 50 or above = 0 points). A score above 80 means most people would call the two colors the same.
At Easy, you see secondary colors -- orange (red+yellow), purple (red+blue), green (blue+yellow) -- that can be made by mixing just two primaries. The connection between primaries and the resulting color is intuitive, making this a great starting point for learning color mixing.
At Normal, tertiary colors are introduced: vermilion (red-heavy orange), cobalt blue (blue with a touch of red), terracotta (red+yellow with a bit of blue). Getting these right requires fine-tuning the ratio of all three primaries, building a sense of proportion.
At Hard, the targets are subtle intermediate shades like salmon pink, teal, beige, and lavender gray. These are colors you see every day but struggle to describe in terms of primaries. White and black become essential, and the challenge lies as much in brightness as in hue.
At first, it is perfectly fine to move the sliders randomly. Discoveries like "adding red made it brownish" or "a little black made it suddenly dark" are the trial-and-error that builds color intuition.
As you improve, try mentally breaking down the target color before touching the sliders. "This color has a lot of blue. But it leans green, so I need some yellow. It is dark, so a touch of black too." This decomposition process is the same skill used when painting, choosing outfits, or making design decisions.
Parents can play alongside their children, asking questions like "What if we add a little more yellow?" or "What do you think white will do?" Talking about color while experimenting helps connect color names with sensory experience.
Color Mix Lab runs entirely in your browser. There is no communication with any external server.
The color mixing calculation (RYB-to-RGB conversion) and the color difference calculation (CIE76 deltaE) are both pure math functions that run entirely on your device. Sound effects are synthesized with Web Audio on the spot; no image or audio files are loaded at all.
The only data saved is your best score per difficulty, stored in your device's localStorage. No names or ages are entered, and nothing about your activity is sent anywhere.