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
  • Guidance
No

Updated the token references in the “Using color tokens” code examples. More information: uswds-site#2377