Courses / Colour for developers

Applied designAbout 85 minutes8 practical labs

Colour for developers

Build a useful interface palette from colour theory and photography. Sample colours from an image, assign clear roles, and make emphasis, contrast and status work together.

Practical colour theory for interfaces: palette relationships, colours drawn from photography, reusable roles and readable combinations. Automated checks assess the supplied brief, not whether a palette is beautiful.

Interactive labs require a laptop or desktop. You can browse the outline on any device.

Included with The Vault. Each learner needs their own account and Vault access.

A palette with a purpose.Interactive practice
Café interior with pale brick, timber shelves, plants and warm pendant lights

Field notes / A reading collection

Give every colour
a useful job.

A quiet surface. Readable words.
One clear place to act.

Open the collectionBrowse the index
SurfaceTextActionAccent
From a photograph to an interface paletteVault course

The curriculum

8 practical labs.
Decisions you can use.

Every lesson starts with a short principle and a page that needs work. You make the changes. The feedback tells you which relationships work and what to try next.

By the end, you can

  • Use hue, saturation and lightness deliberately
  • Build an interface palette from a photograph
  • Build reusable semantic colour roles
  • Separate surfaces without competing accents
  • Measure actual text/background contrast
  • Communicate status with more than colour
  • Apply a palette to a fresh interface

Basic HTML and CSS familiarity. Visual hierarchy for developers is recommended preparation; no colour theory experience needed. Use a laptop or desktop with a browser window at least 1024px wide. Work at your own pace; there is no timer.

  1. 01
    Give colours a job
    8 min
  2. 02
    Build a related palette
    12 min
  3. 03
    Build from a photograph
    15 min
  4. 04
    Separate the surfaces
    8 min
  5. 05
    Check the actual pair
    10 min
  6. 06
    Spend the accent carefully
    8 min
  7. 07
    Make status understandable
    9 min
  8. 08
    A fresh colour brief
    15 min

Proper interaction.

Work with real photographs and their sampled colours. Adjust a live palette, inspect foreground/background contrast, compare colour roles and export the CSS tokens behind your decisions.

A completion record.

Pass the practical checks in each lab to create an optional certificate with your name and a verification link. This records course completion; it is not an accredited qualification.

For you, or your team.

This course is included with the Vault. Each person needs their own account and Vault access, with a separate learning record and optional certificate.

Your cart

Your cart is empty

The Vault £99

Everything in the catalogue, plus everything we release next.