Carbon Design System

v11 update: Color tokens underwent a major renaming in version 11. Visually components and styles look the same across v10 and v11, but the token names have changed significantly to improve usability and extend theming functionality. This website and page contain only the v11 tokens. Helpful links: v10 color tokens | Color token migration guide.

Tokens by theme

Background

Token	Role	Value
`$background`	Default page background; UI Shell base color	White — #ffffff
`$background-hover`	Hover color for $background; Hover color for transparent backgrounds	Gray 50, 12% opacity — #8d8d8d @ 12%
`$background-active`	Active color for $background	Gray 50, 32% opacity — #8d8d8d @ 32%
`$background-selected`	Selected color for $background	Gray 50, 20% opacity — #8d8d8d @ 20%
`$background-selected-hover`	Hover color for $background-selected	Gray 50, 32% opacity — #8d8d8d @ 32%
`$background-inverse`	High contrast backgrounds; High contrast elements	Gray 80 — #393939
`$background-inverse-hover`	Hover color for $background-inverse	Gray 80 hover — #4c4c4c
`$background-brand`	Feature background color	Blue 60 — #0f62fe

Layer

Token	Role	Value
`$layer-01`	Container color on $background; Secondary page background	Gray 10 — #f4f4f4
`$layer-02`	Container color on $layer-01	White — #ffffff
`$layer-03`	Container color on $layer-02	Gray 10 — #f4f4f4
`$layer-hover-01`	Hover color for $layer-01	Gray 10 hover — #e5e5e5
`$layer-hover-02`	Hover color for $layer-02	Gray 10 hover — #e5e5e5
`$layer-hover-03`	Hover color for $layer-03	Gray 10 hover — #e5e5e5
`$layer-active-01`	Active color for $layer-01	Gray 30 — #c6c6c6
`$layer-active-02`	Active color for $layer-02	Gray 30 — #c6c6c6
`$layer-active-03`	Active color for $layer-03	Gray 30 — #c6c6c6
`$layer-selected-01`	Selected color for $layer-01	Gray 20 — #e0e0e0
`$layer-selected-02`	Selected color for $layer-02	Gray 20 — #e0e0e0
`$layer-selected-03`	Selected color for $layer-03	Gray 20 — #e0e0e0
`$layer-selected-hover-01`	Hover color for $layer-selected-01	Gray 20 hover — #cacaca
`$layer-selected-hover-02`	Hover color for $layer-selected-02	Gray 20 hover — #cacaca
`$layer-selected-hover-03`	Hover color for $layer-selected-03	Gray 20 hover — #cacaca
`$layer-selected-inverse`	High contrast elements; 4.5:1 AA element contrast	Gray 100 — #161616
`$layer-selected-disabled`	Disabled color for selected layers	Gray 50 — #8d8d8d

Layer accent

Token	Role	Value
`$layer-accent-01`	Tertiary background paired with $layer-01	Gray 20 — #e0e0e0
`$layer-accent-02`	Tertiary background paired with $layer-02	Gray 20 — #e0e0e0
`$layer-accent-03`	Tertiary background paired with $layer-03	Gray 20 — #e0e0e0
`$layer-accent-hover-01`	Hover color for $layer-accent-01	Gray 20 hover — #cacaca
`$layer-accent-hover-02`	Hover color for $layer-accent-02	Gray 20 hover — #cacaca
`$layer-accent-hover-03`	Hover color for $layer-accent-03	Gray 20 hover — #cacaca
`$layer-accent-active-01`	Active color for $layer-accent-01	Gray 30 — #c6c6c6
`$layer-accent-active-02`	Active color for $layer-accent-02	Gray 40 — #a8a8a8
`$layer-accent-active-03`	Active color for $layer-accent-03	Gray 40 — #a8a8a8

Field

Token	Role	Value
`$field-01`	Default input fields; Fields on $background	Gray 10 — #f4f4f4
`$field-02`	Secondary input fields; Fields on $layer-01	White — #ffffff
`$field-03`	Tertiary input fields; Fields on $layer-02	Gray 10 — #f4f4f4
`$field-hover-01`	Hover color for $field-01	Gray 10 hover — #e5e5e5
`$field-hover-02`	Hover color for $field-02	Gray 10 hover — #e5e5e5
`$field-hover-03`	Hover color for $field-03	Gray 10 hover — #e5e5e5

Border

Token	Role	Value
`$border-interactive`	3:1 AA contrast; Selected borders; Active borders	Blue 60 — #0f62fe
`$border-subtle-00`	Subtle borders paired with $background	Gray 20 — #e0e0e0
`$border-subtle-01`	Subtle borders paired with $layer-01	Gray 20 — #e0e0e0
`$border-subtle-02`	Subtle borders paired with $layer-02	Gray 20 — #e0e0e0
`$border-subtle-03`	Subtle borders paired with $layer-03	Gray 20 — #e0e0e0
`$border-subtle-selected-01`	Selected color for $border-subtle-01	Gray 30 — #c6c6c6
`$border-subtle-selected-02`	Selected color for $border-subtle-02	Gray 30 — #c6c6c6
`$border-subtle-selected-03`	Selected color for $border-subtle-03	Gray 30 — #c6c6c6
`$border-strong-01`	Medium contrast border; Border-bottom paired with $field-01; 3:1 AA non-text contrast	Gray 50 — #8d8d8d
`$border-strong-02`	Medium contrast border; Border-bottom paired with $field-02; 3:1 AA non-text contrast	Gray 50 — #8d8d8d
`$border-strong-03`	Medium contrast border; Border-bottom paired with $field-03; 3:1 AA non-text contrast	Gray 50 — #8d8d8d
`$border-inverse`	High contrast border; 4.5:1 AA non-text contrast	Gray 100 — #161616
`$border-disabled`	Disabled border color (excluding border-subtles)	Gray 30 — #c6c6c6

