---
title: Colors
description: 'Immutable, atomic CSS classes to rapidly build product'
status: New
status_issue: 'https://github.com/github/design-systems/issues/97'
---
import {Box, BorderBox} from '@primer/components'
import {palettes, allColors} from '../../src/color-variables'
import {PaletteTable, PaletteTableFragment, PaletteHeading, PaletteCell, PaletteValue} from '../../src/color-system'
Please note Primer v16 has changed the naming of these color classes. Check the migration guide to make sure your app is up to date.
Use color utilities to apply color to the background of elements, text, and borders.
## Text colors
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).
> ⚠️ The `.color-text-warning` currently doesn't pass accessibility standards, but will be updated in the future. **Use with caution**.
```html live
.color-text-primary
.color-text-secondary
.color-text-tertiary
.color-text-link
.color-text-success
.color-text-warning ⚠️
.color-text-danger
```
You can set the color inheritance on an element by using the `text-inherit` class.
```html live
```
## Icon colors
Use icon color utilities to set [Octicons](https://primer.style/octicons) to a specific color.
```html live
.color-icon-primary
.color-icon-secondary
.color-icon-tertiary
.color-icon-info
.color-icon-success
.color-icon-warning
.color-icon-danger
```
## Background colors
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
.color-bg-canvas
.color-bg-primary
.color-bg-secondary
.color-bg-tertiary
.color-bg-info
.color-bg-success
.color-bg-warning
.color-bg-danger
```
## Inversed and permanent colors
⚠️ WIP: Don't use in produciton. They might still change.
You can inverse the canvas background color. Be sure to also inverse the text color (`.color-text-inverse`) to give enough contrast.
```html live
.color-bg-canvas-inverse .color-text-inverse
```
When using the functional inversed background colors the `.color-text-white` is the better choice as it keeps the text white in all color modes. An exception is the `.color-bg-warning-inverse`.
```html live
.color-bg-info-inverse .color-text-white
.color-bg-success-inverse .color-text-white
.color-bg-warning-inverse
.color-bg-danger-inverse .color-text-white
```
## Border colors
Override default border colors with the following utilities.
```html live
.color-border-primary
.color-border-secondary
.color-border-tertiary
.color-border-info
.color-border-success
.color-border-warning
.color-border-danger
.color-border-inverse
```
### Borders with alpha transparency
> TODO: Deprecate?
Use `border-black-fade` to add an rgba black border with an alpha transparency of `0.15`. This is useful when you want a border that tints the background color. The shade of black we use matches the hue of the GitHub dark header and our gray color palette: `rgba(27,31,35, 0.15)`.
```html live
.border-black-fade
.border-black-fade
```
On dark backgrounds use `border-white-fade` instead. It adds an rgba white border with an alpha transparency of `0.15`. Or use `.border-white-fade-xx` to add a white border with various levels of alpha transparency.
```html live
.border-white-fade-15 or .border-white-fade
.border-white-fade-30
.border-white-fade-50
.border-white-fade-70
.border-white-fade-85
```
## Link colors
You can use the [Link](../components/links) component to change the link colors.