Color Mixing

About

When lights of different colors are combined, the result is additive color mixing — the wavelengths from each source arrive at your eye together, and your cone cells add up the stimulation. Mix red and green light and you see yellow; add blue to that and you reach white. This is opposite to how paints or inks work: pigments remove wavelengths, so mixing them makes colors darker.

This simulation uses the HTML5 Canvas lighter blend mode, which adds the RGB channel values of each disk exactly as physics dictates. Drag the three light-source disks to any arrangement, then adjust the intensity sliders from 0 to 100% to explore how the mixed colors change. Switch to the Subtractive CMY tab to contrast paint-like pigment mixing on a white surface.

Learning Goals

• Distinguish additive (light) color mixing from subtractive (pigment) color mixing and explain why they produce different results.
• Identify the secondary colors produced by combining pairs of primary lights: Red + Green = Yellow, Red + Blue = Magenta, Green + Blue = Cyan.
• Explain why combining all three primary lights at full intensity produces white light.
• Predict the mixed color output for any arbitrary combination of Red, Green, and Blue intensities.

How to Use

• Open the simulation and observe all three sliders at 100% — note the yellow, magenta, cyan, and white overlap regions with all primaries at full intensity.
• Drag one slider to 0% and watch one primary disappear — observe how the two remaining disks' overlap changes color and the triple-overlap center is no longer white.
• Experiment mixing only two primaries at various intensities to see how the secondary color shifts — for example, reduce Red while Green stays at 100% to watch Yellow transition to pure Green.
• Switch to the Subtractive CMY tab and repeat the same adjustments — compare the overlap colors to the additive mode and discuss why Cyan + Magenta gives Blue instead of White.