Colour Theory for Design: Terms, Relationships and Output Checks
TL;DR
In this guide
- Understand the terms. Hue, saturation and lightness describe different aspects of a colour.
- Use relationships thoughtfully. A colour wheel is a planning aid, not a rule for customer behaviour.
- Check the output. Screen and printed applications need appropriate values, profiles and review.
Colour theory gives a design team a shared language for discussing a palette. It helps explain relationships and differences, while the audience, content and production context determine whether the choices work.
The topic at a glance
The practical overview
01
Colour vocabulary
Describe the family, intensity and light/dark relationship so feedback is more precise.
02
Palette relationships
Explore related or contrasting hues in the context of a clear visual hierarchy.
03
Applications and output
Review readable combinations, real imagery and the intended digital or print workflow.
Before you begin
What to prepare
Use these practical checks to gather the information needed for the next step.
- The existing palette and colour values
- Examples of the intended applications
- Actual photographs, text and diagrams
- Digital and print outputs to be prepared
- The supplier or implementation requirements
A useful reminder
One colour can have several roles
The same hue can appear as a pale surface, strong accent or dark text treatment. Review the actual combination and purpose instead of assuming that its name describes the whole effect.
The practical guidance
Steps, tools and examples
Hue, saturation and lightness
Hue describes the colour family, such as green or violet. Saturation describes how vivid or subdued the colour appears. Lightness describes its light-to-dark character within the colour model being used. These dimensions give more precise feedback than saying that a colour should be “stronger”.
For example, a designer can retain a blue hue while making a background lighter or a text treatment darker. That does not mean every change has an identical effect in every colour model. Discuss the intended application and compare the alternatives side by side.
Use the wheel as a relationship tool
Common colour-wheel descriptions include neighbouring hues, often called analogous, and opposing hues, often called complementary. A palette can also use variations within one hue. These are ways to explore relationships, rather than instructions to use every colour in equal amounts.
Choose a leading role and supporting roles. Test whether the palette gives the intended hierarchy when real text, photographs and controls are added. A relationship that is attractive in a diagram may be difficult in small copy or a complex product image.
Separate context from assumed psychology
Colours can carry associations through culture, category conventions and previous experience. The same colour may be used for a safety message, a playful brand or an ordinary interface accent. The surrounding words and application change how it is understood.
Fictional example: a museum uses a restrained base palette and an orange accent for an exhibition programme. The team checks whether the accent helps readers find dates and actions. It does not assume that orange will make every audience feel or behave in a particular way.
Understand screen and print colour
RGB describes red, green and blue components used for screen display. CMYK describes cyan, magenta, yellow and black process-ink components. Colour spaces and output conditions affect the range and appearance of the result; conversion does not guarantee an exact match. Adobe’s colour-mode documentation explains the distinction.
Record the approved values and the intended output context. For print, confirm the supplier’s workflow and proof method. For digital materials, review the implementation with the actual content. A device display or desktop printout alone is not the specification for every production method.
Copy a colour decision log
Record: proposed colour; intended role; supporting combinations; audience/context; actual application; readability check; output values/profile; proof or preview; approval; restrictions. Keep a real example beside the entries so the next person can understand the decision.
W3C’s text contrast guidance provides the reference for checking foreground and background pairs on the web. For the specific work of assigning colours to pages, forms and states, continue with the website palette guide. For the wider rules and deliverables, use the identity-system guide.
Keep the work useful
Common mistakes to avoid
- Treating a colour association as a universal emotional rule
- Approving colours only on an isolated swatch
- Expecting every screen and substrate to match automatically
- Specifying production values without the actual output requirements
