Colour theory books often start with paint, pigments and art history. That is interesting, but UI designers need something more practical: how to choose a palette that works on screens, reads well for everyone, supports the brand and still makes sense when the product grows to two hundred screens and a dark mode.
This guide focuses on exactly that. We cover the few colour theory concepts that matter for interfaces, then move quickly to building a palette, checking contrast and assigning colours to roles. For the basics, see our lesson on colour in UI design.
The three properties of colour
Screens mix red, green and blue light, so colours are stored as RGB or hex values such as #1D4ED8. Those numbers are hard to reason about. A more designer-friendly model is HSL:
| Property | What it means | In practice |
|---|---|---|
| Hue | The position on the colour wheel, from 0 to 360 degrees (red, orange, yellow, green, blue, purple…) | Decides “which colour” – your brand’s identity |
| Saturation | How intense or grey the colour is | High saturation grabs attention; low saturation feels calm and neutral |
| Lightness | How close to black or white the colour is | Controls contrast and hierarchy more than hue does |
A useful insight: lightness does most of the work in UI. Users notice the difference between dark text and a light background long before they notice whether a blue is slightly purple. When something feels “off”, check lightness and contrast first.
Tip: HSL lightness is not perfectly matched to how bright colours look to our eyes. A yellow and a blue with the same HSL lightness can look very different. Always check contrast with a tool rather than trusting the numbers alone. Newer CSS colour spaces such as OKLCH aim to fix this.
Colour harmonies, briefly
In colour theory, harmonies are combinations based on positions on the wheel. They are useful starting points for brand and illustration colours, less so for everyday UI.
- Monochromatic: one hue in different lightness and saturation. Calm, easy to get right, ideal for UI.
- Analogous: neighbouring hues, such as blue and teal. Harmonious and gentle.
- Complementary: opposite hues, such as blue and orange. High contrast; good for a single accent.
- Triadic: three evenly spaced hues. Lively, but hard to balance in interfaces.
For most products, a practical recipe is: one main brand hue, a set of neutral greys, and a small number of semantic colours for success, warning, error and information.
Building a UI palette step by step
- Pick the primary colour. Usually from the brand. Make sure a version of it is dark enough for white text on top (for buttons) and another version works as text or links on white.
- Generate a scale. Create tints and shades from very light to very dark, commonly named in steps such as 50, 100, 200 … 900. Light steps are for backgrounds and hover states; middle steps for borders and icons; dark steps for text and pressed states.
- Build a neutral scale. Greys do most of the work: backgrounds, borders, secondary text, dividers. Slightly tinting greys towards your brand hue (a very low saturation) can make the palette feel more unified.
- Add semantic colours. Green for success, amber or orange for warning, red for errors, blue for information. Each needs its own small scale (a light background, a mid tone for icons, a dark tone for text).
- Test on real screens. Put the palette on a form, a table, a card list and an error state. Palettes that look fine as swatches can fail in context.
- Store it as variables. In Figma, create colour variables for each step and then semantic variables that point to them. See design systems for beginners.
The 60-30-10 guideline
An interior design rule of thumb that transfers well to UI: about 60% of the screen in a dominant neutral (backgrounds), 30% in a secondary colour (surfaces, cards, navigation) and 10% in an accent (primary buttons, links, highlights). It is not a strict formula, but it reminds you that accents work because they are rare. If everything is brand blue, nothing stands out.
Contrast and accessibility: the non-negotiables
The Web Content Accessibility Guidelines (WCAG) set minimum contrast ratios. At level AA, which most organisations target:
| Content | Minimum contrast (AA) | WCAG success criterion |
|---|---|---|
| Normal body text | 4.5:1 against its background | 1.4.3 Contrast (Minimum) |
| Large text (about 24px regular, or about 18.66px bold and above) | 3:1 | 1.4.3 Contrast (Minimum) |
| UI components and meaningful graphics (input borders, icons, focus rings, chart lines) | 3:1 against adjacent colours | 1.4.11 Non-text Contrast |
| Disabled controls and pure decoration | No requirement | – |
The stricter AAA level asks for 7:1 for normal text and 4.5:1 for large text.
Watch out: Never use colour alone to convey meaning (WCAG 1.4.1 Use of Color). A red border on an invalid field should also come with an error icon and a message. Many people, more often men, have some form of colour vision deficiency, and red–green confusion is the most common type. People also use screens in bright sunlight or with night filters that change how colours look.
Practical habits:
- Check every text-and-background pair in your palette once, and record which pairs pass. Then only use passing pairs.
- Light grey placeholder text on white often fails. Make sure labels, not placeholders, carry essential information.
- Check text on photos and gradients at their lightest point, or add an overlay.
- Use a contrast checker plugin in Figma, or the accessibility tools in your browser’s developer tools.
Read our full guide to web accessibility basics and WCAG for more.
Assigning colours to roles
The most important shift for beginners is to stop thinking “this button is blue” and start thinking “this is the primary action colour”. Roles make your system easier to change and to theme.
| Role | Example usage | Typical choice |
|---|---|---|
| Background | Page background | White or very light neutral |
| Surface | Cards, sheets, menus | White or a slightly different neutral |
| Text primary | Headings and body text | Very dark neutral (not always pure black) |
| Text secondary | Captions, meta info | Mid-dark neutral that still passes 4.5:1 |
| Border | Dividers, card outlines | Light neutral (decorative) or darker for inputs (3:1) |
| Action primary | Main buttons, links | Brand colour at a step that passes contrast |
| Feedback | Success, warning, error, info | Semantic colours with icons and text |
Colour meaning and culture
Colour associations are learned, not universal. Red signals errors and danger in software almost everywhere, partly because of convention. But in India, red is also strongly associated with celebration and weddings, and saffron, green and white carry national associations. Green can mean success, nature or “go”; in finance apps in many markets it signals gains, but conventions vary across countries.
For interface states, follow established software conventions so users are not confused. For brand, marketing and illustration, think about your audience’s context, festivals and region.
Designing for dark mode
- Do not simply invert colours. Use dark greys for backgrounds rather than pure black, which can cause harsh contrast and smearing on some screens.
- Reduce saturation of bright brand colours, which can look neon on dark backgrounds.
- Show elevation with slightly lighter surfaces rather than shadows, which are hard to see on dark backgrounds.
- Recheck every contrast pair; a colour that passes on white may fail on dark grey.
- Use semantic variables with Light and Dark modes so components switch automatically.
For the CSS side, read dark mode design and CSS.
Quick colour theory checklist
- One primary hue, a neutral scale and four semantic colours.
- All text pairs meet 4.5:1 (or 3:1 for large text).
- Input borders, icons and focus indicators meet 3:1.
- No meaning conveyed by colour alone.
- Accent colour used sparingly for the most important actions.
- Palette stored as primitive and semantic variables.
- Tested in context, in both light and dark modes.
Frequently asked questions
How many colours should a UI palette have?
Think in roles, not counts. A typical product needs one primary hue with a full tint-and-shade scale, a neutral grey scale and four semantic colours (success, warning, error, info). Additional accent hues are optional.
What contrast ratio do I need for buttons?
The button label text needs 4.5:1 against the button colour (or 3:1 if it is large text). The button’s shape needs 3:1 against the page background if the shape is the only thing that identifies it as a button.
Should I use pure black for text?
You can, as it gives maximum contrast. Many designers prefer a very dark grey for a softer look on bright screens. Either way, check the contrast ratio.
What is the difference between RGB, HEX and HSL?
They are different ways of writing the same screen colours. HEX is a compact form of RGB. HSL describes colours by hue, saturation and lightness, which is easier for creating tints, shades and variations.
