Home▸Colours & Light▸2D Color Mixing: Additive Light & Subtractive Paint

2D Color Mixing: Additive Light & Subtractive Paint

2D flat companion to the 3D color-mixing lab: drag overlapping red/green/blue light circles or cyan/magenta/yellow paint blobs and watch the overlap regions compute real additive (screen-blend) or subtractive (pigment) color mixing.

Colours & Light2DEasy60 FPS⇄ 3D version
2d-3d-color-mixing ↗ Open standalone

This is the flat companion to the 3D color-mixing lab: instead of an orbitable scene, three draggable, semi-transparent circles sit on a plain 2D canvas and you position them by hand. In Light mode the circles are red, green and blue light sources and every overlap region is computed as a true additive sum of the channels involved, clamped at 255 — slide two circles together and the overlap turns yellow, magenta or cyan exactly as real RGB light does, and all three together turn white. Switch to Paint mode and the same three circles become cyan, magenta and yellow pigment blobs; overlaps are computed with a subtractive (multiplicative reflectance) model, so cyan over magenta gives blue, magenta over yellow gives red, and all three stacked together approach black, the way real ink or paint pigments behave.

⚙ Under the hood

2D flat companion to the 3D color-mixing lab: drag overlapping red/green/blue light circles or cyan/magenta/yellow paint blobs and watch the overlap regions compute real additive (screen-blend) or subtractive (pigment) color mixing.

color mixingadditive colorsubtractive colorRGB lightCMY paintcolor theory2d

2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install

What did you find?

Add reproduction steps (optional)