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

[Canonical HTML page](https://gradiently.design/guide/accent-color)

The accent is the smallest part of a palette and the part people notice first. Here is how to choose one that stands out from your base, keep it rare enough to work, and set it in CSS.

## The short version

- An accent color is a contrasting colour used in small amounts to draw attention to the most important element, such as a button, a price or a headline word.
- In the 60 30 10 rule the accent is the ten percent, and its rarity is what makes it effective.
- A good accent differs from the base colours in at least one strong way: hue, lightness or saturation.
- An accent used for many different jobs stops signalling anything, so give it one main role.
- In CSS, the accent-color property tints native checkboxes, radio buttons, range sliders and progress bars.

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](https://gradiently.design/guide/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.

A portrait post announcing late opening on Fridays, with a small label above the headline

In a post like this, the accent belongs in one place, such as the small label above the headline, and nowhere else.

A portrait list post titled Three things to bring for a workshop

The same principle in a list post: if the accent appears, it marks the heading only.

## 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. **Contrast of hue** Pick from the opposite side of the [colour wheel](https://gradiently.design/guide/color-wheel). Navy and teal palettes take warm accents like coral or amber; warm palettes take blue or green. [Complementary colours](https://gradiently.design/guide/complementary-colors) are the classic choice.
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. **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. **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.

- Navy base, coral accent: `linear-gradient(90deg, #12233d 0%, #12233d 70%, #2e4a6b 70%, #2e4a6b 90%, #ff7a59 90%, #ff7a59 100%)`
- Sand base, deep blue accent: `linear-gradient(90deg, #f3ece2 0%, #f3ece2 70%, #c9b49a 70%, #c9b49a 90%, #1f3a5f 90%, #1f3a5f 100%)`
- Forest base, saffron accent: `linear-gradient(90deg, #1b2a24 0%, #1b2a24 70%, #3f5a4c 70%, #3f5a4c 90%, #f2c14e 90%, #f2c14e 100%)`
- Lilac grey base, red accent: `linear-gradient(90deg, #e9e4ea 0%, #e9e4ea 70%, #b9aebf 70%, #b9aebf 90%, #d42a35 90%, #d42a35 100%)`
- Black base, lime accent: `linear-gradient(90deg, #111111 0%, #111111 70%, #3a3a3a 70%, #3a3a3a 90%, #c6f432 90%, #c6f432 100%)`
- Blush base, charcoal accent: `linear-gradient(90deg, #f7f1ea 0%, #f7f1ea 70%, #e7c9bd 70%, #e7c9bd 90%, #2b2b2b 90%, #2b2b2b 100%)`

Six palettes drawn at roughly 70, 20 and 10 percent. Each accent differs from its base in hue, lightness or both.

## Where to use the accent, and where not to

| Use it for | Keep it off |
| --- | --- |
| The primary button or call to action | Secondary and cancel buttons |
| One key word, price or date | Whole paragraphs of body text |
| Active states: the current tab, a selected item | Every icon in a toolbar |
| Small brand details: a rule, a dot, a sticker | Large backgrounds behind long text |
| Highlights in a chart: the one series that matters | All series of a chart at once |

An accent with one main job keeps its meaning. When it is on everything, nothing stands out.

> **An accent is not an error colour** If your accent is red, think about how it sits beside error messages. Users may read a red button as destructive. Some brands with red accents use a different red for errors, or show errors with an icon and text as well as colour.

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](https://gradiently.design/guide/color-contrast-accessibility) 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](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) has the details.

```css
: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 */
}
```

One accent token used for form controls and the primary button, with a deeper shade for text links so they pass contrast 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](https://gradiently.design/guide/website-color-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](https://gradiently.design/guide/tech-color-palettes).

## FAQ

### What is an accent colour in design?

A contrasting colour used in small amounts to draw attention to the most important element, such as a button, a key word or a price.

### How much of a design should be the accent colour?

Around ten percent at most, following the 60 30 10 rule. Many strong designs use much less.

### How do I choose an accent colour for my palette?

Make it differ clearly from your base colours in hue, lightness or saturation, then test it at the small size it will actually appear.

### What does accent-color do in CSS?

It sets the tint of native checkboxes, radio buttons, range sliders and progress bars, so form controls match your brand without custom styling.

### Can a brand have more than one accent colour?

It can, but each should have a distinct job, such as one for actions and one for highlights. Two accents doing the same job cancel each other out.