Color system

Color palette

Gray

Blue

Green

Purple

Yellow

Orange

Red

White

Color variables

Gray

Gray

$gray-500

#6a737d

#fafbfc

$gray-000

#f6f8fa

$gray-100

#e1e4e8

$gray-200

#d1d5da

$gray-300

#959da5

$gray-400

#6a737d

$gray-500

#586069

$gray-600

#444d56

$gray-700

#2f363d

$gray-800

#24292e

$gray-900

Blue

Blue

$blue-500

#0366d6

#f1f8ff

$blue-000

#dbedff

$blue-100

#c8e1ff

$blue-200

#79b8ff

$blue-300

#2188ff

$blue-400

#0366d6

$blue-500

#005cc5

$blue-600

#044289

$blue-700

#032f62

$blue-800

#05264c

$blue-900

Green

Green

$green-500

#28a745

#f0fff4

$green-000

#dcffe4

$green-100

#bef5cb

$green-200

#85e89d

$green-300

#34d058

$green-400

#28a745

$green-500

#22863a

$green-600

#176f2c

$green-700

#165c26

$green-800

#144620

$green-900

Yellow

Yellow

$yellow-500

#ffd33d

#fffdef

$yellow-000

#fffbdd

$yellow-100

#fff5b1

$yellow-200

#ffea7f

$yellow-300

#ffdf5d

$yellow-400

#ffd33d

$yellow-500

#f9c513

$yellow-600

#dbab09

$yellow-700

#b08800

$yellow-800

#735c0f

$yellow-900

Orange

Orange

$orange-500

#f66a0a

#fff8f2

$orange-000

#ffebda

$orange-100

#ffd1ac

$orange-200

#ffab70

$orange-300

#fb8532

$orange-400

#f66a0a

$orange-500

#e36209

$orange-600

#d15704

$orange-700

#c24e00

$orange-800

#a04100

$orange-900

Red

Red

$red-500

#d73a49

#ffeef0

$red-000

#ffdce0

$red-100

#fdaeb7

$red-200

#f97583

$red-300

#ea4a5a

$red-400

#d73a49

$red-500

#cb2431

$red-600

#b31d28

$red-700

#9e1c23

$red-800

#86181d

$red-900

Purple

Purple

$purple-500

#6f42c1

#f5f0ff

$purple-000

#e6dcfd

$purple-100

#d1bcf9

$purple-200

#b392f0

$purple-300

#8a63d2

$purple-400

#6f42c1

$purple-500

#5a32a3

$purple-600

#4c2889

$purple-700

#3a1d6e

$purple-800

#29134e

$purple-900

Black fades

Black

$black

rgb(27,31,35) #1b1f23

Black fades apply alpha transparency to the $black variable. The black color value has a slight blue hue to match our grays.

$black-fade-15

$black-fade-30

$black-fade-50

$black-fade-70

$black-fade-85

White fades

White

$white

rgb(255, 255, 255) #fff

White fades apply alpha transparency to the $white variable, below these are shown overlaid on a dark gray background.

$white-fade-15

$white-fade-30

$white-fade-50

$white-fade-70

$white-fade-85