---
title: "Picking a colour palette that works"
source: https://www.taim.io/creative-skills/picking-a-color-palette-that-works
published: Sun May 10 2026 19:33:22 GMT+0000 (Coordinated Universal Time)
updated: Thu Jul 23 2026 05:28:35 GMT+0000 (Coordinated Universal Time)
description: "Choose a restrained palette by assigning clear colour roles, testing it on real work, checking contrast, and correcting one variable at a time."
---

# Picking a colour palette that works

A useful palette is not a tray of attractive swatches. It is a small set of colours with assigned jobs, tested on the actual page where they must work.

A useful palette is not a tray of attractive swatches. It is a small set of colours with assigned jobs, tested on the actual page where they must work.

## What you will be able to do

- Build a restrained three-colour palette for a slide, poster, or simple interface.
- Judge a palette through hierarchy, context, and contrast rather than personal preference alone.
- Correct a weak attempt by changing one controlled variable at a time.
- Expand a palette only when the work requires a new visual role.

## Find your starting level

Your starting point determines how tightly you should follow the method. Pick the description that matches your last project, not the one that sounds flattering.

Starting point
What usually happens
Your constraint

Template user
You replace a theme colour and leave the remaining system untouched.
Follow the three-colour recipe exactly once.

Tinkerer
You adjust hex values, gradients, and saturation until the page feels busy.
Change one variable per retry.

Comfortable amateur
You know RGB and hex values, but your roles drift between screens or pages.
Name every colour's job before adding it.

This is a judgment skill. The useful question is not whether you understand colour theory. It is whether you can predict what each swatch will do after it enters a composition.

## Assign jobs before choosing swatches

Start with three roles: a background neutral, a text neutral, and one accent. The background carries the field, the text neutral carries most information, and the accent points to the element that deserves attention first.

A light palette might begin with `#F7F7F7`, `#151515`, and `#2563EB`. These values are examples, not a certified combination for every use. Contrast depends on the exact foreground, background, text treatment, and context.

> **The Quiet Base Rule:** let two neutrals build the room, then let one accent point. If the page still lacks hierarchy, fix scale, weight, spacing, or placement before reaching for another swatch. Extra colour often disguises a composition problem instead of solving it.

## First attempt: colour one real composition

Choose one item you need to finish this week. A title slide, event poster, report cover, or simple sign-up screen will expose real constraints that a row of swatches cannot.

1. Remove decorative gradients, textures, and photographs for this attempt.
2. Set the background to `#F7F7F7` and primary text to `#151515`.
3. Choose one accent, such as `#2563EB`, `#0D9488`, or `#D97706`.
4. Apply the accent to one primary target, such as a title phrase, key number, or main button.
5. Finish the composition without introducing another colour.

Keep this first version. It is evidence, not a draft to erase. You need it beside the retry so you can see whether the next decision improved anything.

## Read the result before changing it

Inspect the work at its intended size, then reduce it to thumbnail size. A poster must survive distance; a slide must survive projection; an interface must survive actual text, states, and controls.

Signal
What it suggests
What to inspect next

One element leads clearly
The accent and hierarchy agree.
Confirm that the leading element is the intended one.

Text appears faint
The foreground and background may be too similar.
Check contrast, weight, size, and viewing conditions.

Several elements shout
The accent covers too much area or appears in too many roles.
Remove accent from secondary elements.

Everything feels flat
Colour may not be the problem.
Strengthen type size, weight, spacing, or placement.

Meaning disappears without colour
The design relies on colour alone.
Add a label, shape, pattern, or other visual cue.

Do not ask, "Do I like this blue?" Ask, "What did the blue make me look at, and was that the right thing?" That question produces an edit you can test.

## Adjust one variable, then retry

Do not rebuild the whole palette after a weak first attempt. Preserve the composition, change one property, and compare the versions side by side.

1. If text lacks contrast, darken the text or lighten its background, then check again.
2. If the accent dominates, reduce the area using it before changing the hue.
3. If the accent feels crude, lower saturation by a small visible increment, such as 5 points on a 0-100 control.
4. If the layout feels dull, strengthen typography or spacing before adding a fourth colour.

View both versions at full size and as thumbnails. Keep the retry only if you can name the improvement: clearer reading order, stronger contrast, calmer balance, or more consistent meaning.

