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#ffffff00white
alpha25#ffffff40alpha50#ffffff80alpha80#ffffffccsolid#ffffffblack
alpha25#00000040alpha50#00000080alpha80#000000ccsolid#000000granite
50#f2f2f2100#d9d9d9200#c0c0c0300#a6a6a6400#8d8d8d500#808080600#737373700#5a5a5a800#404040900#2626261000#0d0d0docean
50#e6f1f8100#b3d4eb200#80b8de300#4d9cd0400#1a7fc3500#0071bc600#0066a9700#004f84800#00395e900#0022381000#000b13sapphire
50#e6f0f4100#b4d1de200#82b3c8300#4f95b2400#1d769c500#046791600#045d83700#034866800#023449900#011f2b1000#000a0ecerulean
50#eaf8fe100#c0e9fb200#97daf8300#6dcbf5400#43bcf2500#2eb4f0600#29a2d8700#207ea8800#175a78900#0e36481000#051218sky
50#e6f9fd100#b3ecf8200#81dff3300#4ed2ee400#1bc5e9500#02bfe7600#02acd0700#0186a2800#016074900#0139451000#001317darksky
50#ecf4fa100#c5dff1200#9fcae7300#78b4dd400#519fd4500#3e94cf600#3885ba700#2b6891800#1f4a68900#132c3e1000#060f15lapis
50#e9ecf1100#bcc5d4200#8f9eb8300#62779b400#35507e500#1e3c70600#1b3665700#152a4e800#0f1e38900#0912221000#03060bdeepsea
50#e7e9f5100#b6bde0200#8692cc300#5666b8400#253aa3500#0d2499600#0c208a700#09196b800#07124d900#040b2e1000#01040fspring
40#f6faf550#e7f3e7100#b8dcb7200#89c487300#59ac56400#2a9526500#12890e600#107b0d700#0d600a800#094507900#0529041000#020e01teal
50#e8f0ef100#b9d2ce200#8ab5ae300#5b978e400#2c796d500#146a5d600#125f54700#0e4a41800#0a352f900#06201c1000#020b09emerald
50#ecfcf3100#c6f6db200#a1f1c4300#7bebac400#55e594500#42e288600#3bcb7a700#2e9e5f800#217144900#1444291000#07170erose
40#fef5f750#fce8ec100#f7bbc5200#f18e9e300#eb6077400#e63350500#e31c3d600#cc1937700#9f142b800#720e1f900#4408121000#170306crimson
50#f7e6e6100#e8b3b3200#d98080300#c94d4d400#ba1a1a500#b20000600#a00000700#7d0000800#590000900#3500001000#120000goldenrod
50#fef9e9100#fdedbc200#fce28f300#fad662400#f9ca35500#f8c41f600#dfb01c700#ae8916800#7c6210900#4a3b091000#191403dandelion
50#fffce6100#fff7b5200#fff284300#ffec52400#ffe721500#ffe400600#e6cd07700#b3a006800#807204900#4c44021000#191701windsor
50#edeaf4100#c9c0de200#a696c9300#826bb3400#5e419d500#4c2c92600#442883700#351f66800#261649900#170d2c1000#08040forchid
50#f8e7f8100#ebb8ea200#de89dc300#d15acd400#c42bbf500#bd13b8600#aa11a6700#840d81800#5f0a5c900#3906371000#130212persimmon
50#fcebe6100#f5c3b3200#ee9b81300#e7724f400#e04a1c500#dd3603600#c73103700#9b2602800#6f1b02900#4210011000#160500copper
50#faf1eb100#efd6c2200#e4ba99300#d99e70400#ce8347500#c97532600#b5692d700#8d5223800#653b19900#3c230f1000#140c05Accessibility 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: