DesignBeginnerPreview
Colour Theory & Application for Designers
A practical, system-first course on choosing and applying colour across brand, UI, and print. You build palettes that are legible, on-brand, and culturally aware, then prove they work with measurable contrast and reproduction checks.
For new and self-taught designers who can use design tools but want a reliable, evidence-based way to choose and apply colour.
Course content
Workbook & downloads
Put the course into practice — a printable workbook plus editable templates you can fill in and reuse.
Preview the workbook
This workbook turns the course into a finished deliverable: a named, accessible, culturally considered brand palette you can defend. Work through one section per module, fill the worksheets with real values for a project of your choice, and use the templates to capture your stepped scale, contrast results, and final colour specification in one place.
How Colour Actually Works
Lock in the foundations by naming colour systems and measuring colours with the three dials instead of with names.
Exercise: Name the System Walk
Find five real colours around you (a screen colour, a printed package, a painted surface, a fabric, a sign). For each, identify the colour system and whether it builds colour by adding light or adding pigment. The goal is to make naming the system automatic.
- Which two of your five examples are additive (RGB, light-emitting) and which are subtractive (CMYK or pigment, light-reflecting)?
- Pick the brightest screen colour you found. Do you expect it to survive a print run intact, and why or why not?
- For one colour, write the single sentence that predicts its behaviour: does it start from black and add light, or start from white and add ink?
Worksheet: Three-Dial Colour Decode
Choose three colours from a brand or design you admire. Using any colour picker (Figma, Photoshop, oklch.com), read each colour into hue, saturation, and value, then practise turning one dial at a time.
- Colour 1 name and HEX
- Colour 1 HSL: hue (0-360), saturation (0-100%), lightness (0-100%)
- Colour 2 name and HEX
- Colour 2 HSL: hue, saturation, lightness
- Colour 3 name and HEX
- Colour 3 HSL: hue, saturation, lightness
- Darker hover variant of Colour 1 (hold hue and saturation, lower lightness): new lightness %
- Calmer variant of Colour 1 (hold hue, lower saturation): new saturation %
Worksheet: Temperature and Relationship Map
For your chosen project, record one base hue and explore its wheel relationships and temperature so later harmony work is grounded in measured angles.
- Base hue angle (0-360)
- Is the base warm (0-60, 300-360) or cool (120-270)?
- Analogous neighbour hue (base plus or minus about 30)
- Complementary hue (base plus 180)
- Triadic hues (base plus 120 and base plus 240)
- Where will a single warm accent go if the interface is mostly cool (or vice versa)?
Checklist: Foundations Self-Check
- I can state which colour system any colour belongs to and whether it adds light or pigment
- I can read any colour into hue, saturation, and value
- I can change lightness or saturation while holding hue constant
- I can name the analogous, complementary, and triadic relationships of a base hue by angle
- I can identify a colour as warm or cool relative to its neighbours
Modelling Colour with Numbers
Get fluent in HEX, RGB, HSL, and OKLCH, and plan deliberate conversions between screen and print.
Worksheet: Notation Translation Table
Take three project colours and express each in every screen notation. Use a picker to fill any values you cannot do by hand. This builds the habit of storing in HEX and reasoning in HSL or OKLCH.
- Colour A: HEX
- Colour A: RGB (r, g, b)
- Colour A: HSL (h, s%, l%)
- Colour A: OKLCH (L, C, H)
- Colour B: HEX, RGB, HSL, OKLCH
- Colour C: HEX, RGB, HSL, OKLCH
- Which notation will you store values in, and which will you edit in?
Exercise: OKLCH Even-Step Test
Prove to yourself that OKLCH lightness is perceptually even. In oklch.com or a tool that supports OKLCH, build a five-step scale for two very different hues using the SAME L values, then compare them by eye.
- Which five L values did you use (for example 0.95, 0.80, 0.62, 0.45, 0.28)?
- Do the two hue scales look like they march in lockstep at each step? Where, if anywhere, do they drift?
- Repeat the same five steps in HSL lightness for the two hues. How does the HSL version look uneven by comparison?
Exercise: Gamut and Soft-Proof Reality Check
Pick your most saturated brand or favourite screen colour and test how it behaves heading to print using soft proofing. If you do not have InDesign or Photoshop, describe the expected shift and plan for it.
- Is the colour flagged as out of gamut under a CMYK proof (for example US Web Coated SWOP v2)? If so, what is the nearest printable substitute?
- Which colours, if any, will need a Pantone spot ink to stay exact across print runs?
- Write the three recipes for this colour: screen HEX, CMYK build, and Pantone reference.
Worksheet: Cross-Media Recipe Card
For each core brand colour, record the one agreed appearance and the medium-specific recipes so reproduction stops being a recurring crisis.
- Colour name and intended appearance in one phrase
- Screen value (HEX and RGB)
- Print build (CMYK)
- Pantone or spot reference (if exactness required)
- ICC profile chosen for print (for example US Web Coated SWOP v2, PSO Coated)
- Will a physical hard proof be ordered? Yes or no, and why
Building Palettes That Work
Produce the core deliverables: a role-assigned harmony palette, a documented stepped scale, and accessibility-cleared pairings.
Worksheet: Harmony Scheme and 60-30-10 Roles
Choose a harmony scheme that fits your brief, generate it (Adobe Color or Coolors), then assign each colour a role using the 60-30-10 structure. The role assignment is the actual design decision.
- Brief in one line (what should this design feel like?)
- Chosen scheme (analogous, complementary, triadic, split-complementary) and why
- Dominant colour (about 60%): name and HEX
- Secondary colour (about 30%): name and HEX
- Accent colour (about 10%, often a near-complement for the call to action): name and HEX
- What single element gets the accent, and why does it deserve the spotlight?
Worksheet: Stepped Scale Builder (50 to 900)
Expand one base hue into a full nine-step scale using even OKLCH L values, then note the intended use of the key steps. Repeat the same L values for your neutral so the ramps align. Capture the full result in the Stepped Scale template.
- Hue name and base OKLCH hue angle
- Nine L values used for 50 through 900 (for example 0.97, 0.93, 0.86, 0.76, 0.62, 0.52, 0.42, 0.33, 0.24)
- Step 500 HEX (the base brand colour)
- Background step (usually 50) and its use
- Hover step (often 700) and its use
- Heading-on-light step (often 900) and its use
- Confirm the neutral scale reuses the same nine L values: yes or no
Exercise: Contrast Audit and Fix
Test every text-and-background and key UI pairing in your palette against WCAG 2.1 using the WebAIM Contrast Checker or the Stark Figma plugin. Where a pairing fails, fix it by holding hue and moving lightness only. Log results in the Contrast Audit template.
- List each failing pairing with its measured ratio (remember: text needs 4.5 to 1, large text and UI need 3 to 1).
- For each failure, what lightness change fixed it, and what was the new passing ratio?
- Which meaning-carrying colours (errors, success, status) also use an icon, label, or shape so they do not rely on colour alone?
Checklist: Palette Quality Gate
- Every colour has a defined role under 60-30-10 (dominant, secondary, accent, neutral)
- Each base hue has a full 50-to-900 scale with even (OKLCH) steps
- All body-text pairings reach at least 4.5 to 1; large text and UI reach at least 3 to 1
- No status or meaning is communicated by colour alone
- The base 500 colours and the scale are recorded with HEX values, not just screenshots
Strategic and Cultural Colour
Make colour do a job: align it to brand strategy, check it across target markets, and lock it into a usable specification.
Worksheet: Brand Fit and Differentiation Test
Pressure-test your main brand colour against the three strategic questions so the choice is defensible, not a guess wearing a lab coat.
- Brand message in one line
- Proposed primary colour and the association you are leaning on
- Does the colour fit the brand message? Yes or no, with one reason
- How does it differ from two named direct competitors' colours?
- Will it survive across required media and markets? Note any concern
- Verdict: strategic choice or needs rework?
Worksheet: Cross-Cultural Market Check
For each market you will ship to, research and record how your key colours read locally, then note any localisation needed. Treat colour like copy: localised and checked.
- Target market or region
- Primary colour local meaning (researched, with source)
- Accent colour local meaning (researched, with source)
- Any colour to avoid or adjust in this market and why
- How respected local brands in this category use colour
- Localisation decision (keep as is, adjust campaign palette, get native-speaker review)
Worksheet: Colour Specification Assembly
Compile your final colour spec, the portfolio-ready outcome of the course. Pull values from your earlier worksheets and the templates into one authoritative record.
- Each colour: name and role (primary, secondary, accent, neutral)
- Each colour: HEX, RGB, CMYK, Pantone, OKLCH or HSL
- Full stepped scale (50 to 900) per hue
- 60-30-10 usage proportions stated
- Accessibility-cleared text-and-background pairings with their ratios
- Where the spec lives (brand PDF, Figma variables, design tokens, Zeroheight)
- One do and one do-not usage example per key colour
Checklist: Ship-Ready Colour System
- Primary colour passes the fit, differentiation, and durability test
- Every target market has a researched colour check and a localisation decision
- Every colour is recorded in all needed values (HEX, RGB, CMYK, Pantone, OKLCH or HSL)
- Accessibility-cleared pairings are documented with their contrast ratios
- The specification lives in a single source of truth shared by design and engineering
- Do and do-not examples make the usage rules impossible to misread
Your Action Plan
- Choose one real project to carry through the whole workbook (your brand, a redesign, or a public-domain rebrand).
- Decode three reference colours into hue, saturation, and value, and confirm you can edit one dial at a time.
- Pick base hues and map their analogous, complementary, and triadic relationships by wheel angle.
- Choose a harmony scheme that fits the brief and assign every colour a 60-30-10 role.
- Build a 50-to-900 stepped scale per hue using even OKLCH L values, reusing the same L values for the neutral.
- Run a full WCAG contrast audit, fix every failure by adjusting lightness, and add non-colour signals for status.
- Define cross-media recipes (screen HEX, CMYK, Pantone) and soft-proof the most saturated colours for print.
- Run the brand fit-and-differentiation test and a cross-cultural check for every target market.
- Assemble the full colour specification in one source of truth with all values, scales, pairings, and usage rules.
- Add do and do-not examples, then review the whole system against the Ship-Ready checklist before handoff.
Pairs well with
Courses members commonly take alongside this one.
Flagship CoursePreview
Freelance Business Foundations: Position, Price, Sell, and Deliver High-Value Services
Freelancing · Beginner · 16h
Self-pacedPreview
Client GrowthPreview
Freelance Client Acquisition: Outreach, Leads, Referrals, and Deal Flow
Freelancing · Beginner · 15h 30m
Self-pacedPreview
Sales SystemPreview
Freelance Sales & Proposals: Discovery Calls, Scoping, Objections, and Closing
Freelancing · Intermediate · 16h
Self-pacedPreview