Color
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 right mode.
Text colors
Name | Value |
---|---|
color-base | #202122 |
color-base-fixed | #202122 |
color-base--hover | #404244 |
color-emphasized | #101418 |
color-subtle | #54595d |
color-placeholder | #72777d |
color-disabled | #72777d |
color-inverted | #fff |
color-inverted-fixed | #fff |
color-progressive | #36c |
color-progressive--hover | #4b77d6 |
color-progressive--active | #233566 |
color-progressive--focus | #36c |
color-destructive | #d73333 |
color-destructive--hover | #fc493b |
color-destructive--active | #9f3526 |
color-destructive--focus | #36c |
color-visited | #6a60b0 |
color-destructive--visited | #9f5555 |
color-error | #d73333 |
color-warning | #eeb533 |
color-success | #177860 |
color-notice | #202122 |
color-content-added | #006400 |
color-content-removed | #8b0000 |
color-base--subtle | #54595d |
color-link-red | #d73333 |
color-link-red--hover | #fc493b |
color-link-red--active | #9f3526 |
color-link-red--focus | #36c |
color-link-red--visited | #9f5555 |
Background colors
Name | Value |
---|---|
background-color-base | #fff |
background-color-base-fixed | #fff |
background-color-neutral | #eaecf0 |
background-color-neutral-subtle | #f8f9fa |
background-color-interactive | #eaecf0 |
background-color-interactive-subtle | #f8f9fa |
background-color-disabled | #c8ccd1 |
background-color-disabled-subtle | #eaecf0 |
background-color-inverted | #101418 |
background-color-progressive | #36c |
background-color-progressive--hover | #4b77d6 |
background-color-progressive--active | #233566 |
background-color-progressive--focus | #36c |
background-color-progressive-subtle | #f1f4fd |
background-color-destructive | #d73333 |
background-color-destructive--hover | #fc493b |
background-color-destructive--active | #9f3526 |
background-color-destructive--focus | #36c |
background-color-destructive-subtle | #ffe9e5 |
background-color-error | #d73333 |
background-color-error--hover | #fc493b |
background-color-error--active | #9f3526 |
background-color-error-subtle | #ffe9e5 |
background-color-warning-subtle | #fdf2d5 |
background-color-success-subtle | #dff2eb |
background-color-notice-subtle | #eaecf0 |
background-color-content-added | #a3d3ff |
background-color-content-removed | #ffe49c |
background-color-transparent | transparent |
background-color-backdrop-light | rgba( 255, 255, 255, 0.65 ) |
background-color-backdrop-dark | rgba( 0, 0, 0, 0.65 ) |
background-color-button-quiet--hover | rgba( 0, 24, 73, 0.027 ) |
background-color-button-quiet--active | rgba( 0, 24, 73, 0.082 ) |
background-color-input-binary--checked | #36c |
background-color-tab-list-item-framed--hover | rgba( 255, 255, 255, 0.3 ) |
background-color-tab-list-item-framed--active | rgba( 255, 255, 255, 0.65 ) |
Accent color
Name | Value |
---|---|
accent-color-base | #36c |
Border and box-shadow colors
For information on border colors visit Border and for box-shadow colors Box-shadow token page.