Primer

On this page

Color

  • Experimental
  • Not reviewed for accessibility
On this page

Themes

Scales

Avoid referencing scale variables directly when building UI that needs to adapt to different color themes. Instead, use the functional variables. In rare cases, you may need to use scale variables to define custom functional variables in your application.
gray.0#f6f8fa
gray.1#eaeef2
gray.2#d0d7de
gray.3#afb8c1
gray.4#8c959f
gray.5#6e7781
gray.6#57606a
gray.7#424a53
gray.8#32383f
gray.9#24292f
blue.0#ddf4ff
blue.1#b6e3ff
blue.2#80ccff
blue.3#54aeff
blue.4#218bff
blue.5#0969da
blue.6#0550ae
blue.7#033d8b
blue.8#0a3069
blue.9#002155
green.0#dafbe1
green.1#aceebb
green.2#6fdd8b
green.3#4ac26b
green.4#2da44e
green.5#1a7f37
green.6#116329
green.7#044f1e
green.8#003d16
green.9#002d11
yellow.0#fff8c5
yellow.1#fae17d
yellow.2#eac54f
yellow.3#d4a72c
yellow.4#bf8700
yellow.5#9a6700
yellow.6#7d4e00
yellow.7#633c01
yellow.8#4d2d00
yellow.9#3b2300
orange.0#fff1e5
orange.1#ffd8b5
orange.2#ffb77c
orange.3#fb8f44
orange.4#e16f24
orange.5#bc4c00
orange.6#953800
orange.7#762c00
orange.8#5c2200
orange.9#471700
red.0#ffebe9
red.1#ffcecb
red.2#ffaba8
red.3#ff8182
red.4#fa4549
red.5#cf222e
red.6#a40e26
red.7#82071e
red.8#660018
red.9#4c0014
purple.0#fbefff
purple.1#ecd8ff
purple.2#d8b9ff
purple.3#c297ff
purple.4#a475f9
purple.5#8250df
purple.6#6639ba
purple.7#512a97
purple.8#3e1f79
purple.9#2e1461
pink.0#ffeff7
pink.1#ffd3eb
pink.2#ffadda
pink.3#ff80c8
pink.4#e85aad
pink.5#bf3989
pink.6#99286e
pink.7#772057
pink.8#611347
pink.9#4d0336
coral.0#fff0eb
coral.1#ffd6cc
coral.2#ffb4a1
coral.3#fd8c73
coral.4#ec6547
coral.5#c4432b
coral.6#9e2f1c
coral.7#801f0f
coral.8#691105
coral.9#510901
lemon.0#FDF5B3
lemon.1#F4E162
lemon.2#DEC741
lemon.3#C5AA20
lemon.4#A88D02
lemon.5#866D00
lemon.6#685400
lemon.7#534100
lemon.8#413200
lemon.9#322400
lime.0#EAFABA
lime.1#CDEC78
lime.2#B1D353
lime.3#94B83B
lime.4#799A2A
lime.5#5A791B
lime.6#425E13
lime.7#2F4A06
lime.8#233B03
lime.9#182C01
teal.0#DAF9F5
teal.1#B0EAE3
teal.2#6BD6D0
teal.3#49BCB7
teal.4#339D9B
teal.5#197B7B
teal.6#136061
teal.7#024B4D
teal.8#063A3C
teal.9#052B2C
indigo.0#EFF2FF
indigo.1#D7DDFF
indigo.2#B9C2FF
indigo.3#9AA4FF
indigo.4#7683FF
indigo.5#545DF0
indigo.6#3C42D0
indigo.7#2C33A5
indigo.8#22297F
indigo.9#191F5C
black.0#1f2328
white.0#ffffff