Color

For documentation on the entire color palette, visit Colors.

TIP

Some colors vary between light and dark modes. Use the color mode switcher in the site header to see the colors in the different modes. Using design tokens rather than raw hex codes will ensure you're automatically using the right color for the chosen mode.

Text color

List of design token names, values and metadata for background-color
Name	Value
`color-base`	`#202122` `color.gray900`
`color-base-fixed`	`#202122` `color.gray900`
`color-base--hover`	`#404244` `color.gray700`
`color-emphasized`	`#101418` `color.gray1000`
`color-subtle`	`#54595d` `color.gray600`
`color-placeholder`	`#72777d` `color.gray500`
`color-disabled`	`#a2a9b1` `color.gray400`
`color-disabled-emphasized`	`#a2a9b1` `color.gray400`
`color-inverted`	`#fff` `color.white`
`color-inverted-fixed` The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes.	`#fff` `color.white`
`color-progressive` 'Progressive' Color and states	`#36c` `color.blue700`
`color-progressive--hover`	`#3056a9` `color.blue800`
`color-progressive--active`	`#233566` `color.blue900`
`color-progressive--focus`	`#36c` `color.blue700`
`color-destructive` 'Destructive' Color and states	`#bf3c2c` `color.red700`
`color-destructive--hover`	`#9f3526` `color.red800`
`color-destructive--active`	`#612419` `color.red900`
`color-destructive--focus`	`#36c` `color.blue700`
`color-visited` 'Visited' color. In combination with progressive. Used for default links.	`#6a60b0` `color.purple700`
`color-visited--hover`	`#534fa3` `color.purple800`
`color-visited--active`	`#353262` `color.purple900`
`color-destructive--visited` Red link 'Visited' color. Used for visited red links.	`#9f5555` `color.maroon700`
`color-destructive--visited--hover`	`#854848` `color.maroon800`
`color-destructive--visited--active`	`#512e2e` `color.maroon900`
`color-error`	`#bf3c2c` `color.red700`
`color-error--hover`	`#9f3526` `color.red800`
`color-error--active`	`#612419` `color.red900`
`color-warning`	`#886425` `color.yellow700`
`color-success`	`#177860` `color.green700`
`color-notice`	`#404244` `color.gray700`
`color-icon-error`	`#f54739` `color.red500`
`color-icon-warning`	`#ab7f2a` `color.yellow500`
`color-icon-success`	`#099979` `color.green500`
`color-icon-notice`	`#72777d` `color.gray500`
`color-content-added`	`#006400` `color.green999`
`color-content-removed`	`#8b0000` `color.red999`
`color-base--subtle` deprecated	`#54595d` `color.gray600`
`color-link-red` Red ('new') Link color and states	`#bf3c2c` `color.destructive`
`color-link-red--hover`	`#9f3526` `color.destructive--hover`
`color-link-red--active`	`#612419` `color.destructive--active`
`color-link-red--focus`	`#36c` `color.destructive--focus`
`color-link-red--visited`	`#9f5555` `color.destructive--visited`
`color-link-red--visited--hover`	`#854848` `color.destructive--visited--hover`
`color-link-red--visited--active`	`#512e2e` `color.destructive--visited--active`

Background color

List of design token names, values and metadata for background-color
Name	Value
`background-color-base` Background Colors for static elements (for page layout, sections, etc.) from here on.	`#fff` `color.white`
`background-color-base-fixed` The same as background-color-base in light mode, but does not change in dark mode. Use this for things that should be white in both modes.	`#fff` `color.white`
`background-color-neutral`	`#eaecf0` `color.gray100`
`background-color-neutral-subtle`	`#f8f9fa` `color.gray50`
`background-color-interactive`	`#eaecf0` `color.gray100`
`background-color-interactive--hover`	`#dadde3` `color.gray200`
`background-color-interactive--active`	`#c8ccd1` `color.gray300`
`background-color-interactive-subtle`	`#f8f9fa` `color.gray50`
`background-color-interactive-subtle--hover`	`#eaecf0` `color.gray100`
`background-color-interactive-subtle--active`	`#dadde3` `color.gray200`
`background-color-disabled` Components like Buttons, Checkboxes, Radios, ProgressBars….	`#dadde3` `color.gray200`
`background-color-disabled-subtle` Components like TextInputs, Selects….	`#eaecf0` `color.gray100`
`background-color-inverted`	`#101418` `color.gray1000`
`background-color-progressive`	`#36c` `color.blue700`
`background-color-progressive--hover`	`#3056a9` `color.blue800`
`background-color-progressive--active`	`#233566` `color.blue900`
`background-color-progressive--focus`	`#36c` `color.blue700`
`background-color-progressive-subtle`	`#f1f4fd` `color.blue50`
`background-color-progressive-subtle--hover`	`#dce3f9` `color.blue100`
`background-color-progressive-subtle--active`	`#cbd6f6` `color.blue200`
`background-color-destructive`	`#bf3c2c` `color.red700`
`background-color-destructive--hover`	`#9f3526` `color.red800`
`background-color-destructive--active`	`#612419` `color.red900`
`background-color-destructive--focus`	`#36c` `color.blue700`
`background-color-destructive-subtle`	`#ffe9e5` `color.red50`
`background-color-destructive-subtle--hover`	`#ffdad3` `color.red100`
`background-color-destructive-subtle--active`	`#ffc8bd` `color.red200`
`background-color-error`	`#f54739` `color.red500`
`background-color-error--hover`	`#d74032` `color.red600`
`background-color-error--active`	`#bf3c2c` `color.red700`
`background-color-error-subtle`	`#ffe9e5` `color.red50`
`background-color-error-subtle--hover`	`#ffdad3` `color.red100`
`background-color-error-subtle--active`	`#ffc8bd` `color.red200`
`background-color-warning-subtle`	`#fdf2d5` `color.yellow50`
`background-color-success-subtle`	`#dff2eb` `color.green50`
`background-color-notice-subtle`	`#eaecf0` `color.gray100`
`background-color-content-added`	`#a3d3ff` `color.blue999`
`background-color-content-removed`	`#ffe49c` `color.yellow999`
`background-color-transparent`	`transparent` `color.transparent`
`background-color-backdrop-light` Backdrop is the term used by CSS Fullscreen API and is used to dim the background when a modal Dialog is open. Also known as overlay mask.	`rgba( 255, 255, 255, 0.65 )` `color.opacity-medium-light`
`background-color-backdrop-dark`	`rgba( 0, 0, 0, 0.65 )` `color.opacity-medium-dark`
`background-color-button-quiet--hover`	`rgba( 0, 24, 73, 0.027 )` `color.modifier-gray100-translucent`
`background-color-button-quiet--active`	`rgba( 0, 24, 73, 0.082 )` `color.modifier-gray200-translucent`
`background-color-input-binary--checked`	`#36c` `color.blue700`
`background-color-tab-list-item-framed--hover`	`rgba( 255, 255, 255, 0.3 )` `color.opacity-low-light`
`background-color-tab-list-item-framed--active`	`rgba( 255, 255, 255, 0.65 )` `color.opacity-medium-light`

