U.S. Web Design System
The system color palette of the U.S. Web Design System (USWDS) — the official design system for U.S. federal government websites. Ten hue families (red, orange, yellow, green, mint, cyan, blue, indigo, violet, magenta) plus three neutral families (gray, gray-cool, gray-warm). Each hue ships at grades 5/10/20/30/40/50/60/70/80/90, with a parallel "vivid" variant at the same grades (vivid-90 is intentionally absent in USWDS sources). Plain neutrals (gray) include grades 1–5 in addition to 10..90 plus a true black at grade 100. Light mode uses low-grade neutrals for the canvas; dark mode uses high-grade neutrals for the canvas.
233 swatches 15 light roles 15 dark roles
Swatches
gray
gray-1
#FCFCFC
gray-2
#F9F9F9
gray-3
#F6F6F6
gray-4
#F3F3F3
gray-5
#F0F0F0
gray-10
#E6E6E6
gray-20
#C9C9C9
gray-30
#ADADAD
gray-40
#919191
gray-50
#757575
gray-60
#5C5C5C
gray-70
#454545
gray-80
#2E2E2E
gray-90
#1B1B1B
gray-100
#000000
gray-cool
gray-cool-1
#FBFCFD
gray-cool-2
#F7F9FA
gray-cool-3
#F5F6F7
gray-cool-4
#F1F3F6
gray-cool-5
#EDEFF0
gray-cool-10
#DFE1E2
gray-cool-20
#C6CACE
gray-cool-30
#A9AEB1
gray-cool-40
#8D9297
gray-cool-50
#71767A
gray-cool-60
#565C65
gray-cool-70
#3D4551
gray-cool-80
#2D2E2F
gray-cool-90
#1C1D1F
gray-warm
gray-warm-1
#FCFCFB
gray-warm-2
#F9F9F7
gray-warm-3
#F6F6F2
gray-warm-4
#F5F5F0
gray-warm-5
#F0F0EC
gray-warm-10
#E6E6E2
gray-warm-20
#CAC9C0
gray-warm-30
#AFAEA2
gray-warm-40
#929285
gray-warm-50
#76766A
gray-warm-60
#5D5D52
gray-warm-70
#454540
gray-warm-80
#2E2E2A
gray-warm-90
#171716
red
red-5
#F9EEEE
red-10
#F8E1DE
red-20
#F7BBB1
red-30
#F2938C
red-40
#E9695F
red-50
#D83933
red-60
#A23737
red-70
#6F3331
red-80
#3E2927
red-90
#1B1616
red-vivid
red-vivid-5
#FFF3F2
red-vivid-10
#FDE0DB
red-vivid-20
#FDB8AE
red-vivid-30
#FF8D7B
red-vivid-40
#FB5A47
red-vivid-50
#E52207
red-vivid-60
#B50909
red-vivid-70
#8B0A03
red-vivid-80
#5C1111
orange
orange-5
#F6EFE9
orange-10
#F2E4D4
orange-20
#F3BF90
orange-30
#F09860
orange-40
#DD7533
orange-50
#A86437
orange-60
#775540
orange-70
#524236
orange-80
#332D27
orange-90
#1B1614
orange-vivid
orange-vivid-5
#FEF2E4
orange-vivid-10
#FCE2C5
orange-vivid-20
#FFBC78
orange-vivid-30
#FA9441
orange-vivid-40
#E66F0E
orange-vivid-50
#C05600
orange-vivid-60
#8C471C
orange-vivid-70
#5F3617
orange-vivid-80
#352313
yellow
yellow-5
#FAF3D1
yellow-10
#F5E6AF
yellow-20
#E6C74C
yellow-30
#C9AB48
yellow-40
#A88F48
yellow-50
#8A7237
yellow-60
#6B5A39
yellow-70
#504332
yellow-80
#332D27
yellow-90
#1A1614
yellow-vivid
yellow-vivid-5
#FFF5C2
yellow-vivid-10
#FEE685
yellow-vivid-20
#FACE00
yellow-vivid-30
#DDAA01
yellow-vivid-40
#B38C00
yellow-vivid-50
#947100
yellow-vivid-60
#776017
yellow-vivid-70
#5C4809
yellow-vivid-80
#422D19
green
green-5
#EAF4DD
green-10
#DFEACD
green-20
#B8D293
green-30
#9BB672
green-40
#7D9B4E
green-50
#607F35
green-60
#4C6424
green-70
#3C4A29
green-80
#293021
green-90
#161814
green-vivid
green-vivid-5
#DDF9C7
green-vivid-10
#C5EE93
green-vivid-20
#98D035
green-vivid-30
#7FB135
green-vivid-40
#719F2A
green-vivid-50
#538200
green-vivid-60
#466C04
green-vivid-70
#2F4A0B
green-vivid-80
#243413
mint
mint-5
#DBF6ED
mint-10
#C7EFE2
mint-20
#92D9BB
mint-30
#5ABF95
mint-40
#34A37E
mint-50
#2E8367
mint-60
#286846
mint-70
#204E34
mint-80
#193324
mint-90
#0D1A12
mint-vivid
mint-vivid-5
#C9FBEB
mint-vivid-10
#83FCD4
mint-vivid-20
#0CEDA6
mint-vivid-30
#04C585
mint-vivid-40
#00A871
mint-vivid-50
#008659
mint-vivid-60
#146947
mint-vivid-70
#0C4E29
mint-vivid-80
#0D351E
cyan
cyan-5
#E7F6F8
cyan-10
#CCECF2
cyan-20
#99DEEA
cyan-30
#5DC0D1
cyan-40
#449DAC
cyan-50
#168092
cyan-60
#2A646D
cyan-70
#2C4A4E
cyan-80
#203133
cyan-90
#111819
cyan-vivid
cyan-vivid-5
#E5FAFF
cyan-vivid-10
#A8F2FF
cyan-vivid-20
#52DAF2
cyan-vivid-30
#00BDE3
cyan-vivid-40
#009EC1
cyan-vivid-50
#0081A1
cyan-vivid-60
#00687D
cyan-vivid-70
#0E4F5C
cyan-vivid-80
#093B44
blue
blue-5
#EFF6FB
blue-10
#D9E8F6
blue-20
#AACDEC
blue-30
#73B3E7
blue-40
#4F97D1
blue-50
#2378C3
blue-60
#2C608A
blue-70
#274863
blue-80
#1F303E
blue-90
#11181D
blue-vivid
blue-vivid-5
#E8F5FF
blue-vivid-10
#CFE8FF
blue-vivid-20
#A1D3FF
blue-vivid-30
#58B4FF
blue-vivid-40
#2491FF
blue-vivid-50
#0076D6
blue-vivid-60
#005EA2
blue-vivid-70
#0B4778
blue-vivid-80
#112F4E
indigo
indigo-5
#EFEFF8
indigo-10
#E5E4FA
indigo-20
#C5C5F3
indigo-30
#A5A8EB
indigo-40
#8889DB
indigo-50
#676CC8
indigo-60
#4D52AF
indigo-70
#3D4076
indigo-80
#2B2C40
indigo-90
#16171F
indigo-vivid
indigo-vivid-5
#F0F0FF
indigo-vivid-10
#E0E0FF
indigo-vivid-20
#CCCEFF
indigo-vivid-30
#A3A7FA
indigo-vivid-40
#8289FF
indigo-vivid-50
#656BD7
indigo-vivid-60
#4A50C4
indigo-vivid-70
#3333A3
indigo-vivid-80
#212463
violet
violet-5
#F4F1F9
violet-10
#EBE3F9
violet-20
#D0C3E9
violet-30
#B8A2E3
violet-40
#9D84D2
violet-50
#8168B3
violet-60
#665190
violet-70
#4C3D69
violet-80
#312B3F
violet-90
#18161D
violet-vivid
violet-vivid-5
#F7F2FF
violet-vivid-10
#EDE3FF
violet-vivid-20
#D5BFFF
violet-vivid-30
#C39DEB
violet-vivid-40
#AD79E9
violet-vivid-50
#9355DC
violet-vivid-60
#783CB9
violet-vivid-70
#54278F
violet-vivid-80
#39215E
magenta
magenta-5
#F9F0F2
magenta-10
#F6E1E8
magenta-20
#F0BBCC
magenta-30
#E895B3
magenta-40
#E0699F
magenta-50
#C84281
magenta-60
#8B4566
magenta-70
#66364B
magenta-80
#402731
magenta-90
#1B1617
magenta-vivid
magenta-vivid-5
#FFF2F5
magenta-vivid-10
#FFDDEA
magenta-vivid-20
#FFB4CF
magenta-vivid-30
#FF87B2
magenta-vivid-40
#FD4496
magenta-vivid-50
#D72D79
magenta-vivid-60
#AB2165
magenta-vivid-70
#731F44
magenta-vivid-80
#4F172E
Mode role mappings
Light mode (15 roles)
accent
→ indigo-vivid-60 accent-hover
→ indigo-vivid-70 background
→ gray-1 border
→ gray-30 error
→ red-50 primary
→ blue-50 primary-hover
→ blue-70 success
→ green-50 surface
→ gray-3 surface-elevated
→ gray-1 text-primary
→ gray-90 text-secondary
→ gray-70 text-tertiary
→ gray-50 warning
→ yellow-30 warning-hover
→ yellow-50 Dark mode (15 roles)
accent
→ indigo-vivid-30 accent-hover
→ indigo-vivid-20 background
→ gray-90 border
→ gray-70 error
→ red-vivid-30 primary
→ blue-vivid-30 primary-hover
→ blue-vivid-20 success
→ green-vivid-30 surface
→ gray-80 surface-elevated
→ gray-70 text-primary
→ gray-1 text-secondary
→ gray-20 text-tertiary
→ gray-30 warning
→ yellow-vivid-20 warning-hover
→ yellow-vivid-10 Provenance
- Source
- https://github.com/uswds/uswds/tree/develop/packages/uswds-core/src/styles/tokens/color
- License
CC0-1.0- Attribution
- U.S. Web Design System (USWDS) system color palette, released by the U.S. General Services Administration to the public domain (CC0). Hex values mirrored from packages/uswds-core/src/styles/tokens/color Sass partials on the develop branch.
- Imported
-
2026-05-17(upstream version uswds@develop) - Notes
- The "vivid" variants are USWDS's higher-saturation alternates of each hue at the same grade; both standard and vivid grades are exposed here so palette consumers can pick the level of saturation they need.