Colour theory / 4 min read
Colour theory: understand the relationships, improve the design.
Understand hue, value, and saturation before combining colours, with a small visual exercise that changes one property at a time.
Describe the property you are changing
“Make the colour stronger” can mean several different things. A designer might increase saturation, make a colour darker, or place it against a quieter background. Name the property before making the adjustment. Hue identifies a colour family such as orange or blue. Value describes how light or dark a colour appears; saturation describes its relative intensity or mutedness. These ideas help you compare choices, but they do not turn perception into three interchangeable sliders. This article uses Fieldnote, a fictional neighbourhood workshop website, to explore the properties. It does not prescribe a complete brand palette or report audience responses.
Compare one variable at a time
The figure below uses OKLCH colour values to vary hue, lightness, and chroma in separate rows. MDN documents L as perceived lightness, C as chroma, and H as a hue angle. Chroma describes colour intensity in this model; it is related to, but not interchangeable with, the saturation control in HSL. Likewise, an HSL lightness percentage and an OKLCH lightness percentage are not the same measure. The labels show which value changes and which remain fixed. Keep the sample size and surrounding surface constant, then describe what you notice. These distinctions prevent a useful design vocabulary from becoming a misleading claim that all colour sliders work identically.
Change one colour property at a time.
Hue · colour family
- 35° · orange
- 145° · green
- 260° · blue
Lightness · darker to lighter
- 40% · darker
- 60% · middle
- 80% · lighter
Chroma · muted to vivid
- 0.02 · muted
- 0.09 · middle
- 0.16 · vivid
Use light and dark to examine structure
Take Fieldnote’s sample workshop title, supporting line, and date action. Temporarily remove the expressive colours and judge the composition through light and dark. Can you separate the text from its surface? Is the proposed action distinguishable from surrounding information? This exercise can expose weak visual hierarchy, but a greyscale view is not a substitute for a proper text-contrast check or a simulation of every colour-vision condition. Return to the actual colour pairings for verification. A vivid hue difference can appear striking while the text and background still have a light–dark relationship that needs adjustment.
Treat saturation as a relationship
Put a small intense colour beside a large muted surface, then reverse their areas without changing the swatches. The emphasis will change because intensity interacts with scale and context. For the Fieldnote concept, an expressive orange illustration can carry character while a quiet paper surface supports the workshop details. That is a proposed compositional role, not a claim that orange reliably produces a particular emotion. If the entire page becomes intense, raising saturation again gives you little room to create a distinct emphasis. Compare quieter surroundings before assuming the highlighted element itself needs a more extreme colour.
Check colour inside the intended medium
A colour wheel is a relationship diagram, not a guarantee that a combination will work for a paragraph, poster, or interface state. Try the actual content, intended sizes, and surrounding imagery. Do not assume a complementary pair provides readable text merely because its hues sit opposite each other on a wheel. W3C’s text-contrast guidance concerns the foreground/background relationship, while its use-of-colour guidance calls for visual information beyond colour alone when colour carries meaning. Apply both ideas to a real component: a selected workshop date needs a clear state, and its label still needs to be readable.
W3C: Contrast (Minimum) ↗W3C: Use of Color ↗Make a comparison sheet with a question
Choose one base colour and create three small rows. First vary hue while keeping your other controls stable; then compare lighter and darker versions; finally compare muted and intense versions. Note that the controls are a practical exercise rather than a perceptually exact scale. Add the same short workshop label to every sample and write one observation about the relationship, such as “the label is harder to distinguish on this surface”. Keep the conclusions local to what you made. Once those fundamentals are understandable, move to the separate palette article to assign usable colour roles, or the warm-and-cool article to examine relative temperature within a composition.