Color and Light: Interactive Study
Color has three parts: hue, saturation, and value. Light adds. Pigment subtracts. Use the controls on this page to see each rule work.
FIG.01 // HUE_WHEEL
Click the wheel to set the hueHue is the angle on the wheel. Two hues that sit $180^\circ$ apart are complements. They give the strongest contrast.
TRY_IT // DRAW_YOUR_OWN_WHEEL
Edit the code. Press RUN.FIG.02 // HUE_SATURATION_VALUE
Saturation is the strength of the hue. Value is the lightness. Painters control value first, because value shows the form.
HSV(32°, 92%, 71%) → RGB(181, 87, 14) → #B5570E
FIG.03 // LIGHT_ADDS
A screen mixes light. Red plus green makes yellow. All three make white.
FIG.04 // PIGMENT_SUBTRACTS
Paint and ink absorb light. Cyan absorbs red. Magenta absorbs green. Yellow absorbs blue. All three make near-black.
FIG.05 // LIGHT_ON_FORM
Drag the slider to move the lightLight describes form. The shading of this sphere is computed, not drawn. Each point gets the real diffuse term $I = k_a + k_d\,\max(\hat{n}\cdot\hat{l},\,0)$. Find the five zones: highlight, mid-tone, core shadow, reflected light, and cast shadow.
n·l at center: 0.82 → I = 0.15 + 0.85(0.82) = 0.85
TRY_IT // PAINT_A_VALUE_SCALE
Edit the code. Press RUN.The math behind the wheel
A hue $H$ becomes RGB in two steps. First compute the chroma $C$ and the middle component $X$:
$$ C = V \cdot S, \qquad X = C\left(1 - \left|\,(H/60^\circ) \bmod 2 - 1\,\right|\right), \qquad m = V - C $$
Then place $(C, X, 0)$ in RGB order by the $60^\circ$ sector of $H$, and add $m$ to each channel. The readouts in FIG.02 use this computation.
The sphere uses the Lambert diffuse law from physics:
$$ I = k_a + k_d\,\max(\hat{n}\cdot\hat{l},\,0) $$
$\hat{n}$ is the surface normal. $\hat{l}$ points to the light. The dot product falls as the surface turns away from the light. That fall is the value gradient painters study. The same law shades the robot arm on our homepage.