Colour Theory in Practice

Harmony, contrast, meaning and building a usable palette.

Video tutorialTrack course · Envato Tuts+

Graphic Design Full Course for Beginners

Speed

0.75x1x1.25x1.5x2x

Skip intro Next lesson

Watch 00:00 · 2 checkpoints Watch on YouTube More on this topic

Transcript & captions .txt

11/11

1. 00:00Colour Theory in Practice. Harmony, contrast, meaning and building a usable palette.
2. 00:05Colour is emotion plus function.
3. 00:10It signals brand, directs attention and encodes state — and it must survive accessibility requirements while doing all of it.
4. 00:18Reference table: Scheme, Recipe, Character.
5. 00:2360-30-10 rule: 60% dominant/neutral, 30% secondary, 10% accent.
6. 00:28Value beats hue: if the design fails in greyscale, the hues won't save it.
7. 00:33Contrast: body text needs 4.5:1 against its background; large text 3:1.
8. 00:38Never rely on colour alone to convey meaning — add an icon or label.
9. 00:43Build tokens: background, surface, foreground, muted, primary, accent, destructive.
10. 00:4860-30-10 in action — edit the sample and run it in the browser.
11. 00:53Note: Design in greyscale first, then add colour last. It forces hierarchy to come from value and layout rather than saturation.

Colour is emotion plus function. It signals brand, directs attention and encodes state — and it must survive accessibility requirements while doing all of it.

• 60-30-10 rule: 60% dominant/neutral, 30% secondary, 10% accent.
• Value beats hue: if the design fails in greyscale, the hues won't save it.
• Contrast: body text needs 4.5:1 against its background; large text 3:1.
• Never rely on colour alone to convey meaning — add an icon or label.
• Build tokens: background, surface, foreground, muted, primary, accent, destructive.