How colour works

1.What a colour is made of

The course names three attributes, in the order you notice them. Hue is where the colour sits on the wheel: red, orange, blue. The lecturer calls it probably the most powerful and the most visible. Value is how light or dark it is, from 100% of the colour down to 0%. It works the same way for every hue and is easiest to see with the colour taken away, in greyscale. Saturation is perhaps the hardest to grasp: hold the hue and the value still and move from pretty much a grey with no colour in there to a pure colour.

Each row moves one attribute and holds the other two, in HSL, the model the course means when it tells you to open a picker, set it to HSL and pull the sliders around and really see what happens. Do that once with a real picker. It teaches more than any definition.

The tools on this site use other words for the same three things, because they measure them. Here is the translation, used in every chapter that follows.

The course also names three ways of responding to a colour. The emotional response is our primary response: blues and greens calm, red is blood and danger. The subjective one, your favourite colour, ultimately doesn't matter. The technical one, which colours go with which and at what contrast, is where a designer works, and it is what this guide is about.

From the course: the three attributes, the three responses and the slider exercise (CalArts, Fundamentals of Graphic Design, week 3). General practice: the measurement words L*, OKLCH, chroma and tone.

2.Value carries structure, hue carries mood

This is the hinge of the guide, and three separate sources arrive at it. The course makes depth with tone: the shape with the most contrast to the ground reads as nearest, and shapes close to the ground in tone recede. Refactoring UI says to hold the colour back until the hierarchy works in greys. The accessibility guidance says colour must never carry meaning alone. A palette whose structure lives in its hues fails all three at once.

The test is cheap. Take the colours, remove the hue, and look at what is left. The greyscale here keeps each colour's luminance, so each grey has the same L* as the colour it replaces. If two things that must look different now look the same, the difference was only ever hue.

The first palette is built on value: a pale ground, a darker surface, a mid tone for quiet text, a near-black ink and one accent. In grey it keeps its order. The second is five cheerful hues picked for mood, all near the same value. In grey it is one flat stripe, and a chart or a set of status labels drawn in it falls apart for anyone who cannot see the hues, and on every black and white printer.

Hue is not unimportant. It carries the mood that the course's interface lecture is about: black and white reads as serious, yellow and black as danger, browns and greens from nature as calm. That is a lot of work. It just cannot also hold the structure. Squint at a screen until the colour goes; the order that remains is the value order, and it should be the order you meant. The course's own warning applies to every judgement here: we really do perceive it contextually, one thing against another. The same grey looks darker on a light ground than on a dark one.

From the course: depth made with tone, contextual perception (Fundamentals, week 3); colour as mood (Visual Elements of User Interface Design, week 2). General practice: the greyscale gate (Wathan and Schoger, Refactoring UI); never colour alone (WCAG 1.4.1). The merge rule in the example (ΔL* under 6 with ΔE2000 over 15) is the course folder's checker.

3.Why HSL lightness lies

Every colour in this table has an HSL lightness of 50%. HSL says they are equally light. Your eye disagrees, and so does every perceptual measure.

