On this page

Color

Experimental
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#f9fafb
gray.1#e9edf1
gray.2#d3d9df
gray.3#b7bfc8
gray.4#949da8
gray.5#717a84
gray.6#57606b
gray.7#424952
gray.8#31383f
gray.9#23282e
red.0#fff1f0
red.1#ffd3d1
red.2#ffb5b3
red.3#ff8785
red.4#fb5154
red.5#d52a33
red.6#a61c25
red.7#83161f
red.8#6a1019
red.9#53040e
coral.0#fff0eb
coral.1#ffd6cc
coral.2#ffb6a3
coral.3#fd8c72
coral.4#ec6546
coral.5#c5422b
coral.6#9c2f1c
coral.7#801e0f
coral.8#6b1105
coral.9#510901
orange.0#fff1e5
orange.1#ffd6b3
orange.2#ffb67a
orange.3#fb9246
orange.4#e16f23
orange.5#bd4b00
orange.6#943900
orange.7#752b00
orange.8#5c2200
orange.9#471700
yellow.0#fcf4ca
yellow.1#f6de7e
yellow.2#e7c24b
yellow.3#d2a62d
yellow.4#bd8400
yellow.5#996600
yellow.6#7a4b00
yellow.7#603a01
yellow.8#4d2d00
yellow.9#3a2203
lemon.0#fdf6b4
lemon.1#f4e162
lemon.2#ddc640
lemon.3#c5aa20
lemon.4#a78b02
lemon.5#856c00
lemon.6#665200
lemon.7#524000
lemon.8#423300
lemon.9#332500
lime.0#e9fab8
lime.1#cdec79
lime.2#b1d355
lime.3#95b93c
lime.4#77982a
lime.5#5a791b
lime.6#425d13
lime.7#304b06
lime.8#223a03
lime.9#182d01
green.0#dafbe1
green.1#aaeeba
green.2#6edd8a
green.3#4bc36b
green.4#2da44f
green.5#1a7f37
green.6#11642a
green.7#044e1e
green.8#003d16
green.9#002e12
teal.0#dcf9f5
teal.1#aeeae3
teal.2#6bd6d1
teal.3#49bcb6
teal.4#339e9c
teal.5#197b7b
teal.6#136162
teal.7#02484b
teal.8#063b3c
teal.9#052d2e
blue.0#e5f6ff
blue.1#bde6ff
blue.2#8aceff
blue.3#57b0ff
blue.4#2990ff
blue.5#096cdc
blue.6#0553b3
blue.7#034091
blue.8#0b336f
blue.9#052457
indigo.0#f0f3ff
indigo.1#d6dcff
indigo.2#b8c1ff
indigo.3#99a3ff
indigo.4#7583ff
indigo.5#565ef0
indigo.6#3e43d0
indigo.7#2c32a5
indigo.8#222a81
indigo.9#191f5c
purple.0#fbf0ff
purple.1#ebd6ff
purple.2#d8b8ff
purple.3#c499ff
purple.4#a476f9
purple.5#814edf
purple.6#673abb
purple.7#512b97
purple.8#3f1f7a
purple.9#2e1461
pink.0#fff0f7
pink.1#ffd1ea
pink.2#ffadda
pink.3#ff80c8
pink.4#e859ad
pink.5#c0398a
pink.6#9a286e
pink.7#792058
pink.8#621348
pink.9#4f0337
black.0#1a1e23
white.0#ffffff