Accent color: how to pick the one that does the work

An accent color is the small, contrasting colour in a palette that points at what matters: the button to press, the price, the one word in a headline. To pick one that does the work, start from your base colours and choose something that differs from them clearly in hue, lightness or saturation, then use it sparingly. In the familiar 60 30 10 split it is the ten percent. The less often it appears, the more each appearance means.

What an accent colour is for

Most of a design is base and supporting colour: backgrounds, panels, text. The accent is the exception that tells the eye where to go. That makes it the most functional colour you own. On a website it marks the primary action; on a poster it lands on the date; in a brand it becomes the detail people remember, a coloured full stop or a single bright stripe.

The 60 30 10 rule gives the proportions: about sixty percent dominant colour, thirty percent secondary, ten percent accent. Treat the ten as a ceiling, not a target. Many of the best layouts use far less.

How to choose an accent colour

Contrast is the whole job. Look at your base and secondary colours and ask how they are alike, then make the accent unlike them in at least one strong way.

1. 1

   Contrast of hue

   Pick from the opposite side of the colour wheel. Navy and teal palettes take warm accents like coral or amber; warm palettes take blue or green. Complementary colours are the classic choice.

2. 2

   Contrast of lightness

   On a dark base, a light accent; on a pale base, a deep one. A muted palette of greys can take a black accent as easily as a bright one.

3. 3

   Contrast of saturation

   Among soft, dusty colours, one saturated colour reads as the accent even if it shares their hue. A clay palette with a pure vermilion accent is a good example.

4. 4

   Test it at its real size

   An accent is usually small. Check it as a button label or a thin underline stroke, not as a big swatch, because small areas of colour look darker and duller.

Where to use the accent, and where not to

Bright accents such as lime, yellow and mint often fail as text on white. Use them as fills with dark text on top, and check every pairing against colour contrast guidance: at least 4.5:1 for body text and 3:1 for large text and interface parts.

A quick audit helps if the accent has crept everywhere. Take a screenshot of your homepage or a week of posts, blur it slightly, and look at where the accent appears. If your eye lands on three or four places at once, demote all but the most important one to a secondary colour. If it lands on nothing, the accent is probably too close to the base and needs more contrast in hue or lightness.

The CSS accent-color property

On the web, accent-color tints native form controls in one line: checkboxes, radio buttons, range sliders and progress bars. It is supported in current versions of the major browsers; MDN's reference has the details.

:root {
  --accent: #d42a35;
}

/* Native checkboxes, radios, sliders and progress bars */
body {
  accent-color: var(--accent);
}

/* The same accent on your own components */
.button-primary {
  background: var(--accent);
  color: #ffffff;
}

a {
  color: #b3202a; /* a deeper shade for text links on white */
}

Browsers may adjust the tick or thumb colour inside a control to keep it readable against your accent, so test both light and dark accents. For the rest of a site's colours, see website colour scheme.

Accents on gradients and photographs

On a rich background, an accent has more to compete with. Pull it from outside the background's colour family: a warm accent on a cool gradient, or a near white on a colourful one. In Gradiently, auto ink chooses light or dark type for each line from the Mark's own palette, so the words stay legible as the background moves, and your accent only has to do its one job. For more on palettes built around a single strong colour, see tech colour palettes.