Skip to main content

An official website of the United States government

Here's how you know

An official website of the United States government

Here's how you know

Theme:
Version:
Theme:
Version:

System color tokens

System color tokens are the entire set of color tokens from which our themes are built.

While this page shows the full range of colors, it's essential to use the theme color tokens identified for your brand's experience when building your product. Think of system color tokens like an entire box of crayons; our themes use specific colors from the box, not all of them.

transparent

transparent#ffffff00

white

alpha25#ffffff40
alpha50#ffffff80
alpha80#ffffffCC
solid#ffffff

black

alpha25#00000040
alpha50#00000080
alpha80#000000CC
solid#000000

granite

50#f2f2f2
100#d9d9d9
200#c0c0c0
300#a6a6a6
400#8d8d8d
500#808080
600#737373
700#5a5a5a
800#404040
900#262626
1000#0d0d0d

ocean

50#e6f1f8
100#b3d4eb
200#80b8de
300#4d9cd0
400#1a7fc3
500#0071bc
600#0066a9
700#004f84
800#00395e
900#002238
1000#000b13

sapphire

50#e6f0f4
100#b4d1de
200#82b3c8
300#4f95b2
400#1d769c
500#046791
600#045d83
700#034866
800#023449
900#011f2b
1000#000a0e

cerulean

50#eaf8fe
100#c0e9fb
200#97daf8
300#6dcbf5
400#43bcf2
500#2eb4f0
600#29a2d8
700#207ea8
800#175a78
900#0e3648
1000#051218

sky

50#e6f9fd
100#b3ecf8
200#81dff3
300#4ed2ee
400#1bc5e9
500#02bfe7
600#02acd0
700#0186a2
800#016074
900#013945
1000#001317

darksky

50#ecf4fa
100#c5dff1
200#9fcae7
300#78b4dd
400#519fd4
500#3e94cf
600#3885ba
700#2b6891
800#1f4a68
900#132c3e
1000#060f15

lapis

50#e9ecf1
100#bcc5d4
200#8f9eb8
300#62779b
400#35507e
500#1e3c70
600#1b3665
700#152a4e
800#0f1e38
900#091222
1000#03060b

deepsea

50#e7e9f5
100#b6bde0
200#8692cc
300#5666b8
400#253aa3
500#0d2499
600#0c208a
700#09196b
800#07124d
900#040b2e
1000#01040f

spring

50#e7f3e7
100#b8dcb7
200#89c487
300#59ac56
400#2a9526
500#12890e
600#107b0d
700#0d600a
800#094507
900#052904
1000#020e01

teal

50#e8f0ef
100#b9d2ce
200#8ab5ae
300#5b978e
400#2c796d
500#146a5d
600#125f54
700#0e4a41
800#0a352f
900#06201c
1000#020b09

emerald

50#ecfcf3
100#c6f6db
200#a1f1c4
300#7bebac
400#55e594
500#42e288
600#3bcb7a
700#2e9e5f
800#217144
900#144429
1000#07170e

rose

50#fce8ec
100#f7bbc5
200#f18e9e
300#eb6077
400#e63350
500#e31c3d
600#cc1937
700#9f142b
800#720e1f
900#440812
1000#170306

crimson

50#f7e6e6
100#e8b3b3
200#d98080
300#c94d4d
400#ba1a1a
500#b20000
600#a00000
700#7d0000
800#590000
900#350000
1000#120000

goldenrod

50#fef9e9
100#fdedbc
200#fce28f
300#fad662
400#f9ca35
500#f8c41f
600#dfb01c
700#ae8916
800#7c6210
900#4a3b09
1000#191403

dandelion

50#fffce6
100#fff7b5
200#fff284
300#ffec52
400#ffe721
500#ffe400
600#e6cd07
700#b3a006
800#807204
900#4c4402
1000#191701

windsor

50#edeaf4
100#c9c0de
200#a696c9
300#826bb3
400#5e419d
500#4c2c92
600#442883
700#351f66
800#261649
900#170d2c
1000#08040f

orchid

50#f8e7f8
100#ebb8ea
200#de89dc
300#d15acd
400#c42bbf
500#bd13b8
600#aa11a6
700#840d81
800#5f0a5c
900#390637
1000#130212

persimmon

50#fcebe6
100#f5c3b3
200#ee9b81
300#e7724f
400#e04a1c
500#dd3603
600#c73103
700#9b2602
800#6f1b02
900#421001
1000#160500

copper

50#faf1eb
100#efd6c2
200#e4ba99
300#d99e70
400#ce8347
500#c97532
600#b5692d
700#8d5223
800#653b19
900#3c230f
1000#140c05

Accessibility considerations

Text contrast

WCAG 2.0+ AA requires a contrast ratio of a minimum of 4.5:1 for normal, or body, text. Large text is easier to read, so the contrast requirement is reduced to 3:1. WCAG defines large text as text that is 24px and larger or 18.5px and larger if it is bold.

Text over gradients and background images still need to meet contrast requirements.

Non-text contrast

Elements that are not text, but still important, including buttons, icons that convey information, data visualizations (charts and graphs), and form inputs need a contrast ratio of at least 3:1. Also included in this are states of elements such as the selected state of an element, expanded vs. collapsed, active vs. inactive, elements with keyboard focus, etc.

Easily test your color combinations

Note that the colors listed only display colors that are available but when you are pairing colors together, make sure the color contrast ratio is sufficient. Here are three tools we suggest for testing color contrast:

WebAIM Color Contrast Checker

Deque Color Contrast Analyzer

Color Contrast Analyzer by TPGi