L* is CIE lightness (1976), built to follow how light a colour looks to a person: 0 is black, 100 is white, and equal steps look roughly equal. OKLCH L is the same idea from 2020 (Björn Ottosson's OKLab), better behaved in the blues. The two agree on the order. HSL agrees with neither, because its lightness is only the average of the brightest and dimmest of the red, green and blue channels. It knows nothing about the eye, which is far more sensitive to green light than to blue.

The gap is large. Yellow at HSL 50% has an L* of 97; blue at HSL 50% has 32. That is 65 L* apart under one label, the distance between a pale cream and a dark slate. This is why a row of HSL-50 buttons in different hues never looks like a set, and why a ramp built by stepping HSL lightness gives a yellow middle step too light to hold white text and a blue one that is nearly dark enough for body copy.

The course folder's central drill, D02, the value sort, is built on this table: six saturated colours to rank from light to dark, committed before the key, and a key that prints HSL lightness beside L* so you can see where the slider lies. The drill notes say most people miss in one direction, reading warm saturated colours as lighter and cool ones as darker than they are. Blue is the hard case: bright and dark at once, which the eye calls deep, and deep is not a value word.

What to do with this: think in HSL, judge in L*. Refactoring UI's argument for HSL still stands, since two shades of one hue look unrelated as hex and obviously related as HSL. But when the question is which is lighter, read L* or OKLCH L. The picker shows all three side by side.

From the course: value as the second attribute, easiest seen as greyscale. From the course folder: drill D02 and the direction of the usual misses. General practice: CIE L*, OKLab (Ottosson, 2020), HSL as a model, and Refactoring UI's case for HSL over hex.

4.Ramps: four systems reconciled

A ramp is one colour in steps from nearly white to nearly black, so that a design has a tint for a background, a base for a button and a shade for text, all visibly related. The rows below are the four ten-step blues the course folder uses as reference plates, and a fifth computed live from Material 3. Under each is the audit the folder's checker runs: hue drift, where chroma peaks, and which steps can carry body text on white.

If you have not yet done the plate attribution drill in the colour training folder, do it before reading on. This chapter names which system each plate is.

Material 2014 is the palette Google published with the first Material Design. What it holds constant is a name: 500 is the brand colour, and the nine other steps were chosen by eye around it. Chroma peaks at the 500, and the hue rotates about 17 degrees toward cyan as the colour lightens, the technique Refactoring UI later wrote down. The steps are uneven, with the big jumps at the dark end.

Tailwind (plate B is version 3, blue-50 to blue-900) holds the numbering: every hue has the same steps, so a layout can swap blue-700 for red-700 and stay roughly in balance. Its chroma peaks late, at 700, and the darkest steps drop chroma and go navy. Version 4 redefined the palette in OKLCH, and this site's tonal generator uses its lightness ladder as the default for OKLCH ramps.

Naive HSL holds everything a slider can hold: hue 215, saturation 85, lightness stepped evenly from 95 to 14. It is the only ramp the audit calls even and held, and the only one with no decisions in it. The light end goes chalky and the dark end muddy, because a fixed saturation reads as washed out once lightness leaves the middle.

Hand-tuned, built for the course folder, holds the hue to within about 7 degrees and keeps chroma deliberately low at both ends, so the tints read as paper and the shades as ink. Its widest steps are at the dark end, which puts five steps past 4.5:1 on white, as many as the naive ramp and more than either published one.

Material 3 does not choose steps by eye at all. It holds hue and chroma constant in HCT, Google's colour space built on the CAM16 appearance model, and steps the third number, tone, which is defined as L*. Tone 40 has an L* of 40 in any hue, the property HSL lightness lacks, and that lets Material promise contrast by arithmetic: its documentation states that tones 50 apart reach at least 4.5:1. Where the screen cannot show the requested chroma at a tone, the chroma is cut and the hue kept. The M3 row above is seeded with Material 2014's Blue 500, so the old hand-picked ramp and the computed one can be compared directly.

They are not rivals. The hand-made ramps (2014, Tailwind, hand-tuned) bend the hue and put the chroma peak where a designer wanted it. The computed ones (naive HSL, M3) hold something constant and let the rest follow, and M3 is that approach done well, because what it holds constant is perceptual. Use M3 when a whole scheme has to come from one seed and pass contrast by construction. Hand-tune in OKLCH when the ramp is the brand and the drift and the chroma curve should be yours.

From the course folder: the four plates and their audit. General practice: Material Design 2014 and Material 3 (HCT, tones, the tone-gap rule), Tailwind CSS, Refactoring UI (hue rotation toward yellow, cyan or magenta to lighten, nine shades). The course itself teaches tints but no ramp system.

5.60/30/10 and roles

The Google UX course gives the proportion rule as 60-30-10: 60% of the screen a neutral, 30% a complementary colour, 10% an accent. Its worked example is white, grey and one orange, #FA7B17. Malewicz gives the same split as background, text and accent. Read the numbers as a warning about proportion rather than a recipe: most of the screen is quiet, and the colour that means press here is rare, because it is rare.

A palette becomes usable once each colour has a job. This site gives palettes six roles:

• bg, the page ground, most of the 60.
• surface, cards, panels and anything raised off the ground.
• text, the reading colour.
• muted, secondary text, captions and icons.
• accent, the one colour that means act.
• border, dividers and outlines, drawn quiet.

That is the course's example given roles; the greys are our choice, since the course names only grey. Now check it. Text on the ground is 16:1, far past 4.5. The orange on white is 2.7:1, which fails even the 3:1 for large text and controls. The course's accent can be a button fill with dark text on it (6:1), but it cannot be a link colour on white. The proportion rule does not check contrast for you.

The course's interface lecture explains why the accent has to stay rare. Colour works as a system of differences and similarities. One green button among blue ones reads as active; three hues read as three functions; one hue from light to dark reads as the same action at different strengths. A single button can say three things by colour alone: passive, active on hover, activated once pressed. Put the accent on three kinds of element and it stops meaning anything.

From the course: 60-30-10 and the white, grey and orange example (Google UX Design, course 5); difference and similarity, state by colour (Visual Elements, week 2). General practice: Malewicz's 60 background, 30 text, 10 accent; the six role names are this site's own, close to the surface and on-colour roles of Material 3.

6.Contrast and the three kinds of colour vision

WCAG 2 compares the relative luminance of two colours as a ratio from 1:1 to 21:1. Body text needs 4.5:1; large text (24px, or about 19px bold) and the parts of an interface need 3:1.

APCA, the method drafted for WCAG 3, gives a lightness contrast, Lc, that depends on which colour is the text and which the ground, and treats dark-on-light and light-on-dark differently. Lc 75 is the usual floor for body text and Lc 60 for larger text; this site shows both numbers, because WCAG 2 is the one audits still use.

The two methods can disagree, and the course has a case in point. It observes that on a 50% grey ground black and white are exactly the same distance from the background tone, yet on a screen the white has more contrast. WCAG 2 says the opposite: black on #808080 is 5.3:1 and white on it is 4.0:1. APCA sides with the course: Lc 37 for the black and Lc 72 for the white (APCA gives light-on-dark a minus sign; the size is what matters). Look at it on your own screen before deciding who is right.

The Google course lists three kinds of colour blindness: red-green, blue-yellow and total. Red-green comes in two forms, protan (the red-sensitive cones missing) and deutan (the green-sensitive cones missing), and deutan is the common one. Blue-yellow is tritan, and rare. Total is the greyscale of chapter 2. This site simulates the first three with the matrices of Machado, Oliveira and Fernandes (2009) at full severity.

Each row is a pair from the course's list of pairs that are often hard to tell apart, shown normally and under each simulation, with the ΔE2000 distance between the two colours. Under 8 the pair is marked as collapsing. The error red and success green of a typical interface are 66 apart for normal vision and 5 under deutan, and their WCAG contrast with each other is only 1.2:1, so there is no difference in value to fall back on.

The course's advice is the fix: That doesn't mean you need to avoid red, brown, blue, and gray altogether, but never let the pair carry the meaning alone. Add a second channel: an icon, a label, a pattern or a difference in value. Value is the one that costs nothing, which is why a palette that passes the greyscale test usually survives colour blindness too.

From the course: the three kinds, the list of hard pairs, icons and patterns as well as colour (Google UX Design, course 5); screen white shining (Fundamentals, week 3). General practice: WCAG 2 ratios, APCA (0.1.9 constants), Machado et al. 2009, ΔE2000. The collapse threshold of 8 is the course folder's checker, not a standard. The CalArts lectures give no contrast ratio and no colour-blindness guidance.

7.Temperature and the painter's wheel versus the screen wheel

The course's wheel is the spectrum bent into a circle. Neighbours are analogous. Opposites are complementary, and combined effectively would almost cancel each other out, the way black and white mix to grey. Its primaries are the painter's: red, yellow and blue, because instead of green we now have yellow. The course teaches no other scheme names; split-complementary, triadic and the rest are general practice.

Screens use a different wheel. HSL and every screen picker put red, green and blue at 0, 120 and 240 degrees, so the opposite of red is cyan. The painter's wheel puts red, yellow and blue a third of the way round from each other, so the opposite of red is green. Each is right about its own medium, and the course folder's rule is short: when you name a complement, say which wheel.

The third answer is the perceptual one. Turning the OKLCH hue by 180 degrees at the same lightness and chroma gives a darker teal, because it keeps red's lightness and red is much darker than cyan (chapter 3). The colour pages show harmonies on the OKLCH wheel and the painter's wheel side by side. Notice too how the two rows differ: the painter's wheel spends a third of its circle between red and yellow, where the screen wheel spends a sixth.

Temperature is the other thing the wheel tells you. Warm runs from the magenta-reds through orange to yellow; cool runs from yellow-green through blue and violet to magenta. The tools here draw the line at HSL 330 and 90 degrees. The yellow-green edge is a judgement, and colours with almost no chroma are neutral, or neutral with a lean. The course uses temperature for pairing, cool with cool and warm with warm, or opposite sides for much more contrasting pairs. Where it matters most is the greys: a grey tinted toward the accent's side holds a palette together, and a warm grey under a cool accent makes the accent stand forward.

From the course: the wheel, analogous and complementary, the painter's primaries, pairing by temperature (Fundamentals, week 3). From the course folder: say which wheel; the warm grey under a cool accent. General practice: the HSL wheel, the warm and cool boundary at 330 and 90 degrees, and the painter's wheel mapping used here, which is an Itten-style approximation.

8.Screen versus print: sRGB, P3, CMYK

The course draws the line in one sentence: on screen, light shines through; on paper, light bounces back through the ink. RGB is additive. Start from black, add light, and all three at full make white; red and green make yellow. Pigment and CMYK are subtractive. Every ink takes light away, and cyan, magenta and yellow together should make black, but you can never really get a true dark rich black, which is why there is a fourth plate, K. K normally stands for key, the plate that prints the detail and holds the other colours in register.

sRGB is the colour space of the web. Every hex on this site is an sRGB colour, and it is what a CSS colour means unless it says otherwise. Display P3 is the wider space of recent Apple screens and most good phones, reaching further into saturated greens, reds and oranges. CSS can ask for it with color(display-p3 ...) or oklch(), and the picker marks a colour that falls outside sRGB.

The P3 green primary has no sRGB equivalent. The swatch above is the nearest sRGB colour at the same OKLCH lightness and hue, with its chroma cut from 0.37 to 0.26. On a P3 screen the difference is visible; on an sRGB screen nothing can show it, which is why this site stores the clipped hex and says so.

The CMYK numbers on this site are the textbook conversion, which knows nothing about ink, paper or press. Pure screen blue converts to 100 cyan and 100 magenta, and on paper those two make, in the course's words, a purple like red plus blue, not the electric blue of the screen. A real conversion goes through an ICC profile for the paper and the press, and the only real test is a printed proof.

Spot colour is the course's last word on print: a specific mixed ink run as its own plate, for a colour the four process inks cannot reach, bright orange, fluorescent, metallic. Pantone is the best-known spot system, and RAL is its counterpart for paint and industry. Their official values are licensed and their references are physical, printed or painted samples, so any hex for a Pantone or RAL number is an approximation, and so is any match the other way. Those references arrive here in phase 2, labelled nearest, approximate wherever they appear. They are there to get you to the right page of the swatch book; the book, in daylight, decides.

From the course: additive and subtractive mixing, pigment primaries, K for key (and the not to be confused with blue story, which the lecturer thinks is rather a myth), spot colour (Fundamentals, week 3). General practice: sRGB, Display P3, CSS colour syntax, ICC profiles, Pantone and RAL licensing.