css/docs/content/utilities/colors.mdx

---
title: Colors
description: 'Immutable, atomic CSS classes to rapidly build product'
status: Beta
---

<Note>
  Please note Primer CSS v18 has changed the naming of these color classes. Check the <a href="/css/support/v18-migration">migration guide</a> to make sure your app is up to date.
</Note>

Use color utilities to apply color to the background of elements, text, and borders. These utilities should only be used where color is not provided by a component. To learn more about how to apply color, read the [color documentation](https://primer.style/design/foundations/color) in the [interface guidelines](https://primer.style/design/).

## Text

Use text color utilities to set text to a specific color. Color contrast must pass a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). This ensures that viewers who cannot see the full color spectrum are able to read the text. To customize outside of the suggested combinations below, we recommend using this [color contrast testing tool](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).

```html live
<div class="color-fg-default mb-1">.color-fg-default</div>
<div class="color-fg-muted mb-1">.color-fg-muted</div>
<div class="color-fg-subtle mb-4">.color-fg-subtle</div>

<div class="color-fg-accent mb-1">.color-fg-accent</div>
<div class="color-fg-success mb-1">.color-fg-success</div>
<div class="color-fg-attention mb-1">.color-fg-attention</div>
<div class="color-fg-severe mb-1">.color-fg-severe</div>
<div class="color-fg-danger mb-1">.color-fg-danger</div>
<div class="color-fg-open mb-1">.color-fg-open</div>
<div class="color-fg-closed mb-1">.color-fg-closed</div>
<div class="color-fg-done mb-1">.color-fg-done</div>
<div class="color-fg-sponsors mb-4">.color-fg-sponsors</div>

<div class="color-fg-on-emphasis color-bg-accent-emphasis p-2 rounded">.color-fg-on-emphasis</div>
```

You can set the color inheritance on an element by using the `color-fg-inherit` class.

```html live
<div class="color-fg-success">This text is green, <a href="#" class="color-fg-inherit">including the link</a></div>
```

## Background

Background colors are most commonly used for filling large blocks of content or areas with a color. When selecting a background color, make sure the foreground color contrast passes a minimum WCAG accessibility rating of [level AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html). Meeting these standards ensures that content is accessible by everyone, regardless of disability or user device. You can [check your color combination with this demo site](https://colorable.jxnblk.com/). For more information, read our [accessibility standards](../principles/accessibility).

```html live
<div class="color-bg-default p-2 rounded mb-2">.color-bg-default</div>
<div class="color-bg-overlay p-2 rounded mb-2">.color-bg-overlay</div>
<div class="color-bg-inset p-2 rounded mb-2">.color-bg-inset</div>
<div class="color-bg-subtle p-2 rounded mb-2">.color-bg-subtle</div>
<div class="color-bg-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-emphasis</div>

<div class="color-bg-accent p-2 rounded mb-2">.color-bg-accent</div>
<div class="color-bg-accent-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-accent-emphasis</div>

<div class="color-bg-success p-2 rounded mb-2">.color-bg-success</div>
<div class="color-bg-success-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-success-emphasis</div>

<div class="color-bg-attention p-2 rounded mb-2">.color-bg-attention</div>
<div class="color-bg-attention-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-attention-emphasis</div>

<div class="color-bg-severe p-2 rounded mb-2">.color-bg-severe</div>
<div class="color-bg-severe-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-severe-emphasis</div>

<div class="color-bg-danger p-2 rounded mb-2">.color-bg-danger</div>
<div class="color-bg-danger-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-danger-emphasis</div>

<div class="color-bg-open p-2 rounded mb-2">.color-bg-open</div>
<div class="color-bg-open-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-open-emphasis</div>

<div class="color-bg-closed p-2 rounded mb-2">.color-bg-closed</div>
<div class="color-bg-closed-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-closed-emphasis</div>

<div class="color-bg-done p-2 rounded mb-2">.color-bg-done</div>
<div class="color-bg-done-emphasis color-fg-on-emphasis p-2 rounded mb-4">.color-bg-done-emphasis</div>

<div class="color-bg-sponsors p-2 rounded mb-2">.color-bg-sponsors</div>
<div class="color-bg-sponsors-emphasis color-fg-on-emphasis p-2 rounded">.color-bg-sponsors-emphasis</div>

<div class="color-bg-transparent p-2 rounded mb-2">.color-bg-transparent</div>
```

## Border

Override default border colors with the following utilities.

```html live
<div class="border color-border-default p-2 rounded mb-2">.color-border-default</div>
<div class="border color-border-muted p-2 rounded mb-2">.color-border-muted</div>
<div class="border color-border-subtle p-2 rounded mb-4">.color-border-subtle</div>

<div class="border color-border-accent p-2 rounded mb-2">.color-border-accent</div>
<div class="border color-border-accent-emphasis p-2 rounded mb-4">.color-border-accent-emphasis</div>

<div class="border color-border-success p-2 rounded mb-2">.color-border-success</div>
<div class="border color-border-success-emphasis p-2 rounded mb-4">.color-border-success-emphasis</div>

<div class="border color-border-attention p-2 rounded mb-2">.color-border-attention</div>
<div class="border color-border-attention-emphasis p-2 rounded mb-4">.color-border-attention-emphasis</div>

<div class="border color-border-severe p-2 rounded mb-2">.color-border-severe</div>
<div class="border color-border-severe-emphasis p-2 rounded mb-4">.color-border-severe-emphasis</div>

<div class="border color-border-danger p-2 rounded mb-2">.color-border-danger</div>
<div class="border color-border-danger-emphasis p-2 rounded mb-4">.color-border-danger-emphasis</div>

<div class="border color-border-open p-2 rounded mb-2">.color-border-open</div>
<div class="border color-border-open-emphasis p-2 rounded mb-4">.color-border-open-emphasis</div>

<div class="border color-border-closed p-2 rounded mb-2">.color-border-closed</div>
<div class="border color-border-closed-emphasis p-2 rounded mb-4">.color-border-closed-emphasis</div>

<div class="border color-border-done p-2 rounded mb-2">.color-border-done</div>
<div class="border color-border-done-emphasis p-2 rounded mb-4">.color-border-done-emphasis</div>

<div class="border color-border-sponsors p-2 rounded mb-2">.color-border-sponsors</div>
<div class="border color-border-sponsors-emphasis p-2 rounded">.color-border-sponsors-emphasis</div>
```

## Link

You can use the [Link](../components/links) component to change the link colors.