Skip to content
Study Hall
Lesson 2 of 7Graphic Design
Unit 1 · Lesson 2 of 7

Colour Theory and Typography

How colour is built, mixed and chosen — additive versus subtractive, hex and the colour wheel — and how to pick and set type that people can actually read.

5 min read11 practice questionsInteractiveAsk AI about this →

Key things to remember

  1. 1RGB is additive light for screens — all three channels at full gives white. CMYK is subtractive ink for print — no ink gives the paper's white.
  2. 2Hex is RGB in base 16: #FF8800 is red, green, blue.
  3. 3Colour schemes are defined by geometry on the wheel: analogous is adjacent, complementary is opposite, triadic is evenly spaced.
  4. 4Hue is the colour, saturation is its intensity, value is its lightness. Tint adds white, shade adds black.
  5. 5Kerning is between two specific letters; tracking is across a run; leading is between baselines.
  6. 6Body text wants 45–75 characters per line and leading of roughly 120–145% of the type size.
  7. 7Two typefaces are enough, and they should differ structurally rather than slightly.

Colour and type carry most of the meaning in a design, and both are governed by rules that are more technical than they look. Choosing a palette that works and type that reads is not a matter of taste; it is a matter of knowing how the colour models differ and what makes letterforms legible at a given size and distance.

Two colour models, for two different destinations

RGB — additive light (screens)All three at full → whiteNone → black. Wider gamut.CMYK — subtractive ink (print)All inks at full → muddy near-black,so a separate K ink is added. Narrower gamut.
Fig 1Additive light versus subtractive ink. Overlapping light gets brighter; overlapping ink gets darker.
ARGB — additive, for screens
  • Red, Green, Blue light added together
  • All three at full strength makes white
  • All three at zero makes black
  • Each channel 0–255, written as hex like #1E90FF
  • Wider gamut — screens show colours ink cannot
BCMYK — subtractive, for print
  • Cyan, Magenta, Yellow, Key (black) inks
  • All inks at full makes a muddy near-black
  • No ink leaves the white of the paper
  • Each channel as a percentage, 0–100%
  • Narrower gamut — bright screen colours dull on paper
Why your print came out dull
A vivid RGB orange or electric blue simply has no CMYK equivalent — it is out of gamut. Converting at the last minute means the printer picks the nearest available ink mix and the design loses its punch. If a piece is destined for print, work in CMYK from the beginning so you are never choosing colours you cannot have.

Hex notation is just RGB written in base 16. #FF8800 splits into FF red, 88 green, 00 blue — that is , and out of 255. Each pair of hex digits covers values, which is exactly one channel. A shorthand like #F80 expands by doubling each digit to #FF8800.

Loading interactive…
Mix in either model, watch the hex update, and generate a scheme off the wheel.

The colour wheel and colour schemes

12 huesMonochromaticone hue, varied tint and shadeAnalogousthree hues side by sideComplementarytwo hues directly oppositeSplit-complementarya hue + the two beside its oppositeTriadicthree hues evenly spacedEvery scheme is a geometric rule — that is all they are.
Fig 2Where each scheme sits on the wheel. The geometry is the whole rule.
SchemeWhere it sits on the wheelCharacter
MonochromaticOne hue, varied in tint and shadeCalm, unified, very safe — can be dull
AnalogousThree hues sitting next to each otherHarmonious and natural; low contrast
ComplementaryTwo hues directly oppositeMaximum contrast and energy; tiring in large areas
Split-complementaryOne hue plus the two beside its oppositeStrong contrast, easier to balance than straight complementary
TriadicThree hues evenly spacedVibrant and balanced; needs one dominant hue
  • Hue — the colour itself, its position on the wheel.
  • Saturation — how intense it is. Zero saturation is grey.
  • Value (or brightness) — how light or dark. A tint is a hue plus white; a shade is a hue plus black.
  • Warm hues (reds, oranges, yellows) advance and feel energetic; cool hues (blues, greens, violets) recede and feel calm.
The 60-30-10 rule
A reliable starting split for any palette: about 60% a dominant colour, 30% a secondary, 10% an accent reserved for the thing you most want noticed. It builds hierarchy into the palette itself, and it stops the accent colour from being spent on decoration.

Type: anatomy and classification

