Colors
Static color tokens
| white #fff | |||||
| grey-98 #f9fafb | |||||
| blue-95 #ebf8ff | turquoise-95 #e8fafa | yellow-95 #fffbea | grey-95 #f3f5f6 | red-95 #fbebed | green-95 #e6f2ed |
| blue-93 #e0f4ff | turquoise-93 #ddf8f7 | yellow-93 #fff9e0 | grey-93 #eff0f1 | red-93 #f9e0e4 | green-93 #d9ece5 |
| grey-90 #eaebed | |||||
| blue-85 #c0e8ff | turquoise-85 #b9f0ee | yellow-85 #fff3be | grey-85 #dbe0e4 | red-85 #f2c0c8 | green-85 #b0d8c8 |
| blue-68 #7cd0ff | turquoise-68 #6ee0db | yellow-68 #ffe479 | grey-68 #b8c1c7 | red-68 #e57c8c | green-68 #5cae8f |
| blue-50 #33b4ff | turquoise-50 #1ccfc9 | yellow-50 #ffd72e | grey-50 #96a1aa | red-50 #d6334c | green-50 #00804f |
| blue-45 #14a0f4 | turquoise-45 #19bab5 | yellow-45 #e6c229 | grey-45 #849099 | red-45 #c12e44 | green-45 #007347 |
| blue-40 #0e8fdc | turquoise-40 #16a6a1 | yellow-40 #ccac25 | grey-40 #717f88 | red-40 #ab293d | green-40 #00663f |
| blue-37 #0f88cc | turquoise-37 #159b97 | yellow-37 #bfa123 | grey-37 #677781 | red-37 #a12639 | green-37 #00603b |
| blue-30 #0c6ba5 | turquoise-30 #117c79 | yellow-30 #99811c | grey-30 #4f5d68 | red-30 #801f2e | green-30 #004d2f |
| blue-23 #09517c | grey-25 #45535f | ||||
| blue-23 #09517c | turquoise-23 #0d5d5a | yellow-23 #736115 | grey-23 #374652 | red-23 #601722 | green-23 #003a24 |
| grey-19 #34424e | |||||
| blue-17 #07405f | turquoise-17 #0a4846 | yellow-17 #594b10 | grey-17 #2b353e | red-17 #4b121b | green-17 #002d1c |
| blue-10 #07212f | turquoise-10 #062928 | yellow-10 #332b09 | grey-10 #1a2027 | red-10 #2b0a0f | green-10 #001a10 |
| black #05090e |
Dynamic color variables
The values of these depend on the theme (dark or light). Each color has a corresponding foreground color (prefixed by --on-) to ensure good contrast.
Surface-related tokens are generated in perceptual color spaces, so changing --surface shifts the whole surface ladder with it. --surface-container gets its default tone from --surface, while the other --surface-container-* values are generated from --surface-container itself so a custom override of that anchor color also shifts the full ladder. --on-surface stays tied to --surface for base-surface contrast, --on-surface-container is generated from --surface-container, and --on-surface-variant plus --outline* are softened from --on-surface toward --surface-container so they still react when the container anchor is overridden.
The primary, secondary, tertiary, negative, and positive container backgrounds are also generated from their base colors, using relative oklch(...) transforms to shift lightness and chroma while keeping the family hue. Overriding any of those semantic base colors therefore still shifts the corresponding *-container tone automatically, but with a result that stays closer to the original swatches than a plain white/black mix.
The table below shows the default light and dark outputs, alongside the mix each token uses.
| CSS variable name | Light mode value | Dark mode value |
|---|---|---|
| --on-primary --primary | blue-95 blue-23 | blue-10 blue-68 |
| --on-primary-container --primary-container | blue-23 oklch(from primary l+0.54 c*0.27 h) | blue-93 oklch(from primary l-0.47 c*0.72 h) |
| --on-primary-bright-fixed --primary-bright-fixed | black blue-50 | black blue-50 |
| --on-secondary --secondary | white turquoise-30 | black turquoise-68 |
| --on-secondary-container --secondary-container | turquoise-17 oklch(from secondary l+0.39 c*0.64 h) | turquoise-95 oklch(from secondary l-0.41 c*0.68 h) |
| --on-secondary-bright-fixed --secondary-bright-fixed | black turquoise-50 | black turquoise-50 |
| --on-tertiary --tertiary | black yellow-30 | yellow-10 yellow-68 |
| --on-tertiary-container --tertiary-container | yellow-10 oklch(from tertiary l+0.35 c*0.6 h) | yellow-95 oklch(from tertiary l-0.5 c*0.59 h) |
| --on-tertiary-bright-fixed --tertiary-bright-fixed | black yellow-50 | black yellow-50 |
| --on-negative --negative | red-95 red-30 | black red-68 |
| --on-negative-container --negative-container | black oklch(from negative l+0.3 c h) | red-95 oklch(from negative l-0.38 c*0.8 h) |
| --on-negative-bright-fixed --negative-bright-fixed | white red-50 | white red-50 |
| --on-positive --positive | green-95 green-30 | black green-68 |
| --on-positive-container --positive-container | green-17 oklch(from positive l+0.48 c*0.56 h) | green-95 oklch(from positive l-0.38 c*0.73 h) |
| --on-positive-bright-fixed --positive-bright-fixed | white green-50 | white green-50 |
| --on-surface --on-surface-variant --surface | color-mix(surface 18%, black) color-mix(on-surface 83%, surface-container) default: grey-95 | color-mix(surface 2%, white) color-mix(on-surface 94%, surface-container) default: grey-17 |
| --on-surface-container --on-surface-variant --surface-container-lowest | color-mix(surface-container 22%, black) color-mix(on-surface 83%, surface-container) oklch(from surface-container l+0.02 c h) | color-mix(surface-container 2%, white) color-mix(on-surface 94%, surface-container) oklch(from surface-container l+0.02 c h) |
| --on-surface-container --on-surface-variant --surface-container-low | color-mix(surface-container 22%, black) color-mix(on-surface 83%, surface-container) oklch(from surface-container l+0.01 c h) | color-mix(surface-container 2%, white) color-mix(on-surface 94%, surface-container) oklch(from surface-container l+0.01 c h) |
| --on-surface-container --on-surface-variant --surface-container | color-mix(surface-container 22%, black) color-mix(on-surface 83%, surface-container) default: color-mix(surface 80%, white) | color-mix(surface-container 2%, white) color-mix(on-surface 94%, surface-container) default: color-mix(surface 80%, black) |
| --on-surface-container --on-surface-variant --surface-container-high | color-mix(surface-container 22%, black) color-mix(on-surface 83%, surface-container) oklch(from surface-container l-0.03 c h) | color-mix(surface-container 2%, white) color-mix(on-surface 94%, surface-container) oklch(from surface-container l-0.03 c h) |
| --on-surface-container --on-surface-variant --surface-container-highest | color-mix(surface-container 22%, black) color-mix(on-surface 83%, surface-container) oklch(from surface-container l-0.06 c h) | color-mix(surface-container 2%, white) color-mix(on-surface 94%, surface-container) oklch(from surface-container l-0.06 c h) |
| --on-surface-dark-fixed --surface-dark-fixed | grey-98 grey-10 | grey-98 grey-10 |
| --on-surface-black-fixed --surface-black-fixed | grey-98 black | grey-98 black |
| --outline --outline-variant | color-mix(on-surface 68%, surface-container) color-mix(on-surface 34%, surface-container) | color-mix(on-surface 68%, surface-container) color-mix(on-surface 34%, surface-container) |
| --hover-shadow --focus-shadow --active-shadow |