Color
An overview of all available color CSS variables
This page only shows colors in the site's active theme (“light” or “dark”).
Use the Primitives Storybook to see colors in all themes.
Foundational
Foreground
| Sample | CSS variable | Output value |
|---|---|---|
Aa | --fgColor-accent | #0969da |
Aa | --fgColor-attention | #9a6700 |
Aa | --fgColor-black | #1f2328 |
Aa | --fgColor-closed | #d1242f |
Aa | --fgColor-danger | #d1242f |
Aa | --fgColor-default | #1f2328 |
Aa | --fgColor-disabled | #818b98 |
Aa | --fgColor-done | #8250df |
Aa | --fgColor-link | #0969da |
Aa | --fgColor-muted | #59636e |
Aa | --fgColor-neutral | #59636e |
Aa | --fgColor-onEmphasis | #ffffff |
Aa | --fgColor-onInverse | #ffffff |
Aa | --fgColor-open | #1a7f37 |
Aa | --fgColor-severe | #bc4c00 |
Aa | --fgColor-sponsors | #bf3989 |
Aa | --fgColor-success | #1a7f37 |
Aa | --fgColor-upsell | #8250df |
Aa | --fgColor-white | #ffffff |
Background
| Sample | CSS variable | Output value |
|---|---|---|
--bgColor-accent-emphasis | #0969da | |
--bgColor-accent-muted | #ddf4ff | |
--bgColor-attention-emphasis | #9a6700 | |
--bgColor-attention-muted | #fff8c5 | |
--bgColor-black | #1f2328 | |
--bgColor-closed-emphasis | #cf222e | |
--bgColor-closed-muted | #ffebe9 | |
--bgColor-danger-emphasis | #cf222e | |
--bgColor-danger-muted | #ffebe9 | |
--bgColor-default | #ffffff | |
--bgColor-disabled | #eff2f5 | |
--bgColor-done-emphasis | #8250df | |
--bgColor-done-muted | #fbefff | |
--bgColor-emphasis | #25292e | |
--bgColor-inset | #f6f8fa | |
--bgColor-inverse | #25292e | |
--bgColor-muted | #f6f8fa | |
--bgColor-neutral-emphasis | #59636e | |
--bgColor-neutral-muted | #818b981f | |
--bgColor-open-emphasis | #1f883d | |
--bgColor-open-muted | #dafbe1 | |
--bgColor-severe-emphasis | #bc4c00 | |
--bgColor-severe-muted | #fff1e5 | |
--bgColor-sponsors-emphasis | #bf3989 | |
--bgColor-sponsors-muted | #ffeff7 | |
--bgColor-success-emphasis | #1f883d | |
--bgColor-success-muted | #dafbe1 | |
--bgColor-transparent | #ffffff00 | |
--bgColor-upsell-emphasis | #8250df | |
--bgColor-upsell-muted | #fbefff | |
--bgColor-white | #ffffff |
Border
| Sample | CSS variable | Output value |
|---|---|---|
--borderColor-accent-emphasis | #0969da | |
--borderColor-accent-muted | #54aeff66 | |
--borderColor-attention-emphasis | #9a6700 | |
--borderColor-attention-muted | #d4a72c66 | |
--borderColor-closed-emphasis | #cf222e | |
--borderColor-closed-muted | #ff818266 | |
--borderColor-danger-emphasis | #cf222e | |
--borderColor-danger-muted | #ff818266 | |
--borderColor-default | #d1d9e0 | |
--borderColor-disabled | #818b981a | |
--borderColor-done-emphasis | #8250df | |
--borderColor-done-muted | #c297ff66 | |
--borderColor-emphasis | #818b98 | |
--borderColor-muted | #d1d9e0b3 | |
--borderColor-neutral-emphasis | #59636e | |
--borderColor-neutral-muted | #d1d9e0b3 | |
--borderColor-open-emphasis | #1a7f37 | |
--borderColor-open-muted | #4ac26b66 | |
--borderColor-severe-emphasis | #bc4c00 | |
--borderColor-severe-muted | #fb8f4466 | |
--borderColor-sponsors-emphasis | #bf3989 | |
--borderColor-sponsors-muted | #ff80c866 | |
--borderColor-success-emphasis | #1a7f37 | |
--borderColor-success-muted | #4ac26b66 | |
--borderColor-translucent | #1f232826 | |
--borderColor-transparent | #ffffff00 | |
--borderColor-upsell-emphasis | #8250df | |
--borderColor-upsell-muted | #c297ff66 |
Shadow
| Sample | CSS variable | Output value |
|---|---|---|
--shadow-floating-large | 0px 0px 0px 1px #d1d9e0, 0px 40px 80px 0px #25292e3d | |
--shadow-floating-legacy | 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f | |
--shadow-floating-medium | 0px 0px 0px 1px #d1d9e0, 0px 8px 16px -4px #25292e14, 0px 4px 32px -4px #25292e14, 0px 24px 48px -12px #25292e14, 0px 48px 96px -24px #25292e14 | |
--shadow-floating-small | 0px 0px 0px 1px #d1d9e080, 0px 6px 12px -3px #25292e0a, 0px 6px 18px 0px #25292e1f | |
--shadow-floating-xlarge | 0px 0px 0px 1px #d1d9e0, 0px 56px 112px 0px #25292e52 | |
--shadow-inset | inset 0px 1px 0px 0px #1f23280a | |
--shadow-resting-medium | 0px 1px 1px 0px #25292e1a, 0px 3px 6px 0px #25292e1f | |
--shadow-resting-small | 0px 1px 1px 0px #1f23280f, 0px 1px 3px 0px #1f23280f | |
--shadow-resting-xsmall | 0px 1px 1px 0px #1f23280f |
Pattern
Button
| Sample | CSS variable | Output value |
|---|---|---|
--button-danger-bgColor-active | #8b0820 | |
--button-danger-bgColor-disabled | #eff2f5 | |
--button-danger-bgColor-hover | #a40e26 | |
--button-danger-bgColor-rest | #f6f8fa | |
--button-danger-borderColor-active | #1f232826 | |
--button-danger-borderColor-hover | #1f232826 | |
--button-danger-borderColor-rest | #d1d9e0 | |
Aa | --button-danger-fgColor-active | #ffffff |
Aa | --button-danger-fgColor-disabled | #d1242f80 |
Aa | --button-danger-fgColor-hover | #ffffff |
Aa | --button-danger-fgColor-rest | #d1242f |
--button-danger-iconColor-hover | #ffffff | |
--button-danger-iconColor-rest | #d1242f | |
--button-danger-shadow-selected | inset 0px 1px 0px 0px #4c001433 | |
--button-default-bgColor-active | #e6eaef | |
--button-default-bgColor-disabled | #eff2f5 | |
--button-default-bgColor-hover | #eff2f5 | |
--button-default-bgColor-rest | #f6f8fa | |
--button-default-bgColor-selected | #e6eaef | |
--button-default-borderColor-active | #d1d9e0 | |
--button-default-borderColor-disabled | #818b981a | |
--button-default-borderColor-hover | #d1d9e0 | |
--button-default-borderColor-rest | #d1d9e0 | |
Aa | --button-default-fgColor-rest | #25292e |
--button-default-shadow-resting | 0px 1px 0px 0px #1f23280a | |
--button-inactive-bgColor | #e6eaef | |
Aa | --button-inactive-fgColor | #59636e |
--button-invisible-bgColor-active | #818b9826 | |
--button-invisible-bgColor-disabled | #ffffff00 | |
--button-invisible-bgColor-hover | #818b981a | |
--button-invisible-bgColor-rest | #ffffff00 | |
--button-invisible-borderColor-disabled | #ffffff00 | |
--button-invisible-borderColor-hover | #ffffff00 | |
--button-invisible-borderColor-rest | #ffffff00 | |
Aa | --button-invisible-fgColor-active | #25292e |
Aa | --button-invisible-fgColor-disabled | #818b98 |
Aa | --button-invisible-fgColor-hover | #25292e |
Aa | --button-invisible-fgColor-rest | #25292e |
--button-invisible-iconColor-disabled | #818b98 | |
--button-invisible-iconColor-hover | #59636e | |
--button-invisible-iconColor-rest | #59636e | |
--button-outline-bgColor-active | #0757ba | |
--button-outline-bgColor-disabled | #eff2f5 | |
--button-outline-bgColor-hover | #0969da | |
--button-outline-bgColor-rest | #f6f8fa | |
--button-outline-borderColor-active | #1f232826 | |
--button-outline-borderColor-hover | #1f232826 | |
Aa | --button-outline-fgColor-active | #ffffff |
Aa | --button-outline-fgColor-disabled | #0969da80 |
Aa | --button-outline-fgColor-hover | #ffffff |
Aa | --button-outline-fgColor-rest | #0969da |
--button-outline-shadow-selected | inset 0px 1px 0px 0px #00215533 | |
--button-primary-bgColor-active | #197935 | |
--button-primary-bgColor-disabled | #95d8a6 | |
--button-primary-bgColor-hover | #1c8139 | |
--button-primary-bgColor-rest | #1f883d | |
--button-primary-borderColor-active | #1f232826 | |
--button-primary-borderColor-disabled | #95d8a6 | |
--button-primary-borderColor-hover | #1f232826 | |
--button-primary-borderColor-rest | #1f232826 | |
Aa | --button-primary-fgColor-disabled | #ffffffcc |
Aa | --button-primary-fgColor-rest | #ffffff |
--button-primary-iconColor-rest | #ffffffcc | |
--button-primary-shadow-selected | inset 0px 1px 0px 0px #002d114d | |
--button-star-iconColor | #eac54f |
Control
| Sample | CSS variable | Output value |
|---|---|---|
--control-bgColor-active | #e6eaef | |
--control-bgColor-disabled | #eff2f5 | |
--control-bgColor-hover | #eff2f5 | |
--control-bgColor-rest | #f6f8fa | |
--control-bgColor-selected | #f6f8fa | |
--control-borderColor-danger | #cf222e | |
--control-borderColor-disabled | #818b981a | |
--control-borderColor-emphasis | #818b98 | |
--control-borderColor-rest | #d1d9e0 | |
--control-borderColor-selected | #f6f8fa | |
--control-borderColor-success | #1a7f37 | |
--control-borderColor-warning | #9a6700 | |
--control-checked-bgColor-active | #0757ba | |
--control-checked-bgColor-disabled | #818b98 | |
--control-checked-bgColor-hover | #0860ca | |
--control-checked-bgColor-rest | #0969da | |
--control-checked-borderColor-active | #0757ba | |
--control-checked-borderColor-disabled | #818b98 | |
--control-checked-borderColor-hover | #0860ca | |
--control-checked-borderColor-rest | #0969da | |
Aa | --control-checked-fgColor-disabled | #ffffff |
Aa | --control-checked-fgColor-rest | #ffffff |
--control-danger-bgColor-active | #ffebe966 | |
--control-danger-bgColor-hover | #ffebe9 | |
Aa | --control-danger-fgColor-hover | #d1242f |
Aa | --control-danger-fgColor-rest | #d1242f |
Aa | --control-fgColor-disabled | #818b98 |
Aa | --control-fgColor-placeholder | #59636e |
Aa | --control-fgColor-rest | #25292e |
--control-iconColor-rest | #59636e | |
--control-transparent-bgColor-active | #818b9826 | |
--control-transparent-bgColor-disabled | #eff2f5 | |
--control-transparent-bgColor-hover | #818b981a | |
--control-transparent-bgColor-rest | #ffffff00 | |
--control-transparent-bgColor-selected | #818b9826 | |
--control-transparent-borderColor-active | #ffffff00 | |
--control-transparent-borderColor-hover | #ffffff00 | |
--control-transparent-borderColor-rest | #ffffff00 |
Data visualization
| Sample | CSS variable | Output value |
|---|---|---|
--data-auburn-color-emphasis | #9d615c | |
--data-auburn-color-gradientStop-1 | #f2e9e9 | |
--data-auburn-color-gradientStop-2 | #f2e9e900 | |
--data-auburn-color-muted | #f2e9e9 | |
--data-blue-color-emphasis | #006edb | |
--data-blue-color-gradientStop-1 | #d1f0ff | |
--data-blue-color-gradientStop-2 | #d1f0ff00 | |
--data-blue-color-muted | #d1f0ff | |
--data-brown-color-emphasis | #856d4c | |
--data-brown-color-gradientStop-1 | #eeeae2 | |
--data-brown-color-gradientStop-2 | #eeeae200 | |
--data-brown-color-muted | #eeeae2 | |
--data-coral-color-emphasis | #d43511 | |
--data-coral-color-gradientStop-1 | #ffe5db | |
--data-coral-color-gradientStop-2 | #ffe5db00 | |
--data-coral-color-muted | #ffe5db | |
--data-gray-color-emphasis | #808fa3 | |
--data-gray-color-gradientStop-1 | #e8ecf2 | |
--data-gray-color-gradientStop-2 | #e8ecf200 | |
--data-gray-color-muted | #e8ecf2 | |
--data-green-color-emphasis | #30a147 | |
--data-green-color-gradientStop-1 | #caf7ca | |
--data-green-color-gradientStop-2 | #caf7ca00 | |
--data-green-color-muted | #caf7ca | |
--data-lemon-color-emphasis | #866e04 | |
--data-lemon-color-gradientStop-1 | #f7eea1 | |
--data-lemon-color-gradientStop-2 | #f7eea100 | |
--data-lemon-color-muted | #f7eea1 | |
--data-lime-color-emphasis | #527a29 | |
--data-lime-color-gradientStop-1 | #e3f2b5 | |
--data-lime-color-gradientStop-2 | #e3f2b500 | |
--data-lime-color-muted | #e3f2b5 | |
--data-olive-color-emphasis | #64762d | |
--data-olive-color-gradientStop-1 | #f0f0ad | |
--data-olive-color-gradientStop-2 | #f0f0ad00 | |
--data-olive-color-muted | #f0f0ad | |
--data-orange-color-emphasis | #eb670f | |
--data-orange-color-gradientStop-1 | #ffe7d1 | |
--data-orange-color-gradientStop-2 | #ffe7d100 | |
--data-orange-color-muted | #ffe7d1 | |
--data-pine-color-emphasis | #167e53 | |
--data-pine-color-gradientStop-1 | #bff8db | |
--data-pine-color-gradientStop-2 | #bff8db00 | |
--data-pine-color-muted | #bff8db | |
--data-pink-color-emphasis | #ce2c85 | |
--data-pink-color-gradientStop-1 | #ffe5f1 | |
--data-pink-color-gradientStop-2 | #ffe5f100 | |
--data-pink-color-muted | #ffe5f1 | |
--data-plum-color-emphasis | #a830e8 | |
--data-plum-color-gradientStop-1 | #f8e5ff | |
--data-plum-color-gradientStop-2 | #f8e5ff00 | |
--data-plum-color-muted | #f8e5ff | |
--data-purple-color-emphasis | #894ceb | |
--data-purple-color-gradientStop-1 | #f1e5ff | |
--data-purple-color-gradientStop-2 | #f1e5ff00 | |
--data-purple-color-muted | #f1e5ff | |
--data-red-color-emphasis | #df0c24 | |
--data-red-color-gradientStop-1 | #ffe2e0 | |
--data-red-color-gradientStop-2 | #ffe2e000 | |
--data-red-color-muted | #ffe2e0 | |
--data-teal-color-emphasis | #179b9b | |
--data-teal-color-gradientStop-1 | #c7f5ef | |
--data-teal-color-gradientStop-2 | #c7f5ef00 | |
--data-teal-color-muted | #c7f5ef | |
--data-yellow-color-emphasis | #b88700 | |
--data-yellow-color-gradientStop-1 | #ffec9e | |
--data-yellow-color-gradientStop-2 | #ffec9e00 | |
--data-yellow-color-muted | #ffec9e |
Focus
| Sample | CSS variable | Output value |
|---|---|---|
--focus-outlineColor | #0969da |
Overlay
| Sample | CSS variable | Output value |
|---|---|---|
--overlay-backdrop-bgColor | #c8d1da66 | |
--overlay-bgColor | #ffffff | |
--overlay-borderColor | #d1d9e080 |