## Choose the accent from context, not folklore

Colour families do not carry fixed meanings. A blue can resemble a bank, a sports drink, or a hospital sign depending on typography, imagery, proportion, and local convention.

Use context as your filter. For a restrained report, I would test a mid-blue or teal first because they sit comfortably beside common light and dark neutrals. For an event poster, I might test orange or pink because a warmer accent can create a sharper visual interruption. Those are starting judgments, not universal psychological facts.

Test the accent on the exact object it will colour. A swatch that looks elegant in a picker may become weak as small text, overwhelming across half a poster, or muddy beside a photograph.

## Use contrast standards with the right scope

For web content, WCAG 2.2 Level AA sets a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text, subject to specified exceptions. Essential visual information used to identify interface components and states must reach 3:1 against adjacent colours under the applicable criterion.

These figures are not a promise that every passing design will read well in every environment. Type weight, glare, projection, screen quality, and viewing distance still affect the result. For slides and print, the ratios can serve as a useful diagnostic, but a web conformance claim has a specific technical scope.

Colour must not be the only visual means used to communicate information, indicate an action, request a response, or distinguish an element. Add labels, shapes, patterns, underlines, or another visible difference when meaning matters.

## Expand only when a new role exists

A fourth colour should solve a named problem. It might provide a pale accent surface behind a callout, while a fifth supplies a quiet border or secondary surface. If you cannot name the role, do not add the swatch.

Role
Example
Suitable use
Caveat

Background neutral
`#F9FAFB`
Main field
Test against every text colour.

Text neutral
`#111827`
Body copy and headings
Do not assume all smaller grey text remains readable.

Main accent
`#2563EB`
Primary action or key fact
Reserve it for genuine emphasis.

Pale accent surface
`#DBEAFE`
Callout or selected region
Recheck any text placed over it.

Quiet boundary
`#D1D5DB`
Dividers or card edges
Essential interface boundaries may need a stronger contrast relationship.

Do not generate the pale version mechanically and assume it works. A tint created with opacity changes when the surface beneath it changes. Save the resulting colour for each intended background, then test that combination.

## Correct the repeat offenders

Most weak palettes do not need more theory. They need a specific subtraction or reassignment.

Problem
Direct correction

Five bright chart series compete equally
Highlight the important series, mute the rest, and add labels or line styles.

Text sits over a detailed photograph
Move it to a quiet area or place it on a solid panel. Test the final combination.

Several text colours imply no consistent meaning
Return body copy to one neutral and reserve colour for one defined role.

A button, link, and warning share the same accent
Separate their meaning through labels, shape, placement, or an additional role.

Pale grey labels vanish
Increase contrast instead of calling the faintness refined.

I would skip rainbow palette generators until you can assign roles yourself. They can produce harmonious swatches, but harmony does not decide which colour should carry body text, action, warning, or background.

## Worked example: one system, three formats

Consider this core set: background `#F9FAFB`, text `#111827`, accent `#2563EB`, pale accent `#DBEAFE`, and boundary `#D1D5DB`. Treat it as a teaching example, not a pre-approved accessible palette.

On a deck cover, the accent can underline one phrase while the text neutral carries the title. On a poster, it can carry the date or call to action. In a simple interface, it can identify the primary action while pale blue supports a selected region.

The roles stay stable even though the layouts change. Any text placed on blue, pale blue, or grey still needs to be checked against its exact background, and important states need cues beyond colour alone.

## Build taste from saved comparisons

For three small projects, save the first attempt and the corrected version. Record the change in one sentence: "reduced blue area," "darkened label text," or "replaced colour-only status with labels and icons."

After the third project, place all six versions in one contact sheet or Figma page. Repeated mistakes become visible when you stop judging each design in isolation. That record teaches more than collecting another folder of attractive palettes.

### Cheatsheet: choosing a colour palette that works

#### Three-colour setup

Start with one background neutral, one text neutral, and one accent. A workable test set is `#F7F7F7`, `#151515`, and `#2563EB`. Apply the accent to one primary target only, complete a real composition, and test every foreground and background pair you actually use.

#### Accent decision test

