Color

For documentation on the entire color palette, visit Colors.

Most of the color tokens shipped by Codex are organized by semantic meaning (destructive, progressive, and so on). However, Codex also includes an additional set of "color option" tokens which are intended for presentational purposes. These tokens can be used in combination with one another. For example, consider using color-option-pink with background-color-option-pink instead of mixing colors. Link text can appear on top of any of the background color options while maintaining enough contrast to satisfy the WCAG Level AA accessibility standards. For more information, visit https://www.mediawiki.org/wiki/Codex/Design/Color.

TIP

Some colors vary between light and dark modes. Use the color mode switcher in the site header to check 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-neutral`	`#404244` `color.gray700`
`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-icon-progressive`	`#36c` `color.blue700`
`color-content-added`	`#006400` `color.green999`
`color-content-removed`	`#8b0000` `color.red999`
`color-option-red`	`#bf3c2c` `color.red700`
`color-option-orange`	`#a95226` `color.orange700`
`color-option-yellow`	`#886425` `color.yellow700`
`color-option-lime`	`#1f7a39` `color.lime700`
`color-option-green`	`#177860` `color.green700`
`color-option-blue`	`#36c` `color.blue700`
`color-option-purple`	`#6a60b0` `color.purple700`
`color-option-pink`	`#9b527f` `color.pink700`
`color-option-maroon`	`#9f5555` `color.maroon700`
`color-base--subtle` deprecated	`#54595d` `color.gray600`
`color-link` Default Link color and states	`#36c` `color.progressive`
`color-link--hover`	`#3056a9` `color.progressive--hover`
`color-link--active`	`#233566` `color.progressive--active`
`color-link--focus`	`#36c` `color.progressive--focus`
`color-link--visited`	`#6a60b0` `color.visited`
`color-link--visited--hover`	`#534fa3` `color.visited--hover`
`color-link--visited--active`	`#353262` `color.visited--active`
`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`	`#e8eeff` `color.blue50`
`background-color-progressive-subtle--hover`	`#d9e2ff` `color.blue100`
`background-color-progressive-subtle--active`	`#b6d4fb` `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-target-text`	`#ffead4` `color.orange50`
`background-color-option-red`	`#ffe9e5` `color.red50`
`background-color-option-orange`	`#ffead4` `color.orange50`
`background-color-option-yellow`	`#fdf2d5` `color.yellow50`
`background-color-option-lime`	`#e3f2e4` `color.lime50`
`background-color-option-green`	`#dff2eb` `color.green50`
`background-color-option-blue`	`#e8eeff` `color.blue50`
`background-color-option-purple`	`#f0ecf6` `color.purple50`
`background-color-option-pink`	`#f5ebf2` `color.pink50`
`background-color-option-maroon`	`#f6ebeb` `color.maroon50`
`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-emphasized`	`#202122` `color.gray900`
`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`	`#36c` `color.blue700`
`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-warning--hover`	`#735421` `color.yellow800`
`border-color-warning--active`	`#453217` `color.yellow900`
`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-option-red`	`#f54739` `color.red500`
`border-color-option-orange`	`#d46926` `color.orange500`
`border-color-option-yellow`	`#ab7f2a` `color.yellow500`
`border-color-option-lime`	`#259948` `color.lime500`
`border-color-option-green`	`#099979` `color.green500`
`border-color-option-blue`	`#6485d1` `color.blue500`
`border-color-option-purple`	`#8d7ebd` `color.purple500`
`border-color-option-pink`	`#b5739e` `color.pink500`
`border-color-option-maroon`	`#b57775` `color.maroon500`
`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`	`#36c` `border-color.progressive`

Box-shadow color

For more information on box shadow 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 ​