Design tokens
System color tokens
USWDS system color tokens are the complete palette of color tokens from which any project can build a theme palette.
Red cool
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'red-cool-5'
|
'red-cool'
|
5
|
—
|
#f8eff1
|
|
|
'red-cool-10'
|
'red-cool'
|
10
|
—
|
#f3e1e4
|
|
|
'red-cool-20'
|
'red-cool'
|
20
|
—
|
#ecbec6
|
|
|
'red-cool-30'
|
'red-cool'
|
30
|
—
|
#e09aa6
|
|
|
'red-cool-40'
|
'red-cool'
|
40
|
—
|
#e16b80
|
|
|
'red-cool-50'
|
'red-cool'
|
50
|
—
|
#cd425b
|
|
|
'red-cool-60'
|
'red-cool'
|
60
|
—
|
#9e394b
|
|
|
'red-cool-70'
|
'red-cool'
|
70
|
—
|
#68363f
|
|
|
'red-cool-80'
|
'red-cool'
|
80
|
—
|
#40282c
|
|
|
'red-cool-90'
|
'red-cool'
|
90
|
—
|
#1e1517
|
Red cool vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'red-cool-5v'
|
'red-cool-vivid'
|
5
|
'vivid'
|
#fff2f5
|
|
|
'red-cool-10v'
|
'red-cool-vivid'
|
10
|
'vivid'
|
#f8dfe2
|
|
|
'red-cool-20v'
|
'red-cool-vivid'
|
20
|
'vivid'
|
#f8b9c5
|
|
|
'red-cool-30v'
|
'red-cool-vivid'
|
30
|
'vivid'
|
#fd8ba0
|
|
|
'red-cool-40v'
|
'red-cool-vivid'
|
40
|
'vivid'
|
#f45d79
|
|
|
'red-cool-50v'
|
'red-cool-vivid'
|
50
|
'vivid'
|
#e41d3d
|
|
|
'red-cool-60v'
|
'red-cool-vivid'
|
60
|
'vivid'
|
#b21d38
|
|
|
'red-cool-70v'
|
'red-cool-vivid'
|
70
|
'vivid'
|
#822133
|
|
|
'red-cool-80v'
|
'red-cool-vivid'
|
80
|
'vivid'
|
#4f1c24
|
Red
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'red-5'
|
'red'
|
5
|
—
|
#f9eeee
|
|
|
'red-10'
|
'red'
|
10
|
—
|
#f8e1de
|
|
|
'red-20'
|
'red'
|
20
|
—
|
#f7bbb1
|
|
|
'red-30'
|
'red'
|
30
|
—
|
#f2938c
|
|
|
'red-40'
|
'red'
|
40
|
—
|
#e9695f
|
|
|
'red-50'
|
'red'
|
50
|
—
|
#d83933
|
|
|
'red-60'
|
'red'
|
60
|
—
|
#a23737
|
|
|
'red-70'
|
'red'
|
70
|
—
|
#6f3331
|
|
|
'red-80'
|
'red'
|
80
|
—
|
#3e2927
|
|
|
'red-90'
|
'red'
|
90
|
—
|
#1b1616
|
Red warm
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'red-warm-5'
|
'red-warm'
|
5
|
—
|
#f6efea
|
|
|
'red-warm-10'
|
'red-warm'
|
10
|
—
|
#f4e3db
|
|
|
'red-warm-20'
|
'red-warm'
|
20
|
—
|
#ecc0a7
|
|
|
'red-warm-30'
|
'red-warm'
|
30
|
—
|
#dca081
|
|
|
'red-warm-40'
|
'red-warm'
|
40
|
—
|
#d27a56
|
|
|
'red-warm-50'
|
'red-warm'
|
50
|
—
|
#c3512c
|
|
|
'red-warm-60'
|
'red-warm'
|
60
|
—
|
#805039
|
|
|
'red-warm-70'
|
'red-warm'
|
70
|
—
|
#524236
|
|
|
'red-warm-80'
|
'red-warm'
|
80
|
—
|
#332d29
|
|
|
'red-warm-90'
|
'red-warm'
|
90
|
—
|
#1f1c18
|
Red warm vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'red-warm-5v'
|
'red-warm-vivid'
|
5
|
'vivid'
|
#fff5ee
|
|
|
'red-warm-10v'
|
'red-warm-vivid'
|
10
|
'vivid'
|
#fce1d4
|
|
|
'red-warm-20v'
|
'red-warm-vivid'
|
20
|
'vivid'
|
#f6bd9c
|
|
|
'red-warm-30v'
|
'red-warm-vivid'
|
30
|
'vivid'
|
#f39268
|
|
|
'red-warm-40v'
|
'red-warm-vivid'
|
40
|
'vivid'
|
#ef5e25
|
|
|
'red-warm-50v'
|
'red-warm-vivid'
|
50
|
'vivid'
|
#d54309
|
|
|
'red-warm-60v'
|
'red-warm-vivid'
|
60
|
'vivid'
|
#9c3d10
|
|
|
'red-warm-70v'
|
'red-warm-vivid'
|
70
|
'vivid'
|
#63340f
|
|
|
'red-warm-80v'
|
'red-warm-vivid'
|
80
|
'vivid'
|
#3e2a1e
|
Red vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'red-5v'
|
'red-vivid'
|
5
|
'vivid'
|
#fff3f2
|
|
|
'red-10v'
|
'red-vivid'
|
10
|
'vivid'
|
#fde0db
|
|
|
'red-20v'
|
'red-vivid'
|
20
|
'vivid'
|
#fdb8ae
|
|
|
'red-30v'
|
'red-vivid'
|
30
|
'vivid'
|
#ff8d7b
|
|
|
'red-40v'
|
'red-vivid'
|
40
|
'vivid'
|
#fb5a47
|
|
|
'red-50v'
|
'red-vivid'
|
50
|
'vivid'
|
#e52207
|
|
|
'red-60v'
|
'red-vivid'
|
60
|
'vivid'
|
#b50909
|
|
|
'red-70v'
|
'red-vivid'
|
70
|
'vivid'
|
#8b0a03
|
|
|
'red-80v'
|
'red-vivid'
|
80
|
'vivid'
|
#5c1111
|
Orange warm
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'orange-warm-5'
|
'orange-warm'
|
5
|
—
|
#faeee5
|
|
|
'orange-warm-10'
|
'orange-warm'
|
10
|
—
|
#fbe0d0
|
|
|
'orange-warm-20'
|
'orange-warm'
|
20
|
—
|
#f7bca2
|
|
|
'orange-warm-30'
|
'orange-warm'
|
30
|
—
|
#f3966d
|
|
|
'orange-warm-40'
|
'orange-warm'
|
40
|
—
|
#e17141
|
|
|
'orange-warm-50'
|
'orange-warm'
|
50
|
—
|
#bd5727
|
|
|
'orange-warm-60'
|
'orange-warm'
|
60
|
—
|
#914734
|
|
|
'orange-warm-70'
|
'orange-warm'
|
70
|
—
|
#633a32
|
|
|
'orange-warm-80'
|
'orange-warm'
|
80
|
—
|
#3d2925
|
|
|
'orange-warm-90'
|
'orange-warm'
|
90
|
—
|
#1c1615
|
Orange warm vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'orange-warm-5v'
|
'orange-warm-vivid'
|
5
|
'vivid'
|
#fff3ea
|
|
|
'orange-warm-10v'
|
'orange-warm-vivid'
|
10
|
'vivid'
|
#ffe2d1
|
|
|
'orange-warm-20v'
|
'orange-warm-vivid'
|
20
|
'vivid'
|
#fbbaa7
|
|
|
'orange-warm-30v'
|
'orange-warm-vivid'
|
30
|
'vivid'
|
#fc906d
|
|
|
'orange-warm-40v'
|
'orange-warm-vivid'
|
40
|
'vivid'
|
#ff580a
|
|
|
'orange-warm-50v'
|
'orange-warm-vivid'
|
50
|
'vivid'
|
#cf4900
|
|
|
'orange-warm-60v'
|
'orange-warm-vivid'
|
60
|
'vivid'
|
#a72f10
|
|
|
'orange-warm-70v'
|
'orange-warm-vivid'
|
70
|
'vivid'
|
#782312
|
|
|
'orange-warm-80v'
|
'orange-warm-vivid'
|
80
|
'vivid'
|
#3d231d
|
Orange
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'orange-5'
|
'orange'
|
5
|
—
|
#f6efe9
|
|
|
'orange-10'
|
'orange'
|
10
|
—
|
#f2e4d4
|
|
|
'orange-20'
|
'orange'
|
20
|
—
|
#f3bf90
|
|
|
'orange-30'
|
'orange'
|
30
|
—
|
#f09860
|
|
|
'orange-40'
|
'orange'
|
40
|
—
|
#dd7533
|
|
|
'orange-50'
|
'orange'
|
50
|
—
|
#a86437
|
|
|
'orange-60'
|
'orange'
|
60
|
—
|
#775540
|
|
|
'orange-70'
|
'orange'
|
70
|
—
|
#524236
|
|
|
'orange-80'
|
'orange'
|
80
|
—
|
#332d27
|
|
|
'orange-90'
|
'orange'
|
90
|
—
|
#1b1614
|
Orange vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'orange-5v'
|
'orange-vivid'
|
5
|
'vivid'
|
#fef2e4
|
|
|
'orange-10v'
|
'orange-vivid'
|
10
|
'vivid'
|
#fce2c5
|
|
|
'orange-20v'
|
'orange-vivid'
|
20
|
'vivid'
|
#ffbc78
|
|
|
'orange-30v'
|
'orange-vivid'
|
30
|
'vivid'
|
#fa9441
|
|
|
'orange-40v'
|
'orange-vivid'
|
40
|
'vivid'
|
#e66f0e
|
|
|
'orange-50v'
|
'orange-vivid'
|
50
|
'vivid'
|
#c05600
|
|
|
'orange-60v'
|
'orange-vivid'
|
60
|
'vivid'
|
#8c471c
|
|
|
'orange-70v'
|
'orange-vivid'
|
70
|
'vivid'
|
#5f3617
|
|
|
'orange-80v'
|
'orange-vivid'
|
80
|
'vivid'
|
#352313
|
Gold
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'gold-5'
|
'gold'
|
5
|
—
|
#f5f0e6
|
|
|
'gold-10'
|
'gold'
|
10
|
—
|
#f1e5cd
|
|
|
'gold-20'
|
'gold'
|
20
|
—
|
#dec69a
|
|
|
'gold-30'
|
'gold'
|
30
|
—
|
#c7a97b
|
|
|
'gold-40'
|
'gold'
|
40
|
—
|
#ad8b65
|
|
|
'gold-50'
|
'gold'
|
50
|
—
|
#8e704f
|
|
|
'gold-60'
|
'gold'
|
60
|
—
|
#6b5947
|
|
|
'gold-70'
|
'gold'
|
70
|
—
|
#4d4438
|
|
|
'gold-80'
|
'gold'
|
80
|
—
|
#322d26
|
|
|
'gold-90'
|
'gold'
|
90
|
—
|
#191714
|
Gold vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'gold-5v'
|
'gold-vivid'
|
5
|
'vivid'
|
#fef0c8
|
|
|
'gold-10v'
|
'gold-vivid'
|
10
|
'vivid'
|
#ffe396
|
|
|
'gold-20v'
|
'gold-vivid'
|
20
|
'vivid'
|
#ffbe2e
|
|
|
'gold-30v'
|
'gold-vivid'
|
30
|
'vivid'
|
#e5a000
|
|
|
'gold-40v'
|
'gold-vivid'
|
40
|
'vivid'
|
#c2850c
|
|
|
'gold-50v'
|
'gold-vivid'
|
50
|
'vivid'
|
#936f38
|
|
|
'gold-60v'
|
'gold-vivid'
|
60
|
'vivid'
|
#7a591a
|
|
|
'gold-70v'
|
'gold-vivid'
|
70
|
'vivid'
|
#5c410a
|
|
|
'gold-80v'
|
'gold-vivid'
|
80
|
'vivid'
|
#3b2b15
|
Yellow
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'yellow-5'
|
'yellow'
|
5
|
—
|
#faf3d1
|
|
|
'yellow-10'
|
'yellow'
|
10
|
—
|
#f5e6af
|
|
|
'yellow-20'
|
'yellow'
|
20
|
—
|
#e6c74c
|
|
|
'yellow-30'
|
'yellow'
|
30
|
—
|
#c9ab48
|
|
|
'yellow-40'
|
'yellow'
|
40
|
—
|
#a88f48
|
|
|
'yellow-50'
|
'yellow'
|
50
|
—
|
#8a7237
|
|
|
'yellow-60'
|
'yellow'
|
60
|
—
|
#6b5a39
|
|
|
'yellow-70'
|
'yellow'
|
70
|
—
|
#504332
|
|
|
'yellow-80'
|
'yellow'
|
80
|
—
|
#332d27
|
|
|
'yellow-90'
|
'yellow'
|
90
|
—
|
#1a1614
|
Yellow vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'yellow-5v'
|
'yellow-vivid'
|
5
|
'vivid'
|
#fff5c2
|
|
|
'yellow-10v'
|
'yellow-vivid'
|
10
|
'vivid'
|
#fee685
|
|
|
'yellow-20v'
|
'yellow-vivid'
|
20
|
'vivid'
|
#face00
|
|
|
'yellow-30v'
|
'yellow-vivid'
|
30
|
'vivid'
|
#ddaa01
|
|
|
'yellow-40v'
|
'yellow-vivid'
|
40
|
'vivid'
|
#b38c00
|
|
|
'yellow-50v'
|
'yellow-vivid'
|
50
|
'vivid'
|
#947100
|
|
|
'yellow-60v'
|
'yellow-vivid'
|
60
|
'vivid'
|
#776017
|
|
|
'yellow-70v'
|
'yellow-vivid'
|
70
|
'vivid'
|
#5c4809
|
|
|
'yellow-80v'
|
'yellow-vivid'
|
80
|
'vivid'
|
#422d19
|
Green warm
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'green-warm-5'
|
'green-warm'
|
5
|
—
|
#f1f4d7
|
|
|
'green-warm-10'
|
'green-warm'
|
10
|
—
|
#e7eab7
|
|
|
'green-warm-20'
|
'green-warm'
|
20
|
—
|
#cbd17a
|
|
|
'green-warm-30'
|
'green-warm'
|
30
|
—
|
#a6b557
|
|
|
'green-warm-40'
|
'green-warm'
|
40
|
—
|
#8a984b
|
|
|
'green-warm-50'
|
'green-warm'
|
50
|
—
|
#6f7a41
|
|
|
'green-warm-60'
|
'green-warm'
|
60
|
—
|
#5a5f38
|
|
|
'green-warm-70'
|
'green-warm'
|
70
|
—
|
#45472f
|
|
|
'green-warm-80'
|
'green-warm'
|
80
|
—
|
#2d2f21
|
|
|
'green-warm-90'
|
'green-warm'
|
90
|
—
|
#171712
|
Green warm vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'green-warm-5v'
|
'green-warm-vivid'
|
5
|
'vivid'
|
#f5fbc1
|
|
|
'green-warm-10v'
|
'green-warm-vivid'
|
10
|
'vivid'
|
#e7f434
|
|
|
'green-warm-20v'
|
'green-warm-vivid'
|
20
|
'vivid'
|
#c5d30a
|
|
|
'green-warm-30v'
|
'green-warm-vivid'
|
30
|
'vivid'
|
#a3b72c
|
|
|
'green-warm-40v'
|
'green-warm-vivid'
|
40
|
'vivid'
|
#7e9c1d
|
|
|
'green-warm-50v'
|
'green-warm-vivid'
|
50
|
'vivid'
|
#6a7d00
|
|
|
'green-warm-60v'
|
'green-warm-vivid'
|
60
|
'vivid'
|
#5a6613
|
|
|
'green-warm-70v'
|
'green-warm-vivid'
|
70
|
'vivid'
|
#4b4e10
|
|
|
'green-warm-80v'
|
'green-warm-vivid'
|
80
|
'vivid'
|
#38380b
|
Green
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'green-5'
|
'green'
|
5
|
—
|
#eaf4dd
|
|
|
'green-10'
|
'green'
|
10
|
—
|
#dfeacd
|
|
|
'green-20'
|
'green'
|
20
|
—
|
#b8d293
|
|
|
'green-30'
|
'green'
|
30
|
—
|
#9bb672
|
|
|
'green-40'
|
'green'
|
40
|
—
|
#7d9b4e
|
|
|
'green-50'
|
'green'
|
50
|
—
|
#607f35
|
|
|
'green-60'
|
'green'
|
60
|
—
|
#4c6424
|
|
|
'green-70'
|
'green'
|
70
|
—
|
#3c4a29
|
|
|
'green-80'
|
'green'
|
80
|
—
|
#293021
|
|
|
'green-90'
|
'green'
|
90
|
—
|
#161814
|
Green vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'green-5v'
|
'green-vivid'
|
5
|
'vivid'
|
#ddf9c7
|
|
|
'green-10v'
|
'green-vivid'
|
10
|
'vivid'
|
#c5ee93
|
|
|
'green-20v'
|
'green-vivid'
|
20
|
'vivid'
|
#98d035
|
|
|
'green-30v'
|
'green-vivid'
|
30
|
'vivid'
|
#7fb135
|
|
|
'green-40v'
|
'green-vivid'
|
40
|
'vivid'
|
#719f2a
|
|
|
'green-50v'
|
'green-vivid'
|
50
|
'vivid'
|
#538200
|
|
|
'green-60v'
|
'green-vivid'
|
60
|
'vivid'
|
#466c04
|
|
|
'green-70v'
|
'green-vivid'
|
70
|
'vivid'
|
#2f4a0b
|
|
|
'green-80v'
|
'green-vivid'
|
80
|
'vivid'
|
#243413
|
Green cool
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'green-cool-5'
|
'green-cool'
|
5
|
—
|
#ecf3ec
|
|
|
'green-cool-10'
|
'green-cool'
|
10
|
—
|
#dbebde
|
|
|
'green-cool-20'
|
'green-cool'
|
20
|
—
|
#b4d0b9
|
|
|
'green-cool-30'
|
'green-cool'
|
30
|
—
|
#86b98e
|
|
|
'green-cool-40'
|
'green-cool'
|
40
|
—
|
#5e9f69
|
|
|
'green-cool-50'
|
'green-cool'
|
50
|
—
|
#4d8055
|
|
|
'green-cool-60'
|
'green-cool'
|
60
|
—
|
#446443
|
|
|
'green-cool-70'
|
'green-cool'
|
70
|
—
|
#37493b
|
|
|
'green-cool-80'
|
'green-cool'
|
80
|
—
|
#28312a
|
|
|
'green-cool-90'
|
'green-cool'
|
90
|
—
|
#1a1f1a
|
Green cool vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'green-cool-5v'
|
'green-cool-vivid'
|
5
|
'vivid'
|
#e3f5e1
|
|
|
'green-cool-10v'
|
'green-cool-vivid'
|
10
|
'vivid'
|
#b7f5bd
|
|
|
'green-cool-20v'
|
'green-cool-vivid'
|
20
|
'vivid'
|
#70e17b
|
|
|
'green-cool-30v'
|
'green-cool-vivid'
|
30
|
'vivid'
|
#21c834
|
|
|
'green-cool-40v'
|
'green-cool-vivid'
|
40
|
'vivid'
|
#00a91c
|
|
|
'green-cool-50v'
|
'green-cool-vivid'
|
50
|
'vivid'
|
#008817
|
|
|
'green-cool-60v'
|
'green-cool-vivid'
|
60
|
'vivid'
|
#216e1f
|
|
|
'green-cool-70v'
|
'green-cool-vivid'
|
70
|
'vivid'
|
#154c21
|
|
|
'green-cool-80v'
|
'green-cool-vivid'
|
80
|
'vivid'
|
#19311e
|
Mint
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'mint-5'
|
'mint'
|
5
|
—
|
#dbf6ed
|
|
|
'mint-10'
|
'mint'
|
10
|
—
|
#c7efe2
|
|
|
'mint-20'
|
'mint'
|
20
|
—
|
#92d9bb
|
|
|
'mint-30'
|
'mint'
|
30
|
—
|
#5abf95
|
|
|
'mint-40'
|
'mint'
|
40
|
—
|
#34a37e
|
|
|
'mint-50'
|
'mint'
|
50
|
—
|
#2e8367
|
|
|
'mint-60'
|
'mint'
|
60
|
—
|
#286846
|
|
|
'mint-70'
|
'mint'
|
70
|
—
|
#204e34
|
|
|
'mint-80'
|
'mint'
|
80
|
—
|
#193324
|
|
|
'mint-90'
|
'mint'
|
90
|
—
|
#0d1a12
|
Mint vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'mint-5v'
|
'mint-vivid'
|
5
|
'vivid'
|
#c9fbeb
|
|
|
'mint-10v'
|
'mint-vivid'
|
10
|
'vivid'
|
#83fcd4
|
|
|
'mint-20v'
|
'mint-vivid'
|
20
|
'vivid'
|
#0ceda6
|
|
|
'mint-30v'
|
'mint-vivid'
|
30
|
'vivid'
|
#04c585
|
|
|
'mint-40v'
|
'mint-vivid'
|
40
|
'vivid'
|
#00a871
|
|
|
'mint-50v'
|
'mint-vivid'
|
50
|
'vivid'
|
#008659
|
|
|
'mint-60v'
|
'mint-vivid'
|
60
|
'vivid'
|
#146947
|
|
|
'mint-70v'
|
'mint-vivid'
|
70
|
'vivid'
|
#0c4e29
|
|
|
'mint-80v'
|
'mint-vivid'
|
80
|
'vivid'
|
#0d351e
|
Mint cool
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'mint-cool-5'
|
'mint-cool'
|
5
|
—
|
#e0f7f6
|
|
|
'mint-cool-10'
|
'mint-cool'
|
10
|
—
|
#c4eeeb
|
|
|
'mint-cool-20'
|
'mint-cool'
|
20
|
—
|
#9bd4cf
|
|
|
'mint-cool-30'
|
'mint-cool'
|
30
|
—
|
#6fbab3
|
|
|
'mint-cool-40'
|
'mint-cool'
|
40
|
—
|
#4f9e99
|
|
|
'mint-cool-50'
|
'mint-cool'
|
50
|
—
|
#40807e
|
|
|
'mint-cool-60'
|
'mint-cool'
|
60
|
—
|
#376462
|
|
|
'mint-cool-70'
|
'mint-cool'
|
70
|
—
|
#2a4b45
|
|
|
'mint-cool-80'
|
'mint-cool'
|
80
|
—
|
#203131
|
|
|
'mint-cool-90'
|
'mint-cool'
|
90
|
—
|
#111818
|
Mint cool vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'mint-cool-5v'
|
'mint-cool-vivid'
|
5
|
'vivid'
|
#d5fbf3
|
|
|
'mint-cool-10v'
|
'mint-cool-vivid'
|
10
|
'vivid'
|
#7efbe1
|
|
|
'mint-cool-20v'
|
'mint-cool-vivid'
|
20
|
'vivid'
|
#29e1cb
|
|
|
'mint-cool-30v'
|
'mint-cool-vivid'
|
30
|
'vivid'
|
#1dc2ae
|
|
|
'mint-cool-40v'
|
'mint-cool-vivid'
|
40
|
'vivid'
|
#00a398
|
|
|
'mint-cool-50v'
|
'mint-cool-vivid'
|
50
|
'vivid'
|
#008480
|
|
|
'mint-cool-60v'
|
'mint-cool-vivid'
|
60
|
'vivid'
|
#0f6460
|
|
|
'mint-cool-70v'
|
'mint-cool-vivid'
|
70
|
'vivid'
|
#0b4b3f
|
|
|
'mint-cool-80v'
|
'mint-cool-vivid'
|
80
|
'vivid'
|
#123131
|
Cyan
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'cyan-5'
|
'cyan'
|
5
|
—
|
#e7f6f8
|
|
|
'cyan-10'
|
'cyan'
|
10
|
—
|
#ccecf2
|
|
|
'cyan-20'
|
'cyan'
|
20
|
—
|
#99deea
|
|
|
'cyan-30'
|
'cyan'
|
30
|
—
|
#5dc0d1
|
|
|
'cyan-40'
|
'cyan'
|
40
|
—
|
#449dac
|
|
|
'cyan-50'
|
'cyan'
|
50
|
—
|
#168092
|
|
|
'cyan-60'
|
'cyan'
|
60
|
—
|
#2a646d
|
|
|
'cyan-70'
|
'cyan'
|
70
|
—
|
#2c4a4e
|
|
|
'cyan-80'
|
'cyan'
|
80
|
—
|
#203133
|
|
|
'cyan-90'
|
'cyan'
|
90
|
—
|
#111819
|
Cyan vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'cyan-5v'
|
'cyan-vivid'
|
5
|
'vivid'
|
#e5faff
|
|
|
'cyan-10v'
|
'cyan-vivid'
|
10
|
'vivid'
|
#a8f2ff
|
|
|
'cyan-20v'
|
'cyan-vivid'
|
20
|
'vivid'
|
#52daf2
|
|
|
'cyan-30v'
|
'cyan-vivid'
|
30
|
'vivid'
|
#00bde3
|
|
|
'cyan-40v'
|
'cyan-vivid'
|
40
|
'vivid'
|
#009ec1
|
|
|
'cyan-50v'
|
'cyan-vivid'
|
50
|
'vivid'
|
#0081a1
|
|
|
'cyan-60v'
|
'cyan-vivid'
|
60
|
'vivid'
|
#00687d
|
|
|
'cyan-70v'
|
'cyan-vivid'
|
70
|
'vivid'
|
#0e4f5c
|
|
|
'cyan-80v'
|
'cyan-vivid'
|
80
|
'vivid'
|
#093b44
|
Blue cool
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'blue-cool-5'
|
'blue-cool'
|
5
|
—
|
#e7f2f5
|
|
|
'blue-cool-10'
|
'blue-cool'
|
10
|
—
|
#dae9ee
|
|
|
'blue-cool-20'
|
'blue-cool'
|
20
|
—
|
#adcfdc
|
|
|
'blue-cool-30'
|
'blue-cool'
|
30
|
—
|
#82b4c9
|
|
|
'blue-cool-40'
|
'blue-cool'
|
40
|
—
|
#6499af
|
|
|
'blue-cool-50'
|
'blue-cool'
|
50
|
—
|
#3a7d95
|
|
|
'blue-cool-60'
|
'blue-cool'
|
60
|
—
|
#2e6276
|
|
|
'blue-cool-70'
|
'blue-cool'
|
70
|
—
|
#224a58
|
|
|
'blue-cool-80'
|
'blue-cool'
|
80
|
—
|
#14333d
|
|
|
'blue-cool-90'
|
'blue-cool'
|
90
|
—
|
#0f191c
|
Blue cool vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'blue-cool-5v'
|
'blue-cool-vivid'
|
5
|
'vivid'
|
#e1f3f8
|
|
|
'blue-cool-10v'
|
'blue-cool-vivid'
|
10
|
'vivid'
|
#c3ebfa
|
|
|
'blue-cool-20v'
|
'blue-cool-vivid'
|
20
|
'vivid'
|
#97d4ea
|
|
|
'blue-cool-30v'
|
'blue-cool-vivid'
|
30
|
'vivid'
|
#59b9de
|
|
|
'blue-cool-40v'
|
'blue-cool-vivid'
|
40
|
'vivid'
|
#28a0cb
|
|
|
'blue-cool-50v'
|
'blue-cool-vivid'
|
50
|
'vivid'
|
#0d7ea2
|
|
|
'blue-cool-60v'
|
'blue-cool-vivid'
|
60
|
'vivid'
|
#07648d
|
|
|
'blue-cool-70v'
|
'blue-cool-vivid'
|
70
|
'vivid'
|
#074b69
|
|
|
'blue-cool-80v'
|
'blue-cool-vivid'
|
80
|
'vivid'
|
#002d3f
|
Blue
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'blue-5'
|
'blue'
|
5
|
—
|
#eff6fb
|
|
|
'blue-10'
|
'blue'
|
10
|
—
|
#d9e8f6
|
|
|
'blue-20'
|
'blue'
|
20
|
—
|
#aacdec
|
|
|
'blue-30'
|
'blue'
|
30
|
—
|
#73b3e7
|
|
|
'blue-40'
|
'blue'
|
40
|
—
|
#4f97d1
|
|
|
'blue-50'
|
'blue'
|
50
|
—
|
#2378c3
|
|
|
'blue-60'
|
'blue'
|
60
|
—
|
#2c608a
|
|
|
'blue-70'
|
'blue'
|
70
|
—
|
#274863
|
|
|
'blue-80'
|
'blue'
|
80
|
—
|
#1f303e
|
|
|
'blue-90'
|
'blue'
|
90
|
—
|
#11181d
|
Blue vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'blue-5v'
|
'blue-vivid'
|
5
|
'vivid'
|
#e8f5ff
|
|
|
'blue-10v'
|
'blue-vivid'
|
10
|
'vivid'
|
#cfe8ff
|
|
|
'blue-20v'
|
'blue-vivid'
|
20
|
'vivid'
|
#a1d3ff
|
|
|
'blue-30v'
|
'blue-vivid'
|
30
|
'vivid'
|
#58b4ff
|
|
|
'blue-40v'
|
'blue-vivid'
|
40
|
'vivid'
|
#2491ff
|
|
|
'blue-50v'
|
'blue-vivid'
|
50
|
'vivid'
|
#0076d6
|
|
|
'blue-60v'
|
'blue-vivid'
|
60
|
'vivid'
|
#005ea2
|
|
|
'blue-70v'
|
'blue-vivid'
|
70
|
'vivid'
|
#0b4778
|
|
|
'blue-80v'
|
'blue-vivid'
|
80
|
'vivid'
|
#112f4e
|
Blue warm
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'blue-warm-5'
|
'blue-warm'
|
5
|
—
|
#ecf1f7
|
|
|
'blue-warm-10'
|
'blue-warm'
|
10
|
—
|
#e1e7f1
|
|
|
'blue-warm-20'
|
'blue-warm'
|
20
|
—
|
#bbcae4
|
|
|
'blue-warm-30'
|
'blue-warm'
|
30
|
—
|
#98afd2
|
|
|
'blue-warm-40'
|
'blue-warm'
|
40
|
—
|
#7292c7
|
|
|
'blue-warm-50'
|
'blue-warm'
|
50
|
—
|
#4a77b4
|
|
|
'blue-warm-60'
|
'blue-warm'
|
60
|
—
|
#345d96
|
|
|
'blue-warm-70'
|
'blue-warm'
|
70
|
—
|
#2f4668
|
|
|
'blue-warm-80'
|
'blue-warm'
|
80
|
—
|
#252f3e
|
|
|
'blue-warm-90'
|
'blue-warm'
|
90
|
—
|
#13171f
|
Blue warm vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'blue-warm-5v'
|
'blue-warm-vivid'
|
5
|
'vivid'
|
#edf5ff
|
|
|
'blue-warm-10v'
|
'blue-warm-vivid'
|
10
|
'vivid'
|
#d4e5ff
|
|
|
'blue-warm-20v'
|
'blue-warm-vivid'
|
20
|
'vivid'
|
#adcdff
|
|
|
'blue-warm-30v'
|
'blue-warm-vivid'
|
30
|
'vivid'
|
#81aefc
|
|
|
'blue-warm-40v'
|
'blue-warm-vivid'
|
40
|
'vivid'
|
#5994f6
|
|
|
'blue-warm-50v'
|
'blue-warm-vivid'
|
50
|
'vivid'
|
#2672de
|
|
|
'blue-warm-60v'
|
'blue-warm-vivid'
|
60
|
'vivid'
|
#0050d8
|
|
|
'blue-warm-70v'
|
'blue-warm-vivid'
|
70
|
'vivid'
|
#1a4480
|
|
|
'blue-warm-80v'
|
'blue-warm-vivid'
|
80
|
'vivid'
|
#162e51
|
Indigo cool
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'indigo-cool-5'
|
'indigo-cool'
|
5
|
—
|
#eef0f9
|
|
|
'indigo-cool-10'
|
'indigo-cool'
|
10
|
—
|
#e1e6f9
|
|
|
'indigo-cool-20'
|
'indigo-cool'
|
20
|
—
|
#bbc8f5
|
|
|
'indigo-cool-30'
|
'indigo-cool'
|
30
|
—
|
#96abee
|
|
|
'indigo-cool-40'
|
'indigo-cool'
|
40
|
—
|
#6b8ee8
|
|
|
'indigo-cool-50'
|
'indigo-cool'
|
50
|
—
|
#496fd8
|
|
|
'indigo-cool-60'
|
'indigo-cool'
|
60
|
—
|
#3f57a6
|
|
|
'indigo-cool-70'
|
'indigo-cool'
|
70
|
—
|
#374274
|
|
|
'indigo-cool-80'
|
'indigo-cool'
|
80
|
—
|
#292d42
|
|
|
'indigo-cool-90'
|
'indigo-cool'
|
90
|
—
|
#151622
|
Indigo cool vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'indigo-cool-5v'
|
'indigo-cool-vivid'
|
5
|
'vivid'
|
#edf0ff
|
|
|
'indigo-cool-10v'
|
'indigo-cool-vivid'
|
10
|
'vivid'
|
#dee5ff
|
|
|
'indigo-cool-20v'
|
'indigo-cool-vivid'
|
20
|
'vivid'
|
#b8c8ff
|
|
|
'indigo-cool-30v'
|
'indigo-cool-vivid'
|
30
|
'vivid'
|
#94adff
|
|
|
'indigo-cool-40v'
|
'indigo-cool-vivid'
|
40
|
'vivid'
|
#628ef4
|
|
|
'indigo-cool-50v'
|
'indigo-cool-vivid'
|
50
|
'vivid'
|
#4866ff
|
|
|
'indigo-cool-60v'
|
'indigo-cool-vivid'
|
60
|
'vivid'
|
#3e4ded
|
|
|
'indigo-cool-70v'
|
'indigo-cool-vivid'
|
70
|
'vivid'
|
#222fbf
|
|
|
'indigo-cool-80v'
|
'indigo-cool-vivid'
|
80
|
'vivid'
|
#1b2b85
|
Indigo
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'indigo-5'
|
'indigo'
|
5
|
—
|
#efeff8
|
|
|
'indigo-10'
|
'indigo'
|
10
|
—
|
#e5e4fa
|
|
|
'indigo-20'
|
'indigo'
|
20
|
—
|
#c5c5f3
|
|
|
'indigo-30'
|
'indigo'
|
30
|
—
|
#a5a8eb
|
|
|
'indigo-40'
|
'indigo'
|
40
|
—
|
#8889db
|
|
|
'indigo-50'
|
'indigo'
|
50
|
—
|
#676cc8
|
|
|
'indigo-60'
|
'indigo'
|
60
|
—
|
#4d52af
|
|
|
'indigo-70'
|
'indigo'
|
70
|
—
|
#3d4076
|
|
|
'indigo-80'
|
'indigo'
|
80
|
—
|
#2b2c40
|
|
|
'indigo-90'
|
'indigo'
|
90
|
—
|
#16171f
|
Indigo vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'indigo-5v'
|
'indigo-vivid'
|
5
|
'vivid'
|
#f0f0ff
|
|
|
'indigo-10v'
|
'indigo-vivid'
|
10
|
'vivid'
|
#e0e0ff
|
|
|
'indigo-20v'
|
'indigo-vivid'
|
20
|
'vivid'
|
#ccceff
|
|
|
'indigo-30v'
|
'indigo-vivid'
|
30
|
'vivid'
|
#a3a7fa
|
|
|
'indigo-40v'
|
'indigo-vivid'
|
40
|
'vivid'
|
#8289ff
|
|
|
'indigo-50v'
|
'indigo-vivid'
|
50
|
'vivid'
|
#656bd7
|
|
|
'indigo-60v'
|
'indigo-vivid'
|
60
|
'vivid'
|
#4a50c4
|
|
|
'indigo-70v'
|
'indigo-vivid'
|
70
|
'vivid'
|
#3333a3
|
|
|
'indigo-80v'
|
'indigo-vivid'
|
80
|
'vivid'
|
#212463
|
Indigo warm
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'indigo-warm-5'
|
'indigo-warm'
|
5
|
—
|
#f1eff7
|
|
|
'indigo-warm-10'
|
'indigo-warm'
|
10
|
—
|
#e7e3fa
|
|
|
'indigo-warm-20'
|
'indigo-warm'
|
20
|
—
|
#cbc4f2
|
|
|
'indigo-warm-30'
|
'indigo-warm'
|
30
|
—
|
#afa5e8
|
|
|
'indigo-warm-40'
|
'indigo-warm'
|
40
|
—
|
#9287d8
|
|
|
'indigo-warm-50'
|
'indigo-warm'
|
50
|
—
|
#7665d1
|
|
|
'indigo-warm-60'
|
'indigo-warm'
|
60
|
—
|
#5e519e
|
|
|
'indigo-warm-70'
|
'indigo-warm'
|
70
|
—
|
#453c7b
|
|
|
'indigo-warm-80'
|
'indigo-warm'
|
80
|
—
|
#2e2c40
|
|
|
'indigo-warm-90'
|
'indigo-warm'
|
90
|
—
|
#18161d
|
Indigo warm vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'indigo-warm-5v'
|
'indigo-warm-vivid'
|
5
|
'vivid'
|
#f5f2ff
|
|
|
'indigo-warm-10v'
|
'indigo-warm-vivid'
|
10
|
'vivid'
|
#e4deff
|
|
|
'indigo-warm-20v'
|
'indigo-warm-vivid'
|
20
|
'vivid'
|
#cfc4fd
|
|
|
'indigo-warm-30v'
|
'indigo-warm-vivid'
|
30
|
'vivid'
|
#b69fff
|
|
|
'indigo-warm-40v'
|
'indigo-warm-vivid'
|
40
|
'vivid'
|
#967efb
|
|
|
'indigo-warm-50v'
|
'indigo-warm-vivid'
|
50
|
'vivid'
|
#745fe9
|
|
|
'indigo-warm-60v'
|
'indigo-warm-vivid'
|
60
|
'vivid'
|
#5942d2
|
|
|
'indigo-warm-70v'
|
'indigo-warm-vivid'
|
70
|
'vivid'
|
#3d2c9d
|
|
|
'indigo-warm-80v'
|
'indigo-warm-vivid'
|
80
|
'vivid'
|
#261f5b
|
Violet
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'violet-5'
|
'violet'
|
5
|
—
|
#f4f1f9
|
|
|
'violet-10'
|
'violet'
|
10
|
—
|
#ebe3f9
|
|
|
'violet-20'
|
'violet'
|
20
|
—
|
#d0c3e9
|
|
|
'violet-30'
|
'violet'
|
30
|
—
|
#b8a2e3
|
|
|
'violet-40'
|
'violet'
|
40
|
—
|
#9d84d2
|
|
|
'violet-50'
|
'violet'
|
50
|
—
|
#8168b3
|
|
|
'violet-60'
|
'violet'
|
60
|
—
|
#665190
|
|
|
'violet-70'
|
'violet'
|
70
|
—
|
#4c3d69
|
|
|
'violet-80'
|
'violet'
|
80
|
—
|
#312b3f
|
|
|
'violet-90'
|
'violet'
|
90
|
—
|
#18161d
|
Violet vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'violet-5v'
|
'violet-vivid'
|
5
|
'vivid'
|
#f7f2ff
|
|
|
'violet-10v'
|
'violet-vivid'
|
10
|
'vivid'
|
#ede3ff
|
|
|
'violet-20v'
|
'violet-vivid'
|
20
|
'vivid'
|
#d5bfff
|
|
|
'violet-30v'
|
'violet-vivid'
|
30
|
'vivid'
|
#c39deb
|
|
|
'violet-40v'
|
'violet-vivid'
|
40
|
'vivid'
|
#ad79e9
|
|
|
'violet-50v'
|
'violet-vivid'
|
50
|
'vivid'
|
#9355dc
|
|
|
'violet-60v'
|
'violet-vivid'
|
60
|
'vivid'
|
#783cb9
|
|
|
'violet-70v'
|
'violet-vivid'
|
70
|
'vivid'
|
#54278f
|
|
|
'violet-80v'
|
'violet-vivid'
|
80
|
'vivid'
|
#39215e
|
Violet warm
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'violet-warm-5'
|
'violet-warm'
|
5
|
—
|
#f8f0f9
|
|
|
'violet-warm-10'
|
'violet-warm'
|
10
|
—
|
#f6dff8
|
|
|
'violet-warm-20'
|
'violet-warm'
|
20
|
—
|
#e2bee4
|
|
|
'violet-warm-30'
|
'violet-warm'
|
30
|
—
|
#d29ad8
|
|
|
'violet-warm-40'
|
'violet-warm'
|
40
|
—
|
#bf77c8
|
|
|
'violet-warm-50'
|
'violet-warm'
|
50
|
—
|
#b04abd
|
|
|
'violet-warm-60'
|
'violet-warm'
|
60
|
—
|
#864381
|
|
|
'violet-warm-70'
|
'violet-warm'
|
70
|
—
|
#5c395a
|
|
|
'violet-warm-80'
|
'violet-warm'
|
80
|
—
|
#382936
|
|
|
'violet-warm-90'
|
'violet-warm'
|
90
|
—
|
#1b151b
|
Violet warm vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'violet-warm-5v'
|
'violet-warm-vivid'
|
5
|
'vivid'
|
#fef2ff
|
|
|
'violet-warm-10v'
|
'violet-warm-vivid'
|
10
|
'vivid'
|
#fbdcff
|
|
|
'violet-warm-20v'
|
'violet-warm-vivid'
|
20
|
'vivid'
|
#f4b2ff
|
|
|
'violet-warm-30v'
|
'violet-warm-vivid'
|
30
|
'vivid'
|
#ee83ff
|
|
|
'violet-warm-40v'
|
'violet-warm-vivid'
|
40
|
'vivid'
|
#d85bef
|
|
|
'violet-warm-50v'
|
'violet-warm-vivid'
|
50
|
'vivid'
|
#be32d0
|
|
|
'violet-warm-60v'
|
'violet-warm-vivid'
|
60
|
'vivid'
|
#93348c
|
|
|
'violet-warm-70v'
|
'violet-warm-vivid'
|
70
|
'vivid'
|
#711e6c
|
|
|
'violet-warm-80v'
|
'violet-warm-vivid'
|
80
|
'vivid'
|
#481441
|
Magenta
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'magenta-5'
|
'magenta'
|
5
|
—
|
#f9f0f2
|
|
|
'magenta-10'
|
'magenta'
|
10
|
—
|
#f6e1e8
|
|
|
'magenta-20'
|
'magenta'
|
20
|
—
|
#f0bbcc
|
|
|
'magenta-30'
|
'magenta'
|
30
|
—
|
#e895b3
|
|
|
'magenta-40'
|
'magenta'
|
40
|
—
|
#e0699f
|
|
|
'magenta-50'
|
'magenta'
|
50
|
—
|
#c84281
|
|
|
'magenta-60'
|
'magenta'
|
60
|
—
|
#8b4566
|
|
|
'magenta-70'
|
'magenta'
|
70
|
—
|
#66364b
|
|
|
'magenta-80'
|
'magenta'
|
80
|
—
|
#402731
|
|
|
'magenta-90'
|
'magenta'
|
90
|
—
|
#1b1617
|
Magenta vivid
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'magenta-5v'
|
'magenta-vivid'
|
5
|
'vivid'
|
#fff2f5
|
|
|
'magenta-10v'
|
'magenta-vivid'
|
10
|
'vivid'
|
#ffddea
|
|
|
'magenta-20v'
|
'magenta-vivid'
|
20
|
'vivid'
|
#ffb4cf
|
|
|
'magenta-30v'
|
'magenta-vivid'
|
30
|
'vivid'
|
#ff87b2
|
|
|
'magenta-40v'
|
'magenta-vivid'
|
40
|
'vivid'
|
#fd4496
|
|
|
'magenta-50v'
|
'magenta-vivid'
|
50
|
'vivid'
|
#d72d79
|
|
|
'magenta-60v'
|
'magenta-vivid'
|
60
|
'vivid'
|
#ab2165
|
|
|
'magenta-70v'
|
'magenta-vivid'
|
70
|
'vivid'
|
#731f44
|
|
|
'magenta-80v'
|
'magenta-vivid'
|
80
|
'vivid'
|
#4f172e
|
Gray cool
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'gray-cool-1'
|
'gray-cool'
|
1
|
—
|
#fbfcfd
|
|
|
'gray-cool-2'
|
'gray-cool'
|
2
|
—
|
#f7f9fa
|
|
|
'gray-cool-3'
|
'gray-cool'
|
3
|
—
|
#f5f6f7
|
|
|
'gray-cool-4'
|
'gray-cool'
|
4
|
—
|
#f1f3f6
|
|
|
'gray-cool-5'
|
'gray-cool'
|
5
|
—
|
#edeff0
|
|
|
'gray-cool-10'
|
'gray-cool'
|
10
|
—
|
#dfe1e2
|
|
|
'gray-cool-20'
|
'gray-cool'
|
20
|
—
|
#c6cace
|
|
|
'gray-cool-30'
|
'gray-cool'
|
30
|
—
|
#a9aeb1
|
|
|
'gray-cool-40'
|
'gray-cool'
|
40
|
—
|
#8d9297
|
|
|
'gray-cool-50'
|
'gray-cool'
|
50
|
—
|
#71767a
|
|
|
'gray-cool-60'
|
'gray-cool'
|
60
|
—
|
#565c65
|
|
|
'gray-cool-70'
|
'gray-cool'
|
70
|
—
|
#3d4551
|
|
|
'gray-cool-80'
|
'gray-cool'
|
80
|
—
|
#2d2e2f
|
|
|
'gray-cool-90'
|
'gray-cool'
|
90
|
—
|
#1c1d1f
|
Gray
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'gray-1'
|
'gray'
|
1
|
—
|
#fcfcfc
|
|
|
'gray-2'
|
'gray'
|
2
|
—
|
#f9f9f9
|
|
|
'gray-3'
|
'gray'
|
3
|
—
|
#f6f6f6
|
|
|
'gray-4'
|
'gray'
|
4
|
—
|
#f3f3f3
|
|
|
'gray-5'
|
'gray'
|
5
|
—
|
#f0f0f0
|
|
|
'gray-10'
|
'gray'
|
10
|
—
|
#e6e6e6
|
|
|
'gray-20'
|
'gray'
|
20
|
—
|
#c9c9c9
|
|
|
'gray-30'
|
'gray'
|
30
|
—
|
#adadad
|
|
|
'gray-40'
|
'gray'
|
40
|
—
|
#919191
|
|
|
'gray-50'
|
'gray'
|
50
|
—
|
#757575
|
|
|
'gray-60'
|
'gray'
|
60
|
—
|
#5c5c5c
|
|
|
'gray-70'
|
'gray'
|
70
|
—
|
#454545
|
|
|
'gray-80'
|
'gray'
|
80
|
—
|
#2e2e2e
|
|
|
'gray-90'
|
'gray'
|
90
|
—
|
#1b1b1b
|
Gray warm
| Color |
Token |
Family |
Grade |
Variant |
Hex |
|
|
'gray-warm-1'
|
'gray-warm'
|
1
|
—
|
#fcfcfb
|
|
|
'gray-warm-2'
|
'gray-warm'
|
2
|
—
|
#f9f9f7
|
|
|
'gray-warm-3'
|
'gray-warm'
|
3
|
—
|
#f6f6f2
|
|
|
'gray-warm-4'
|
'gray-warm'
|
4
|
—
|
#f5f5f0
|
|
|
'gray-warm-5'
|
'gray-warm'
|
5
|
—
|
#f0f0ec
|
|
|
'gray-warm-10'
|
'gray-warm'
|
10
|
—
|
#e6e6e2
|
|
|
'gray-warm-20'
|
'gray-warm'
|
20
|
—
|
#cac9c0
|
|
|
'gray-warm-30'
|
'gray-warm'
|
30
|
—
|
#afaea2
|
|
|
'gray-warm-40'
|
'gray-warm'
|
40
|
—
|
#929285
|
|
|
'gray-warm-50'
|
'gray-warm'
|
50
|
—
|
#76766a
|
|
|
'gray-warm-60'
|
'gray-warm'
|
60
|
—
|
#5d5d52
|
|
|
'gray-warm-70'
|
'gray-warm'
|
70
|
—
|
#454540
|
|
|
'gray-warm-80'
|
'gray-warm'
|
80
|
—
|
#2e2e2a
|
|
|
'gray-warm-90'
|
'gray-warm'
|
90
|
—
|
#171716
|
Using color tokens
Your context and coding style determine how you access USWDS color tokens in code.
| Context |
Usage |
Example |
|
function
|
color: color(color)
|
color: color('gray-30')
|
mixin
background-color
|
@include u-bg(color)
|
@include u-bg('gray-30')
|
mixin
color
|
@include u-text(color)
|
@include u-text('gray-30')
|
mixin
border-color
|
@include u-border(color)
|
@include u-border('gray-30')
|
mixin
text-decoration-color
|
@include u-underline(color)
|
@include u-underline('gray-30')
|
setting
|
$theme-variable: color
|
$theme-color-disabled: 'gray-30'
|
utility
background-color
|
.bg-color
|
.bg-gray-30
|
utility
border-color
|
.border-color
|
.border-gray-30
|
utility
color
|
.text-color
|
.text-gray-30
|
utility
outline-color
|
.outline-color
|
.outline-gray-30
|
utility
text-decoration-color
|
.underline-color
|
.underline-gray-30
|
Latest updates
Meaningful code and guidance updates are listed in the following table:
| Date |
USWDS version |
Affects |
Breaking |
Description |
|
2024-05-15
|
N/A
|
|
No
|
Updated the token references in the “Using color tokens” code examples.
More information:
uswds-site#2377
|
