2018-12-05 03:21:27 +03:00
---
title: Colors
description: 'Immutable, atomic CSS classes to rapidly build product'
2018-12-07 22:07:42 +03:00
status: Stable
2018-12-05 03:21:27 +03:00
status_issue: 'https://github.com/github/design-systems/issues/97'
---
2019-06-20 03:00:18 +03:00
import {Box, BorderBox} from '@primer/components'
2019-08-13 00:50:38 +03:00
import {palettes, allColors} from '../../src/color-variables'
import {PaletteTable, PaletteTableFragment, PaletteHeading, PaletteCell, PaletteValue} from '../../src/color-system'
2018-12-05 03:21:27 +03:00
Use color utilities to apply color to the background of elements, text, and borders.
2018-12-07 22:07:42 +03:00
## Text colors
2020-10-09 05:04:22 +03:00
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).
2018-12-07 22:07:42 +03:00
2020-10-19 10:49:57 +03:00
> ⚠️ The `.color-text-warning` currently doesn't pass accessibility standards, but will be updated in the future. **Use with caution**.
2018-12-07 22:07:42 +03:00
2020-10-09 05:04:22 +03:00
```html live
2020-10-19 10:49:57 +03:00
<div class="color-text-primary mb-2">.color-text-primary</div>
<div class="color-text-secondary mb-2">.color-text-secondary</div>
<div class="color-text-tertiary mb-2">.color-text-tertiary</div>
<div class="color-text-success mb-2">.color-text-success</div>
<div class="color-text-warning mb-2">.color-text-warning <span class="tooltipped tooltipped-n" aria-label="Does not meet accessibility standards">⚠️</span></div>
<div class="color-text-danger mb-2">.color-text-danger</div>
2020-10-09 05:04:22 +03:00
```
2018-12-07 22:07:42 +03:00
You can set the color inheritance on an element by using the `text-inherit` class.
2019-08-13 00:50:38 +03:00
```html live
2020-10-19 10:49:57 +03:00
<div class="color-text-success">This text is green, <a href="#" class="text-inherit">including the link</a></div>
2018-12-07 22:07:42 +03:00
```
2020-10-09 05:04:22 +03:00
## Icon colors
Use icon color utilities to set [Octicons](https://primer.style/octicons) to a specific color.
2018-12-07 22:07:42 +03:00
2019-08-13 00:50:38 +03:00
```html live
2020-10-09 05:04:22 +03:00
<div class="mb-2">
<!-- <%= octicon "octoface", :height => 16, :class => "icon-primary mr-1" %> -->
2020-10-19 10:49:57 +03:00
<svg class="color-icon-primary mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
.color-icon-primary
2020-10-09 05:04:22 +03:00
</div>
<div class="mb-2">
2020-10-19 10:49:57 +03:00
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-secondary mr-1" %> -->
<svg class="color-icon-secondary mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
.color-icon-secondary
2020-10-09 05:04:22 +03:00
</div>
<div class="mb-2">
2020-10-19 10:49:57 +03:00
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-tertiary mr-1" %> -->
<svg class="color-icon-tertiary mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
.color-icon-tertiary
2020-10-09 05:04:22 +03:00
</div>
<div class="mb-2">
2020-10-19 10:49:57 +03:00
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-info mr-1" %> -->
<svg class="color-icon-info mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
.color-icon-info
2020-10-09 05:04:22 +03:00
</div>
<div class="mb-2">
2020-10-19 10:49:57 +03:00
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-success mr-1" %> -->
<svg class="color-icon-success mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
.color-icon-success
2020-10-09 05:04:22 +03:00
</div>
<div class="mb-2">
2020-10-19 10:49:57 +03:00
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-warning mr-1" %> -->
<svg class="color-icon-warning mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
.color-icon-warning
2020-10-09 05:04:22 +03:00
</div>
<div class="mb-2">
2020-10-19 10:49:57 +03:00
<!-- <%= octicon "octoface", :height => 16, :class => "color-icon-danger mr-1" %> -->
<svg class="color-icon-danger mr-1 octicon octicon-octoface" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M1.326 1.973a1.2 1.2 0 011.49-.832c.387.112.977.307 1.575.602.586.291 1.243.71 1.7 1.296.022.027.042.056.061.084A13.22 13.22 0 018 3c.67 0 1.289.037 1.861.108l.051-.07c.457-.586 1.114-1.004 1.7-1.295a9.654 9.654 0 011.576-.602 1.2 1.2 0 011.49.832c.14.493.356 1.347.479 2.29.079.604.123 1.28.07 1.936.541.977.773 2.11.773 3.301C16 13 14.5 15 8 15s-8-2-8-5.5c0-1.034.238-2.128.795-3.117-.08-.712-.034-1.46.052-2.12.122-.943.34-1.797.479-2.29zM8 13.065c6 0 6.5-2 6-4.27C13.363 5.905 11.25 5 8 5s-5.363.904-6 3.796c-.5 2.27 0 4.27 6 4.27z"></path><path d="M4 8a1 1 0 012 0v1a1 1 0 01-2 0V8zm2.078 2.492c-.083-.264.146-.492.422-.492h3c.276 0 .505.228.422.492C9.67 11.304 8.834 12 8 12c-.834 0-1.669-.696-1.922-1.508zM10 8a1 1 0 112 0v1a1 1 0 11-2 0V8z"></path></svg>
.color-icon-danger
2018-12-07 22:07:42 +03:00
</div>
```
2020-10-09 05:04:22 +03:00
## 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).
2018-12-07 22:07:42 +03:00
2019-08-13 00:50:38 +03:00
```html live
2020-10-19 10:49:57 +03:00
<div class="color-bg-canvas mb-2">.color-bg-canvas</div>
<div class="color-bg-primary mb-2">.color-bg-primary</div>
<div class="color-bg-secondary mb-2">.color-bg-secondary</div>
<div class="color-bg-tertiary mb-2">.color-bg-tertiary</div>
<div class="color-bg-info mb-2">.color-bg-info</div>
<div class="color-bg-success mb-2">.color-bg-success</div>
<div class="color-bg-warning mb-2">.color-bg-warning</div>
<div class="color-bg-danger mb-2">.color-bg-danger</div>
2018-12-07 22:07:42 +03:00
```
2020-10-09 05:04:22 +03:00
## Inversed colors
2019-06-19 03:08:54 +03:00
2020-10-09 05:04:22 +03:00
⚠️ WIP: Don't use in produciton. They might still change.
2019-06-03 21:07:36 +03:00
2020-10-19 10:49:57 +03:00
You can inverse some of the background colors to add more emphasis. Be sure to also inverse the text color (`.color-text-inverse`) to give enough contrast. An exception is the `.color-bg-warning-inverse` where the default text color should be used.
```html live
<div class="color-bg-canvas-inverse color-text-inverse mb-2">.color-bg-canvas-inverse .color-text-inverse</div>
<div class="color-bg-info-inverse color-text-inverse mb-2">.color-bg-info-inverse .color-text-inverse</div>
<div class="color-bg-success-inverse color-text-inverse mb-2">.color-bg-success-inverse .color-text-inverse</div>
<div class="color-bg-warning-inverse mb-2">.color-bg-warning-inverse</div>
<div class="color-bg-danger-inverse color-text-inverse mb-2">.color-bg-danger-inverse .color-text-inverse</div>
```
## Border colors
Override default border colors with the following utilities.
```html live
<div class="border color-border-primary mb-2">.color-border-primary</div>
<div class="border color-border-secondary mb-2">.color-border-secondary</div>
<div class="border color-border-tertiary mb-2">.color-border-tertiary</div>
<div class="border color-border-info mb-2">.color-border-info</div>
<div class="border color-border-success mb-2">.color-border-success</div>
<div class="border color-border-warning mb-2">.color-border-warning</div>
<div class="border color-border-danger mb-2">.color-border-danger</div>
<div class="color-bg-canvas-inverse color-text-inverse p-3">
<div class="border color-border-inverse">.color-border-inverse</div>
</div>
```
### 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)`.
2019-06-03 21:07:36 +03:00
2019-08-13 00:50:38 +03:00
```html live
2020-10-19 10:49:57 +03:00
<div class="border border-black-fade color-bg-info p-2 mb-2">.border-black-fade</div>
<div class="border border-black-fade color-bg-danger p-2 mb-2">.border-black-fade</div>
```
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
<div class="color-bg-info-inverse color-text-inverse p-3">
<div class="border-bottom border-white-fade-15 p-2 mb-2">
.border-white-fade-15 or .border-white-fade
</div>
<div class="border-bottom border-white-fade-30 p-2 mb-2">
.border-white-fade-30
</div>
<div class="border-bottom border-white-fade-50 p-2 mb-2">
.border-white-fade-50
</div>
<div class="border-bottom border-white-fade-70 p-2 mb-2">
.border-white-fade-70
</div>
<div class="border-bottom border-white-fade-85 p-2 mb-2">
.border-white-fade-85
</div>
</div>
2019-06-03 21:07:36 +03:00
```
2018-12-07 22:07:42 +03:00
## Link colors
2020-10-09 05:04:22 +03:00
By default `<a>` elements already use a text color that is blue and apply an underline on hover. If you need to make other elements behave like a link and perhaps use JS to trigger navigating to another page, use the `.link-primary` class.
2018-12-07 22:07:42 +03:00
2020-10-09 05:04:22 +03:00
```html live
<span class="link-primary">link-primary</span>
```
If you like to override the default link styles you can do so with text color utilities and the following link utilities. **Bear in mind that link styles are easier for more people to see and interact with when the changes in styles do not rely on color alone.**
Use `.link-secondary` to turn the link color to blue only on hover.
2018-12-07 22:07:42 +03:00
2019-08-13 00:50:38 +03:00
```html live
2020-10-09 05:04:22 +03:00
<a class="link-secondary" href="#url">link-secondary</a>
2018-12-07 22:07:42 +03:00
```
2020-10-09 05:04:22 +03:00
Use `.link-tertiary` for a more subtle link color that turns blue on hover.
2018-12-07 22:07:42 +03:00
2019-08-13 00:50:38 +03:00
```html live
2020-10-09 05:04:22 +03:00
<a class="link-tertiary" href="#url">link-tertiary</a>
2018-12-07 22:07:42 +03:00
```
2020-10-09 05:04:22 +03:00
Use `.muted-link` for a more subtle color, that turns blue on hover but with **no underline**.
2018-12-07 22:07:42 +03:00
2019-08-13 00:50:38 +03:00
```html live
2018-12-07 22:07:42 +03:00
<a class="muted-link" href="#url">muted-link</a>
```
2020-10-09 05:04:22 +03:00
Use `.link-hover-blue` to make any text color used with links to turn blue on hover. This is useful when you want only part of a link to turn blue on hover.
2018-12-07 22:07:42 +03:00
2019-08-13 00:50:38 +03:00
```html live
2020-10-19 10:49:57 +03:00
<a class="color-text-primary no-underline" href="#url">
2018-12-07 22:07:42 +03:00
A link with only part of it is <span class="link-hover-blue">blue on hover</span>.
</a>
```
2020-10-09 05:04:22 +03:00
<!-- TODO: Remove? -->
<!--
<PaletteTable>
{palettes.map(({name, title, value}) => (
<PaletteTableFragment name={name} type="bg" sparse key={name}>
<tr>
<PaletteHeading indicatorColor={value} colSpan="4">
{title}
</PaletteHeading>
</tr>
</PaletteTableFragment>
))}
</PaletteTable>
-->
<!-- TODO: Remove? -->
<!--
<PaletteTable columns={[
{
title: 'Alias',
Cell: props => <PaletteCell.Alias {...props} style={{borderBottom: `1px solid ${props.value} !important`}} />
},
'variable',
{title: 'Value', Cell: PaletteCell.Background, Value: PaletteValue.Value}
]}>
{palettes.map(({name, title, value}) => (
<PaletteTableFragment name={name} key={name} type="text" sparse prefix="color" columns={[
{
title: 'Alias',
Cell: props => <PaletteCell.Alias {...props} style={{borderBottom: `1px solid ${props.value} !important`}} />
},
'variable',
{title: 'Value', Cell: PaletteCell.Background, Value: PaletteValue.Value}
]}>
<tr>
<PaletteHeading indicatorColor={value} colSpan="4">
{title}
</PaletteHeading>
</tr>
</PaletteTableFragment>
))}
</PaletteTable>
-->
