Color and design
Design starts here with colour: how the eye turns light into colour, how a screen writes it as three numbers, and how to check that text stays readable.
Seven units on one colour solid
The subject has one course for now, Color theory, in seven units. The first explains how we see colour, the next two cover RGB with hex codes and then hue, saturation and lightness, the fourth builds colour harmonies, the fifth compares mixing light with mixing ink, and the last two turn to contrast and to using colour in a real design. Most units share one model you can turn with the mouse: an RGB cube of 512 small blocks, or the same colours rearranged into an HSL cylinder. Click a point and the panel below gives its hex code, its HSL values, its harmony colours and its contrast ratio against a background you choose.
Cones, prisms and the RGB cube
A red apple contains no red. It absorbs the short and middle wavelengths of sunlight and sends the long ones back. The retina has about 6 million cones of three kinds, and colour appears when the brain compares them, which is why pure yellow light and red plus green light can look identical. Newton split sunlight with prisms in the 1660s and drew one of the first colour circles in Opticks in 1704. On the web each channel runs from 0 to 255, so rgb(0 0 0) is black and rgb(255 255 255) is white. A hex code is three pairs of base 16 digits: in #2273c3 the pair c3 means 12 × 16 + 3 = 195.
Angles on the hue circle
HSL places hue as an angle, with 0deg red, 120deg green and 240deg blue. At 0% saturation the hue has no effect, and 50% lightness gives the most vivid version of a hue. The course is frank about the limit: yellow and blue at the same 50% lightness have luminances of 0.9278 and 0.0722. Once colours sit on the circle, a harmony is a set of angles. Complementary hues are 180 degrees apart, a triad is three hues 120 degrees apart, and a split complementary scheme uses 150 and 210 degrees. The unit warns that the light wheel puts blue opposite yellow, while the painter’s wheel puts blue opposite orange. Inks work the other way from light: cyan removes red, magenta removes green, yellow removes blue, and printers add black because real inks give a muddy brown.
The ratio that decides readability
Readable text is measured, not judged by eye. WCAG relative luminance weights the linearised channels as 0.2126 red, 0.7152 green and 0.0722 blue, and the contrast ratio is (L1 + 0.05) / (L2 + 0.05), running from 1:1 to 21:1. Level AA asks for 4.5:1 for body text and 3:1 for large text and interface parts; AAA asks for 7:1. Grey #767676 on white reaches 4.54:1 and passes, while red #ff0000 reaches 4.00:1 and fails for body text. The last unit adds WCAG 1.4.1: colour must never be the only way to convey information, since red and green colour vision deficiency affects about 8% of males. Plan lightness steps first and hues second; the brand orange and its blue complement in the model reach only 1.06:1.
Questions about this subject
What do the numbers in an RGB colour mean?
They set the red, green and blue channels, each usually ranging from zero to 255 in web code. Zero switches a channel off and 255 sets it fully on, so all-zero channels make black and all-255 channels make white. A hex colour records those same three channels as three pairs of base-sixteen digits rather than using a different set of colours. Color theory
Why can two HSL colours with the same lightness look different in brightness?
HSL lightness is a coordinate in a colour model, not a direct measure of perceived brightness. Fully saturated yellow and blue both have lightness fifty percent, yet yellow looks far lighter. The WCAG relative-luminance values are 0.9278 and 0.0722 respectively, so matching the HSL number alone cannot establish that text and its background have adequate contrast. Color theory
Why does changing hue do nothing at zero saturation?
At zero saturation the colour lies on the grey axis of the HSL model. Hue no longer affects it, so red-angle and cyan-angle settings at fifty percent lightness produce the same grey. Lightness still matters: zero percent makes black and one hundred percent makes white, regardless of the hue angle chosen on the colour wheel. Color theory
Why do printers add black ink instead of mixing only three colours?
Real cyan, magenta and yellow inks are imperfect filters, so combining them can produce a muddy dark brown rather than clean black. Printing three layers merely for black text is also slow and wet. CMYK therefore adds a separate black ink, while the behaviour of real paint is more complicated still because pigments scatter as well as absorb light. Color theory
What contrast ratio does normal text need for WCAG AA?
Normal text needs at least 4.5:1, while qualifying large text needs 3:1. The ratio compares the relative luminances of foreground and background, not simply their hue differences. Red #ff0000 on white gives 4.00:1, so it can pass the large-text threshold while failing the normal-text requirement, despite appearing like a strong and vivid colour choice. Color theory