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 colors

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 colors

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-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-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-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

Accent color

List of design token names, values and metadata for background-color

Name	Value
accent-color-base	#36c color.accent

Border and box-shadow colors

For information on border colors visit Border and for box-shadow colors Box-shadow token page.