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-25 #0a5888 | 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-14 #08324a | turquoise-14 #083a39 | yellow-14 #483d0d | grey-14 #242c34 | red-14 #3d0f16 | green-14 #002517 |
| 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-variant is the lower-emphasis foreground role for the surface family, while --on-surface-container and --on-surface-container-variant are generated from the container anchor for components whose ordinary text color is container-specific. The two variant roles are softened from their corresponding foreground color toward --surface-container; --outline* follows the base surface foreground.
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 rendered outputs.
| CSS variable name | Light mode value | Dark mode value |
|---|---|---|
| --on-primary --primary | #ebf8ff #09517c | #07212f #7cd0ff |
| --on-primary-container --primary-container | #09517c #daedfd | #e0f4ff #1c3f52 |
| --on-primary-bright-fixed --primary-bright-fixed | #05090e #33b4ff | #05090e #33b4ff |
| --on-secondary --secondary | #ffffff #117c79 | #05090e #6ee0db |
| --on-secondary-container --secondary-container | #0a4846 #baf2ee | #e8fafa #095c59 |
| --on-secondary-bright-fixed --secondary-bright-fixed | #05090e #1ccfc9 | #05090e #1ccfc9 |
| --on-tertiary --tertiary | #05090e #99811c | #332b09 #ffe479 |
| --on-tertiary-container --tertiary-container | #332b09 #fff2bd | #fffbea #5a4c12 |
| --on-tertiary-bright-fixed --tertiary-bright-fixed | #05090e #ffd72e | #05090e #ffd72e |
| --on-negative --negative | #fbebed #801f2e | #05090e #e57c8c |
| --on-negative-container --negative-container | #05090e #e57b82 | #fbebed #5e1627 |
| --on-negative-bright-fixed --negative-bright-fixed | #ffffff #d6334c | #ffffff #d6334c |
| --on-positive --positive | #e6f2ed #004d2f | #05090e #5cae8f |
| --on-positive-container --positive-container | #002d1c #c0e1cd | #e6f2ed #11382b |
| --on-positive-bright-fixed --positive-bright-fixed | #ffffff #00804f | #ffffff #00804f |
| --on-surface --on-surface-variant --surface | #262b30 #44494e #f3f5f6 | #fafbfb #ecedee #2b353e |
| --on-surface-container --on-surface-container-variant --surface-container | #2f3439 #4c5055 #f3f1f1 | #fafafb #ededed #273039 |
| --on-surface-container --surface-container-lowest | #2f3439 #fafcfd | #fafafb #2f3942 |
| --on-surface-container --surface-container-low | #2f3439 #f5f7f8 | #fafafb #2b363f |
| --on-surface-container --surface-container-high | #2f3439 #e8eaeb | #fafafb #222c35 |
| --on-surface-container --surface-container-highest | #2f3439 #dadcdd | #fafafb #18222a |
| --on-surface-dark-fixed --surface-dark-fixed | #f9fafb #1a2027 | #f9fafb #1a2027 |
| --on-surface-black-fixed --surface-black-fixed | #f9fafb #05090e | #f9fafb #05090e |
| --outline --outline-variant | #000000ad #00000057 | #000000ad #00000057 |
| --hover-shadow --focus-shadow --active-shadow |