Text

Token	Role	Value
`$text-primary`	Primary text; Body copy; Headers; Hover text color for $text-secondary	Gray 100 — #161616
`$text-secondary`	Secondary text; Input labels	Gray 70 — #525252
`$text-placeholder`	Placeholder text	Gray 40 — #a8a8a8
`$text-on-color`	Text on interactive colors; Text on button colors	White — #ffffff
`$text-on-color-disabled`	Disabled color for $text-on-color	Gray 50 — #8d8d8d
`$text-helper`	Tertiary text; Help text	Gray 60 — #6f6f6f
`$text-error`	Error message text	Red 60 — #da1e28
`$text-inverse`	Inverse text color	White — #ffffff
`$text-disabled`	Disabled text color	Gray 100, 25% opacity — #161616 @ 25%

Link

Token	Role	Value
`$link-primary`	Primary links	Blue 60 — #0f62fe
`$link-primary-hover`	Hover color for $link-primary	Blue 70 — #0043ce
`$link-secondary`	Secondary link color for lower contrast backgrounds	Blue 70 — #0043ce
`$link-inverse`	Links on $background-inverse backgrounds	Blue 40 — #78a9ff
`$link-visited`	Color for visited links	Purple 60 — #8a3ffc

Icon

Token	Role	Value
`$icon-primary`	Primary icons	Gray 100 — #161616
`$icon-secondary`	Secondary icons	Gray 70 — #525252
`$icon-on-color`	Icons on interactive colors; Icons on non-layer colors	White — #ffffff
`$icon-on-color-disabled`	Disabled color for $icon-on-color	Gray 50 — #8d8d8d
`$icon-inverse`	Inverse icon color	White — #ffffff
`$icon-disabled`	Disabled icon color	Gray 100, 25% opacity — #161616 @ 25%

Button

Token	Role	Value
`$button-primary`	Primary button color	Blue 60 — #0f62fe
`$button-primary-hover`	Hover color for $button-primary	Blue 60 hover — #0353e9
`$button-primary-active`	Active color for $button-primary	Blue 80 — #002d9c
`$button-secondary`	Secondary button color	Gray 80 — #393939
`$button-secondary-hover`	Hover color for $button-secondary	Gray 80 hover — #4c4c4c
`$button-secondary-active`	Active color for $button-secondary	Gray 60 — #6f6f6f
`$button-tertiary`	Tertiary button color; 4.5:1 AA text contrast	Blue 60 — #0f62fe
`$button-tertiary-hover`	Hover color for $button-tertiary	Blue 60 hover — #0353e9
`$button-tertiary-active`	Active color for $button-tertiary	Blue 80 — #002d9c
`$button-danger-primary`	Primary danger button color; 3:1 AA non-text contrast	Red 60 — #da1e28
`$button-danger-secondary`	Tertiary danger button color; Ghost danger button color; 4.5:1 AA text contrast	Red 60 — #da1e28
`$button-danger-hover`	Hover color for $danger-primary; Hover color for $danger-secondary	Red 60 hover — #ba1b23
`$button-danger-active`	Active color for $danger-primary; Active color for $danger-secondary	Red 80 — #750e13
`$button-separator`	Fluid button separator; 3:1 AA non-text contrast	Gray 20 — #e0e0e0
`$button-disabled`	Disabled color for button elements	Gray 30 — #c6c6c6

Support

Token	Role	Value
`$support-error`	Error; Invalid state	Red 60 — #da1e28
`$support-success`	Success; On	Green 60 — #198038
`$support-warning`	Warning; Caution	Yellow — #f1c21b
`$support-info`	Information	Blue 70 — #0043ce
`$support-success-inverse`	Success in high contrast moments	Green 40 — #42be65
`$support-warning-inverse`	Warning in high contrast moments	Yellow — #f1c21b
`$support-error-inverse`	Error in high contrast moments	Red 50 — #fa4d56
`$support-info-inverse`	Information in high contrast moments	Blue 50 — #4589ff

Focus

Token	Role	Value
`$focus`	Focus border; Focus underline	Blue 60 — #0f62fe
`$focus-inset`	Contrast border paired with $focus	White — #ffffff
`$focus-inverse`	Focus on high contrast moments	White — #ffffff

Miscellaneous

Token	Role	Value
`$interactive`	3:1 AA contrast; Selected elements; Active elements; Accent icons	Blue 60 — #0f62fe
`$highlight`	Highlight color	Blue 20 — #d0e2ff
`$toggle-off`	Off background; 3:1 AA contrast	Gray 50 — #8d8d8d
`$overlay`	Background overlay	Gray 100 — #161616 @ 50%
`$skeleton-element`	Skeleton color for text and UI elements	Gray 30 — #c6c6c6
`$skeleton-background`	Skeleton color for containers	Gray 10 hover — #e5e5e5

Edit this page on GitHub

Color: Overview

Color: Code