Realistic Color Mixer

Why not just average the RGB values?

Screens create colour by adding light, so averaging red, green and blue channels models mixing beams of light, not pigment. Real paint mixes by subtraction: each pigment absorbs some wavelengths and reflects others, and the mixture absorbs everything either pigment would. Averaging RGB of blue and yellow gives a lifeless grey; real paint gives green.

Kubelka-Munk theory

The Kubelka-Munk model describes how light is absorbed (K) and scattered (S) inside a diffuse, light-scattering layer such as paint. For each wavelength it relates reflectance R to the ratio K/S:

To mix pigments we work per wavelength:

1. Upsample to a spectrum. Each colour is expanded from RGB into a smooth reflectance curve across the visible band (blue+yellow now genuinely overlap in the greens).
2. Convert to K/S. Each reflectance value becomes an absorption-to-scatter ratio.
3. Blend K/S linearly, weighted by each colour's amount — this is the physical heart of the mix.
4. Back to reflectance with the inverse relation, then back to RGB for your screen.

Everything runs in your browser — no data leaves your device. The spectral upsampling uses a partition-of-unity basis so a single unmixed colour round-trips back to exactly its input value.