Colour
The vocabulary of colour
Colour theory in plain words: hue, saturation and value, the colour harmonies, how screens and print mix colour, and how colourists correct and grade footage. Press a term to see it on the colour wheel and a small poster, then drag the wheel to try it with other colours. For more grading looks, see Film shots.
Blue
#2A48DF
#DF852A
Each button shows one term on the colour wheel and on a small poster. Drag the wheel or the base hue to try the same idea with other colours.
Properties of colour
The axes every colour sits on. Drag along the strip to move along each one.
Colour harmonies
Schemes picked by position on the colour wheel. Drag the wheel and the scheme follows.
Colour models
How colours are mixed and written down, for paint, screens and print.
Using colour
Putting a palette to work in a design.
Colour in video
Correcting and grading footage. For more grading looks, see Film shots.
All terms
Properties of colour
- Huealso: colour family
- Which colour it is: red, orange, blue. Hue is the position round the colour wheel, measured in degrees. Drag along the strip: only the hue changes.
- Saturationalso: intensity, purity
- How pure a colour is, from grey at 0% to the most vivid version of the hue at 100%. Low saturation reads calm and grown-up; high saturation shouts.
- Valuealso: lightness, brightness
- How light or dark a colour is, from black to white. Painters say value; HSL says lightness. Value does most of the work: a design that reads in black and white will read in colour.
- Chromaalso: colourfulness
- How far a colour is from a grey of the same lightness. Like saturation, but on a perceptual scale (OKLCH here), so the colour fills in without getting lighter or darker. Some hues reach far more chroma than others.
- Tintalso: tints and shades, pastel
- A colour mixed with white. Tints are lighter and softer; pastels are tints. Good for backgrounds and large areas.
- Shade
- A colour mixed with black. Shades are darker and heavier: navy is a shade of blue, maroon a shade of red. Good for text, depth and shadows.
- Tonealso: muted colour
- A colour mixed with grey. Tones are muted and dusty, quieter than the pure hue. Most colours in nature, and in calm brands, are tones.
- Warm and cool coloursalso: colour temperature, warm colours, cool colours
- Reds, oranges and yellows feel warm; greens, blues and violets feel cool. Warm colours tend to come forward and feel energetic, cool ones recede and feel calm. Drag the hue across the line.
Colour harmonies
- Colour harmonyalso: colour scheme, colour combinations
- Colours that look like they belong together. The schemes below are recipes for it, each picking colours by their position on the wheel. Compare with colours picked at random.
- Complementary coloursalso: complements, opposite colours
- Two colours opposite each other on the wheel: the strongest contrast of hue there is. Let one lead and use the other sparingly, to make one thing pop.
- Analogous colours
- Neighbours on the wheel, usually three in a row. Calm and natural, like a sunset or a forest. Let one lead, and vary lightness so it doesn't go flat.
- Triadic coloursalso: triad
- Three colours evenly spaced, 120° apart, like the three primaries. Bright and balanced, even when muted. Let one dominate and use the other two as accents.
- Split complementaryalso: split complement
- A colour plus the two neighbours of its complement. Nearly the punch of a complementary pair with less tension, which makes it hard to get wrong.
- Tetradic coloursalso: rectangle, double complementary
- Two complementary pairs, making a rectangle on the wheel. Rich and varied; it works best with one colour in charge and the rest in small doses.
- Square colour schemealso: square harmony
- Four colours evenly spaced, 90° apart. The most varied scheme of all: balance it with plenty of neutral space.
- Monochromatic coloursalso: monochrome, tonal palette
- One hue in different tints, shades and tones. Always coherent and quietly elegant; it relies on contrast in lightness, since the hue never changes.
Colour models
- Colour wheelalso: color wheel, colour circle
- The hues arranged in a circle, so related colours sit side by side and opposites face each other. Painters use the RYB wheel (red, yellow, blue); screens use RGB. Switch with the RYB/RGB button.
- Primary coloursalso: primaries
- The colours you mix all the others from. Red, yellow and blue for paint (RYB); red, green and blue for light on a screen (RGB); cyan, magenta and yellow for print.
- Secondary colours
- Two primaries mixed. Orange, green and violet on the painter's wheel; on an RGB screen, cyan, magenta and yellow.
- Tertiary coloursalso: intermediate colours
- A primary mixed with the secondary next to it, like red-orange or blue-green. Together with the primaries and secondaries they make the 12-step wheel.
- RGBalso: additive colour
- Red, green and blue light added together, as on every screen. All three at full make white, none makes black. Each channel runs from 0 to 255.
- CMYKalso: subtractive colour, process colour
- Cyan, magenta, yellow and black ink, as used in print. Inks take light away from white paper; K adds a true black, since the three together make a muddy brown. Some bright screen colours can't be printed.
- Hue, saturation, valuealso: HSV, HSB, HSL
- A colour described the way people think about it: which hue, how vivid, how light. Colour pickers use it (HSB, or HSL in CSS) because it's easier to adjust than RGB numbers.
- Hex codealso: hex colour, HTML colour code
- An RGB colour written as six hexadecimal digits, two each for red, green and blue, from 00 to FF. #FFFFFF is white and #000000 black. The usual way to pass a colour around on the web.
Using colour
- Colour palettealso: colour scheme
- The handful of colours a design uses, each with a job: a main colour, a supporting one, an accent, and light and dark neutrals for backgrounds and text.
- 60-30-10 rule
- A rule of thumb for proportion: 60% a dominant colour (often a neutral), 30% a secondary colour, 10% an accent. It stops a palette fighting itself. Compare with equal amounts of each.
- Contrastalso: colour contrast, contrast ratio
- The difference between two colours, mostly in lightness. Text needs it to be read: WCAG asks for a contrast ratio of at least 4.5:1 for body text and 3:1 for large text. Drag the text colour.
- Accent colour
- One strong colour used sparingly, for the thing you want seen first: the button, the price, the key word. It only works if little else competes with it.
- Neutralsalso: neutral colours
- Whites, greys, blacks and beiges, with little or no saturation. They do most of the work in a palette and let the real colours breathe. Tinting them slightly toward the main hue makes them belong.
- Simultaneous contrast
- A colour looks different depending on what surrounds it. The two small squares are the same grey, yet each takes on a hint of the opposite of its background. Join them to check.
- Colour psychologyalso: colour meaning
- The feelings colours tend to suggest, like calm blues or urgent reds. The associations are real but loose: they shift with culture, context and shade, so treat them as a starting point, not a rule.
Colour in video
- White balancealso: WB, colour temperature in kelvin
- Telling the camera what white looks like under the light, in kelvin: daylight is about 5600 K, tungsten bulbs about 3200 K. Set it lower than the light and the picture goes blue; higher, and it goes orange.
- Colour castalso: tint
- An unwanted tint over the whole picture, from fluorescent tubes, mixed light or the wrong white balance. On the vectorscope the white card leaves the centre; corrected, it sits back on it.
- Colour correctionalso: colour balancing
- Fixing the picture before styling it: whites neutral, exposure and contrast right, shots that match each other. The first pass of a grade. Before on the left, after on the right.
- Colour gradingalso: color grading, grade
- Giving corrected footage a look: tinting shadows and highlights, shaping contrast, pulling some colours back. Colourists push the lift, gamma and gain wheels. Ungraded on the left.
- Teal and orangealso: orange and teal
- The blockbuster look: shadows and backgrounds pushed toward teal, skin kept warm. Orange and teal are near complements, so faces jump off the background. Ungraded on the left.
- Split toningalso: split tone
- One colour in the highlights and another in the shadows, often complements. Drag the wheel to pick the highlight colour; the shadows take its opposite.
- LUTalso: lookup table, 3D LUT
- A lookup table: a file that maps every input colour to an output colour, so a look can be saved and applied in one step. Used to convert log footage, and to share a grade between apps and the set.
- Vectorscopealso: scope, skin tone line
- A scope that plots every pixel by hue (the angle) and saturation (the distance from the centre). The diagonal is the skin tone line: faces of every complexion fall near it when the colour is right.