Judge the accent through three questions: What element should lead? How much area needs colour? What meaning does the colour carry? If the accent appears on more than one class of important element, define the roles more tightly before adding another swatch.

#### Web contrast reference

For WCAG 2.2 Level AA web content, normal text requires at least 4.5:1 contrast and large text requires at least 3:1, with specified exceptions. Essential visual information that identifies interface components or states has a 3:1 requirement against adjacent colours under the applicable criterion. Check exact rendered colour pairs rather than judging a palette strip.

#### Colour-independent meaning

Do not use colour as the only cue for status, category, action, or response. Pair it with visible text, a pattern, an underline, a distinct shape, or another clear difference. Test by viewing the design in greyscale or temporarily removing the colour distinction, then confirm that the meaning remains available.

#### Retry order

Correct problems in this order: contrast, accent area, saturation, then hue. Change one variable per version. Compare at intended size and thumbnail size, and keep the revision only when you can name the improvement.

#### Palette expansion

Add a fourth colour for a pale accent surface and a fifth for a quiet boundary or secondary surface only when those roles exist. Keep one dominant accent. Recheck contrast after every addition, especially when opacity or layered backgrounds change the resulting colour.

### FAQ: practical palette decisions

#### Should I always use brand colours?

Use the brand system as a constraint, but do not place every approved colour on every page. Choose the brand colour that best fits the primary accent role, then pair it with suitable background and text neutrals. Test any brand colour used for text, controls, or essential state information against its exact adjacent colour. If the brand accent is unsuitable for small text, keep it for larger shapes or decorative emphasis and choose an approved readable text treatment.

#### How do I choose an accent that fits the project?

Start with the content and setting, not a list of universal colour meanings. Place two or three candidate accents on the same real element, using identical typography and spacing, then compare them in context. Judge which version creates the intended reading order without overwhelming the page. Once one candidate leads, adjust its area and saturation before searching for another hue.

#### Is dark mode a separate palette?

Treat dark mode as a separate set of tested colour relationships, not as a mechanical inversion. Keep the same role names, but choose a dark background, light text, accent, surfaces, and boundaries that work together in that context. Recheck every text pair and essential component boundary because a colour that works on a light surface may fail on a dark one. Do not assume that preserving the same hex accent preserves the same hierarchy.

#### What accessibility checks should I run?

For web content, check normal text against the 4.5:1 WCAG 2.2 Level AA threshold and large text against 3:1, while accounting for the standard's specified exceptions. Check essential visual information used to identify interface components and states against the applicable 3:1 requirement. Then remove colour mentally or with a greyscale preview and confirm that labels, shapes, patterns, or other visible cues still carry the meaning. Passing a ratio is a baseline check, not a substitute for testing the rendered design under realistic conditions.

#### How should I colour charts with several series?

First decide which series supports the main claim. Give that series the accent, reduce the prominence of secondary series, and label lines or bars directly where the format allows. Use patterns, line styles, markers, or text so colour is not the sole distinction. If every series needs equal prominence, choose distinguishable colours carefully and test the chart without relying on hue differences alone.

### Wrap-up

A palette works when every colour has a job and the composition makes those jobs visible. Start with two neutrals and one accent. Test them on real work, not as isolated swatches.

When the attempt fails, correct **contrast first, accent area second, saturation third, and hue last**. That order keeps you from replacing a workable palette when the real problem is hierarchy or proportion.

The goal is not to collect more colours. It is to make fewer colour decisions, defend each one, and improve them through visible comparison.

### Next steps: three focused practice sessions

- Rebuild one existing slide or poster with one background neutral, one text neutral, and one accent. Save the original beside the new version.
- Create a retry by changing exactly one variable: contrast, accent area, saturation, or hue. Write one sentence explaining what improved.
- Define five named roles for a brand you use: background, text, accent, pale accent surface, and boundary. Test the exact combinations that carry text or essential interface information.

### Sources and further reading

1. [Web Content Accessibility Guidelines (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) World Wide Web Consortium · 2023-10-05 For web content, WCAG 2.2 Level AA sets a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text, subject to specified exceptions.
2. [Understanding Success Criterion 1.4.1: Use of Color](https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html) W3C Web Accessibility Initiative Colour must not be the only visual means used to communicate information, indicate an action, request a response, or distinguish an element.