ascender linecap heightx-heightbaselinedescender lineHxpdx-heightA large x-height makes a face read bigger at the same point size — which is why two 11 pttypefaces can look nothing like the same size.
Fig 3The parts of a letterform. x-height is the measurement that most affects apparent size.
SerifHandglovesfinishing strokes on the stems — long body textSans serifHandglovesno finishing strokes — screens, signage, headlinesMonospaceHandglovesevery character the same width — code and dataDisplayHandglovesextreme forms — headlines only, never body textScript faces are the fifth family — joined, handwriting-like, and never used for body text.
Fig 4The five families you actually need to tell apart.
FamilyIdentified byTypical use
SerifSmall finishing strokes on the stemsLong body text, traditional and formal tone
Sans serifNo finishing strokes; even weightScreens, signage, headlines, modern tone
ScriptJoined, handwriting-like strokesInvitations and logos — never body text, never all caps
Display / decorativeDistinctive, often extreme formsHeadlines only, and only at large sizes
MonospaceEvery character the same widthCode, data, tabular figures

Setting type so people can read it

  • Kerning — the space between two specific characters. You kern a headline; you do not kern a paragraph.
  • Tracking — the space applied evenly across a run of text. Loosening tracking slightly can rescue a cramped headline in all caps.
  • Leading — the vertical space between baselines, said as 'ledding'. A good starting point for body text is about 120–145% of the type size.
  • Line length — aim for roughly 45–75 characters per line. Longer and the reader loses their place returning to the left margin.
  • x-height — the height of a lowercase x. A large x-height reads bigger at the same point size, which matters at small sizes.
Two typefaces, and make them differ
One typeface for headings and one for body text is enough for almost any piece. If you pair two, make them obviously different — a sans heading with a serif body works, because the difference is structural. Two similar sans serifs together just look like a file-handling error.
Things that destroy legibility
Long passages in ALL CAPS (the word shapes disappear, so reading slows), script faces at body size, light grey text on white, type over a busy photo without a scrim behind it, and centring more than a few lines at a time. Each is a common beginner choice and each costs readers.

Worked examples

Reveal one step at a time and try to beat it to the next line.

Example 1
Convert the hex colour #3CB371 to its RGB values.
Example 2
A club is designing a printed banner. The brand colour is a vivid RGB cyan, #00E5FF. Explain what will happen at the printer and what to do about it.
Example 3
Body text is set in 11 pt type. What leading should you use, and roughly how wide should the column be?

Where marks get lost

  • Designing in RGB and converting to CMYK at the end, so the vivid colours chosen on screen cannot be printed.
  • Reading a hex code as decimal. In #40C0FF the first pair is , not forty — each pair is base 16.
  • Confusing kerning with tracking. Kerning adjusts one specific pair of letters; tracking adjusts a whole run evenly.
  • Setting body text in all caps or in a script face, both of which erase the word shapes readers rely on.
  • Leaving default leading on a long measure, so lines sit too tight and the eye jumps to the wrong one on return.
  • Pairing two typefaces that are almost the same. If the difference is not obvious, it reads as an accident.
  • Spending the accent colour on decoration, so it is no longer available to mark the one thing that matters.

Flashcards 12

Additive colour (RGB)
Subtractive colour (CMYK)
Gamut
Hex colour
+ 8 more

Practice

1
In the RGB colour model, what colour results from red, green and blue all at full strength?
2
What is the red channel value, in decimal (0–255), of the hex colour #40C0FF?
3
What word describes the range of colours a device or printing process is able to reproduce?
4
Which colour scheme uses two hues directly opposite one another on the colour wheel?
5
A designer adjusts the space between the 'A' and the 'V' in a large headline. What is this called?
6
Body text is set at 12 pt with leading at 130% of the type size. What is the leading in points?
pt
7
Why is a long passage of ALL CAPS harder to read than mixed case?
8
Match each term to its definition.
Hue
Saturation
Value
Tint
9
Order these typeface families from most suitable to least suitable for a long passage of body text.
  1. 1A clean sans serif
  2. 2A script face
  3. 3A display face
  4. 4A serif with a large x-height
10
Roughly how many characters per line should a body-text column hold for comfortable reading?
11
Following the 60-30-10 rule, what should the 10% accent colour be used for?

Spot a mistake on this page? Let us know