Lesson 03 · Colour¶

The colour wheel¶

The colour wheel arranges colours in the order in which they mix. Every colour scheme is read off it.

                     RED
         RED-VIOLET       RED-ORANGE
    VIOLET                        ORANGE
  BLUE-VIOLET                YELLOW-ORANGE
    BLUE                           YELLOW
         BLUE-GREEN       YELLOW-GREEN
                    GREEN

Warm colours (red → yellow): advance towards the viewer, energy, urgency, appetite. Cool colours (green → violet): recede, calm, trust, professionalism, technology.

The colour schemes¶

HEX, RGB, HSL¶

The same colour, three ways of writing it.

HEX — for copying¶

#F97316 — six hexadecimal characters: two for red, two for green, two for blue, each from 00 to FF (0–255).

#F9 73 16
 │  │  │
 │  │  └── blue:  0x16 = 22
 │  └───── green: 0x73 = 115
 └──────── red:   0xF9 = 249

This is the format you copy between Figma, CSS and Canva. It is not useful for thinking.

RGB — how the screen works¶

rgb(249, 115, 22) — the same colour. Screens add light: red + green + blue at maximum give white. This is called additive mixing.

The variant with transparency: rgba(249, 115, 22, 0.5) — the last number is opacity, from 0 (invisible) to 1 (opaque).

HSL — for thinking¶

hsl(25, 95%, 53%) — three values that match the way people talk about colour:

In Figma, in the colour picker, the three-dot button lets you switch between HEX, RGB, HSL and CSS.

RGB vs. CMYK¶

This is the difference that ruins most printed posters.

The 60-30-10 rule¶

A balanced palette distributes colours in unequal proportions:

• 60% — the dominant colour. Usually a neutral: white, very light grey, or a very dark grey. This is the background.
• 30% — the secondary colour. Supports the structure: cards, bars, sections.
• 10% — the accent colour. Only for what must be pressed or noticed: the main button, a badge, an important number.

The structure of a complete palette¶

For a serious project you need more than three colours:

Contrast and accessibility¶

Roughly 1 in 12 men and 1 in 200 women have some form of colour blindness. Many more read on a phone, in sunlight, on a cheap screen. Contrast is not an aesthetic option.

The contrast ratio¶

It is measured as the ratio between the luminance of the text and that of the background, from 1:1 (identical) to 21:1 (black on white). The WCAG standard requires:

How to check¶

• In Figma: the free Contrast or Stark plugin. You select the text and it shows the ratio instantly.
• In the browser: WebAIM Contrast Checker — paste the two HEX codes and it gives you the verdict.

Colour cannot be the only information¶

If in a chart the "sold" line is green and "unsold" is red, a colour-blind reader sees two identical lines. Always add a second signal: a label, a different shape, a dashed line, an icon.

How to build a palette in Figma¶

1. Pick the primary colour. Do not invent it out of nowhere — start from something: the school colours, a photo you like, an existing logo.
2. Open coolors.co, lock the primary colour (the space key generates variants) and pick 2–4 more that work with it.
3. Generate the neutrals: take the primary, drop saturation to 5–10% and vary lightness from 98% to 10%. You will get greys that "have" your colour, not dead greys.
4. Check every text/background pair with the Contrast plugin.
5. Save them as styles in Figma: select an element with that colour, in the right panel under Fill click the four dots → + → give it a name.

How to name colours¶

The slash in the name automatically creates folders in Figma's style panel.

Colour psychology, briefly and with reservations¶

The associations are real, but cultural and contextual, not universal.

Exercises¶

Exercise 1 — The same colour in three systems¶

Take the colour #2563EB and write it in RGB and HSL. Then create a version 15% darker, using HSL.

Exercise 2 — A 60-30-10 palette¶

Build a palette for a computer science club poster: one primary, four neutrals and one accent. Apply it to an A4 frame in 60-30-10 proportions.

Exercise 3 — Fix three combinations¶

The following pairs fail the contrast test. Fix each one, keeping the hue (H) unchanged.

1. Text #FFD700 on background #FFFFFF
2. Text #FFFFFF on background #FB923C
3. Text #9CA3AF on background #F3F4F6

Mini-project: the same poster, three palettes¶

Take the mini-project from lesson 02 (the "movement" poster) and make three versions identical in form, different only in palette: one monochromatic, one complementary and one analogous. Check the contrast on each.

Summary¶

• The colour wheel gives the schemes: monochromatic, analogous, complementary, triadic, split-complementary.
• HEX for copying, RGB for screens, HSL for thinking and generating variants.
• RGB on screen, CMYK in print. High saturations do not print.
• 60-30-10: neutral dominant, structural secondary, rare accent.
• Do not use #000000 on #FFFFFF — it tires the eye.
• Minimum contrast 4.5:1 for normal text, 3:1 for large text (WCAG AA).
• Colour cannot be the only information — add a label, a shape or an icon.
• Name styles by role (brand/primary), not by appearance (Orange).
• The black and white test tells you whether the design survives without colour.

Next step: → Lesson 04: Typography