Charts · 01

The family tree of colour spaces

25 ways of writing a colour down as numbers, 1905 to 2022, in 6 lanes by purpose. Solid lines are derivations, dotted lines are influence. The ramps in the side panel are drawn with the real CSS colour functions, so what you see is the space itself.

The family tree of colour spaces, 1900 to todayA timeline of colour spaces grouped by purpose, with lines showing which spaces are derived from or influenced by which.1900191019201930194019501960197019801990200020102020PerceptualAppearance modelsDisplay and deviceBroadcast and videoHue, saturation, lightnessPrint and pigmentMunsell1905CIE XYZ1931CIELAB1976CIELUV1976LCH1976IPT1998Jzazbz2017Oklab2020OKLCH2020CIE RGB1931sRGB1996Adobe RGB1998DCI-P3 / Display P32007CSS Color 42022YIQ1953YUV / YCbCr1982Rec. 7091990Rec. 20202012ICtCp2016HSL and HSV1978HSLuv2012Okhsl and Okhsv2021CIECAM022002CAM16 and CAM16-UCS2017CMYK1906

Notes

Dates are the year of the defining paper or standard. CIE RGB and XYZ share 1931 because XYZ is a linear transform of the matching experiments published that year. HSL and HSV are dated to the 1978 papers by Alvy Ray Smith and by Joblove and Greenberg. Display P3 is dated to DCI-P3 (2007); Apple shipped the Display variant in 2015. CSS Color Level 4 is dated to the year all three engines shipped lab(), lch(), oklab() and oklch().

Sources: CIE publications 15:2004 and 159:2004; Ottosson, A perceptual color space for image processing (2020); Ebner and Fairchild, Development and testing of a color space (IPT) (1998); Li et al., Comprehensive color solutions: CAM16, CAT16 and CAM16-UCS (2017); ITU-R BT.709, BT.2020, BT.2100; IEC 61966-2-1 (sRGB); W3C CSS Color Module Level 4.

Part of a series of information-design pieces on the things design engineers work with. Built with SVG, React and CSS Color 4. Gamut is the tool that made me want to draw this.