Border color

For more information on border tokens visit the Border page.

List of design token names, values and metadata for border-color
Name	Value
`border-color-base`	`#a2a9b1` `color.gray400`
`border-color-subtle`	`#c8ccd1` `color.gray300`
`border-color-muted`	`#dadde3` `color.gray200`
`border-color-interactive`	`#72777d` `color.gray500`
`border-color-interactive--hover`	`#27292d` `color.gray800`
`border-color-interactive--active`	`#202122` `color.gray900`
`border-color-disabled`	`#c8ccd1` `color.gray300`
`border-color-inverted`	`#fff` `color.white`
`border-color-inverted-fixed` The same as color-inverted in light mode, but does not change in dark mode. Use this for things that should be white in both modes.	`#fff` `color.white`
`border-color-progressive`	`#6485d1` `color.blue500`
`border-color-progressive--hover`	`#3056a9` `color.blue800`
`border-color-progressive--active`	`#233566` `color.blue900`
`border-color-progressive--focus`	`#36c` `color.blue700`
`border-color-destructive`	`#f54739` `color.red500`
`border-color-destructive--hover`	`#9f3526` `color.red800`
`border-color-destructive--active`	`#612419` `color.red900`
`border-color-destructive--focus`	`#36c` `color.blue700`
`border-color-error`	`#f54739` `color.red500`
`border-color-error--hover`	`#9f3526` `color.red800`
`border-color-error--active`	`#612419` `color.red900`
`border-color-warning`	`#ab7f2a` `color.yellow500`
`border-color-success`	`#099979` `color.green500`
`border-color-notice`	`#72777d` `color.gray500`
`border-color-content-added`	`#a3d3ff` `color.blue999`
`border-color-content-removed`	`#ffe49c` `color.yellow999`
`border-color-transparent`	`transparent` `color.transparent`
`border-color-divider`	`#a2a9b1` `color.gray400`
`border-color-input--hover`	`#72777d` `border-color.interactive`
`border-color-input-binary`	`#72777d` `border-color.interactive`
`border-color-input-binary--hover`	`#3056a9` `border-color.progressive--hover`
`border-color-input-binary--active`	`#233566` `border-color.progressive--active`
`border-color-input-binary--focus`	`#36c` `border-color.progressive--focus`
`border-color-input-binary--checked`	`#6485d1` `border-color.progressive`

Box-shadow color

For more information on border tokens visit the Box-shadow page.

List of design token names, values and metadata for --cdx-demo-box-shadow-color
Name	Value
`box-shadow-color-base`	`#a2a9b1` `color.gray400`
`box-shadow-color-progressive--active`	`#233566` `color.blue900`
`box-shadow-color-progressive--focus`	`#36c` `color.blue700`
`box-shadow-color-progressive-selected`	`#36c` `color.blue700`
`box-shadow-color-progressive-selected--hover`	`#3056a9` `color.blue800`
`box-shadow-color-progressive-selected--active`	`#233566` `color.blue900`
`box-shadow-color-destructive--focus`	`#36c` `color.blue700`
`box-shadow-color-inverted`	`#fff` `color.white`
`box-shadow-color-alpha-base`	`rgba( 0, 0, 0, 0.06 )` `color.opacity-lowest-dark`
`box-shadow-color-transparent`	`transparent` `color.transparent`

Accent color

List of design token names, values and metadata for background-color
Name	Value
`accent-color-base`	`#36c` `color.accent`

Color ​

Text color ​

Background color ​

Border color ​