Under the hood, all of our semantic colors above map to values in a set of color ramps, which define specific hex values. These are organized by hue.
Neutrals
White
0
#ffffff
10
rgba(255,255,255,0.05)
20
rgba(255,255,255,0.1)
30
rgba(255,255,255,0.2)
40
rgba(255,255,255,0.4)
50
rgba(255,255,255,0.7)
60
rgba(255,255,255,0.8)
70
rgba(255,255,255,0.85)
80
rgba(255,255,255,0.9)
90
rgba(255,255,255,0.95)
100
#ffffff
Black
0
#000000
10
rgba(0,0,0,0.05)
20
rgba(0,0,0,0.1)
30
rgba(0,0,0,0.2)
40
rgba(0,0,0,0.3)
50
rgba(0,0,0,0.5)
60
rgba(0,0,0,0.7)
70
rgba(0,0,0,0.8)
80
rgba(0,0,0,0.9)
90
rgba(0,0,0,0.95)
100
#000000
Gray
10
#f9f9fa
20
#f3f3f5
30
#e7e7e7
40
#cececf
50
#b5b5b7
60
#9d9da0
70
#858589
80
#6d6d71
90
#505057
100
#37373e
110
#24242b
120
#111114
Hue
Red
5
#fef2f2
10
#fee2e2
20
#fdcbcb
30
#fba6a6
40
#f67373
50
#ed4646
60
#da2828
70
#c52020
80
#981c1c
90
#7e1e1e
100
#440b0b
Orange
5
#fff4ed
10
#ffe7d4
20
#ffcaa8
30
#ffa570
40
#ff7437
50
#ff5a1f
60
#f03406
70
#c72307
80
#9e1d0e
90
#7f1c0f
100
#450a05
Yellow
5
#fdfbe9
10
#fcf6c5
20
#faeb8e
30
#f6d84e
40
#f1c21b
50
#e1ab11
60
#c2840c
70
#9b5e0d
80
#804b13
90
#6d3d16
100
#401f08
Pear
5
#fdfde8
10
#f8facd
20
#eff4a2
30
#e0eb6b
40
#d0df49
50
#b0c31f
60
#899b15
70
#677615
80
#525e16
90
#465017
100
#242c07
Lime
5
#f7fee7
10
#ecfccb
20
#d9f99d
30
#bef264
40
#a3e635
50
#84cc16
60
#65a30d
70
#4d7c0f
80
#3f6212
90
#365314
100
#1a2e05
Green
5
#f0fdf3
10
#dcfce4
20
#baf8cb
30
#85f0a3
40
#48e073
50
#20c54f
60
#15a43e
70
#148134
80
#15662d
90
#135428
100
#052e13
Teal
5
#effefc
10
#c8fff7
20
#90ffee
30
#51f7e5
40
#1de4d5
50
#05c7bb
60
#00a19a
70
#05807c
80
#0a6563
90
#0e5352
100
#003233
Ocean
5
#f0faff
10
#e1f4fd
20
#bceafb
30
#81dbf8
40
#42c9f2
50
#15b1e2
60
#0890c1
70
#08739c
80
#0b6181
90
#0f506b
100
#0a3447
Sky
5
#eff7ff
10
#e3f1ff
20
#b8e0ff
30
#79c7ff
40
#32abfe
50
#0791f0
60
#0071ce
70
#005aa6
80
#034d89
90
#094171
100
#06284b
Blue
5
#e8f7ff
10
#d5efff
20
#b3dfff
30
#85c7ff
40
#56a0ff
50
#2f79ff
60
#0c4bff
70
#003beb
80
#063bcd
90
#103a9f
100
#0a205c
Indigo
5
#f9f5ff
10
#e8e9ff
20
#d5d9ff
30
#b3b8ff
40
#888bfd
50
#6666ff
60
#4835f2
70
#3923de
80
#2f1dba
90
#291a98
100
#000066
Violet
5
#f9f5ff
10
#f0e7ff
20
#e4d4ff
30
#cfb2ff
40
#b180ff
50
#8a3ffc
60
#7c2df0
70
#691cd4
80
#5a1dac
90
#4b198a
100
#300467
Fuchsia
5
#fdf4ff
10
#fae8ff
20
#f5d0fe
30
#f0abfc
40
#e879f9
50
#d946ef
60
#c026d3
70
#a21caf
80
#86198f
90
#701a75
100
#4a044e
Pink
5
#fdf2f8
10
#fce7f3
20
#fbcfe8
30
#f9a8d4
40
#f472b6
50
#ec4899
60
#db2777
70
#be185d
80
#9d174d
90
#831843
100
#500724
Sand
5
#f8f6f4
10
#ede9e3
20
#ded6ca
30
#c8baa9
40
#b19b86
50
#a1856e
60
#947562
70
#7c6052
80
#664f46
90
#53423b
100
#2c221e
Brown
5
#f7f4ef
10
#ebe3d6
20
#d9c8af
30
#c2a682
40
#b0895f
50
#a17751