Colors

Stable

Use color utilities to apply color to the background of elements, text, and borders.

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. 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. For more information, read our accessibility standards.

Background utilities

AliasVariableValue
Gray
.bg-gray-light$gray-000#fafbfc
.bg-gray$gray-100#f6f8fa
.bg-gray-dark$gray-900#24292e
Blue
.bg-blue-light$blue-000#f1f8ff
.bg-blue$blue-500#0366d6
Green
.bg-green-light$green-100#dcffe4
.bg-green$green-500#28a745
Purple
.bg-purple-light$purple-000#f5f0ff
.bg-purple$purple-500#6f42c1
Yellow
.bg-yellow-light$yellow-200#fff5b1
.bg-yellow$yellow-500#ffd33d
.bg-yellow-dark$yellow-700#dbab09
Orange
.bg-orange$orange-700#d15704
Red
.bg-red-light$red-100#ffdce0
.bg-red$red-500#d73a49
Pink
.bg-pink$pink-500#ea4aaa

Text colors

Use text color utilities to set text or Octicons to a specific color. Color contrast must pass a minimum WCAG accessibility rating of level AA. 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. For more information, read our accessibility standards.

These are our most common text with background color combinations. They don't all pass accessibility standards currently, but will be updated in the future. ⚠️ Any of the combinations with a warning icon must be used with caution.

Text color inheritance

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

Text on white background

Text on colored backgrounds

Text color utilities

AliasVariableValue
Gray
.text-gray-light$gray-500#6a737d
.text-gray$gray-600#586069
.text-gray-dark$gray-900#24292e
Blue
.text-blue$blue-500#0366d6
Green
.text-green$green-500#28a745
Purple
.text-purple$purple-500#6f42c1
Yellow
.text-yellow$yellow-800#b08800
Orange
.text-orange-light$orange-600#e36209
.text-orange$orange-900#a04100
Red
.text-red$red-600#cb2431
Pink
.text-pink$pink-500#ea4aaa

White background

You can make a background explicitly white (#fff) with the bg-white utility:

Base link styles turn links blue and apply an underline on hover. You can override the base link styles 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-gray to turn the link color to $text-gray and remain hover on blue.

Use link-gray-dark to turn the link color to $text-gray-dark and remain hover on blue.

Use .muted-link to turn the link light gray in color, and blue on hover or focus with no underline.

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.

Border colors

Border colors are documented on the border utilities page.

Edit this page on GitHub
2 contributorssimuraicolebemis
Last edited by simurai on August 23, 2019