C05 · Color and spectra
Colour models and spaces
Three numbers need rules to define a colour. Separate light, encoding and coordinates.
Background if needed
Theory
RGB is a model; sRGB supplies rules
A screen adds red, green and blue light. Three numbers alone do not yet define a colour: we need to know what light each channel means and how numbers encode its amount. Here we use sRGB, one defined set of those rules.
Take one orange colour and describe it in three ways. RGB stores or displays images; HSV makes hue selection convenient; Lab separates lightness from colour and helps estimate differences. Press any colour map: the others show coordinates of the same colour. Then we will see why mixing must distinguish codes from quantities of light.
One colour — three coordinate systems
Change the colour in any map: the markers and numbers in the others follow the same result.
Press or drag on a coloured plane. Its slider moves the slice along the third axis. Arrow keys on a focused plane change its two coordinates; hold Shift for a larger step.
RGB: how much of each channel
The cube has red, green and blue axes from 0 to 1. Black is at the origin; white is at the opposite corner. These sRGB codes store and display colour.
The plane below shows R and G at the chosen B. Move B to sweep the slice through the cube.
HSV: how to pick a colour
Hue H goes around, saturation S runs from the grey centre to the edge, and V runs upward. HSV rearranges the same RGB codes: easier for picking colours, but V does not measure lightness.
The circle is unwrapped into a plane: H runs rightward and S upward. The V slider changes the cylinder slice height.
Lab: lightness apart from colour
L* is lightness; a* goes from green to red and b* from blue to yellow. This helps adjust lightness and estimate small colour differences. Equal distances only approximately match perception.
The a* and b* plane is a horizontal slice. The L* slider raises or lowers it.
Checkerboard means outside the sRGB gamut. L* runs from 0 to 100; the a* and b* axes show −128 to 128 here, not universal coordinate bounds.
This colour is inside sRGB: all three maps describe the same colour.
How the numbers connect: sRGB → linear RGB → XYZ → Lab
sRGB codes are not proportional to light. First decode them. A matrix then converts linear RGB to XYZ, common colour coordinates. Lab compares XYZ with a reference white and applies a nonlinear transform to the ratios. HSV comes directly from sRGB codes: V is the maximum, S is the relative spread and H follows the channel proportions.
- Unclipped sRGB
- Linear RGB
- XYZ (D65)
- Lab (D65)
This entire chain uses white D65, with white Y = 1. CSS lab() uses D50: comparing them requires chromatic adaptation. These values are not passed directly to CSS lab(). The real appearance also depends on the display and its colour profile.
Three checks on one colour
Select gray in the editor above: RGB components are equal, HSV has , and Lab a* and b* are close to zero. Move H while : the swatch stays unchanged. Hue therefore carries no information for gray.
Next compare pure red and green: both have V = 1 but different L*. V is the largest RGB component, not perceived lightness. Finally keep Lab L* fixed and vary a* and b*: you are changing colour coordinates. Outside the gamut, the marked screen swatch is a clipped approximation rather than the exact requested colour.
Average light or codes
The piecewise nonlinear sRGB function allocates more codes to dark levels. Code 0.5 represents about 0.214 linear light, so averaging codes darkens a black-white mixture relative to averaging light.
Physical mixing, blur and downsampling usually decode light, perform the operation and encode again. A creative tone edit may deliberately change codes, but solves a different problem.
Half the light is not half the code
Mix black and white equally, then red and green. Both methods use the same fractions.
Exact values are in the point inspector
RGB; display range 0…1
Exact values are in the point inspector
RGB; display range 0…1
Inspect the selected point
What the plot shows
Two results of the same mixture are marked on the curve. The code average and the encoded light average land at different points. Both axes keep the same 0 to 1 range.
- Decoding
- Code average (R): 0.5; 0.214
- Light average (R): 0.7354; 0.5
Code 0.5 is darker than the light average. This affects mixing, blur and resizing.
Parameters and details
Both images are displayed as sRGB. The second method decodes the piecewise sRGB function, mixes linear light and encodes again. Halfway between black and white is about 0.735 encoded, not 0.5. This is neither a website gamma setting nor a paint-mixing model.
Select an image point. Arrows move it; Home and End reach row edges. Viewing does not change the calculation.
Changing the example requires JavaScript and Canvas. Computed images remain available above.
HSV and perceptual differences
Reference and further methods
In HSV, hue H selects a colour family, saturation S describes departure from grey, and V is the largest RGB code. At all three channels agree: H no longer changes the result. These are convenient picker coordinates, not three independent kinds of light.
Keep V fixed and choose green, then blue. V stays numerically equal while green has greater luminance Y. A convenient colour-picker control is not necessarily a scale of equal perceived brightness.
Compare with neutral and find the boundary
Reference and further methods
The Lab slice above fixes lightness L* while two axes change colour: a* from green to red and b* from blue to yellow. Neutral greys lie near the centre. Lab is computed through XYZ relative to a reference white, D65 here.
Checkerboard means outside the sRGB gamut: that Lab colour needs a negative RGB channel or one greater than 1. Lab numbers remain intact, but the preview is limited to displayable colours. Changing coordinates does not enlarge the display gamut.
CIELAB and OKLab approximate visual differences using different scales and formulas. Lab ΔE76 is a useful estimate for small differences, not a universal measure of how any viewer distinguishes colours under any illumination.
Gamut, printing, HDR and spectra
Reference and further methods
Coordinate reference: XYZ defines standard tristimulus coordinates; xyY separates chromaticity xy from luminance Y. Video luma Y′ combines encoded components, so it differs from Y computed from linear RGB. An ICC profile links a device to a defined colour conversion.
The calculation uses a D65 white with . Its CIELAB is not adapted to D50 and is not a ready CSS lab() value. The slice boundary marks sRGB, not all physically possible colors. Gray has , so HSV hue H is undefined: a conventional value of 0° is shown here. No display calibration runs here.
Gamut limits representable colours; bit depth limits codes; dynamic range concerns bright-to-dark ratios. Clipping and gamut mapping lose different properties. CMYK depends on inks, paper and profile: 1−RGB does not calibrate a printer.
PQ/HLG define specific HDR signal and viewing rules; this sRGB preview does not become HDR. Different spectra can match under one lamp and diverge under another: metamerism. This explains why three channels do not determine a material's spectrum.
Practice
Test the idea under another condition. Follow the task above the images; point inspection helps explain the result. This exploration is not scored.
Choose colour by coordinate meaning
Without changing V, make the swatch gray using one control. Check that R, G and B are equal and H no longer changes its appearance. Set S = 1 and V = 1; compare red H = 0° with green H = 120°. Both have maximum code 1 but different L*. Explain why V cannot replace lightness. Then select an intermediate colour directly on the map and read its RGB and Lab.
Exact values are in the point inspector
RGB; display range 0…1
Exact values are in the point inspector
RGB; display range 0…1
Inspect the selected point
What the plot shows
H selects hue, S removes or restores chroma, and V sets the largest code. Equal V does not guarantee equal L*: they are different coordinates of one colour.
Parameters and details
Click the map: H increases rightward and S decreases downward; selection updates the controls and the swatch on the right. The right view is a uniform swatch of the exact chosen colour, not a pixelwise transform of the left image. HSV is defined over encoded sRGB. V is the largest code, not luminance Y; changing coordinates does not expand screen gamut.
Select an image point. Arrows move it; Home and End reach row edges. Viewing does not change the calculation.
Changing the example requires JavaScript and Canvas. Computed images remain available above.
Games
Test your explanation
Question 1 of 5
HSV saturation is zero. What happens when H changes?
Exact values are in the point inspector
RGB; display range 0…1
Exact values are in the point inspector
RGB; display range 0…1
Exact values are in the point inspector
RGB; display range 0…1
Choose one answer. It is checked immediately.
Limitations and references
Limits of this example
Live calculations use sRGB, HSV, relative XYZ D65, CIELAB D65 and OKLab. The slice is a small finite grid; explicit marking replaces out-of-gamut screen previews while numerical RGB stays unclipped. No ICC, D50 adaptation, CMYK conversion, HDR output, complete colour engine or display calibration.