Skip to main contentCarbon Design System

Color

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

TokenRoleValue
$background
  • Default page background;
  • UI Shell base color
  • White
  • #ffffff
$background-hover
  • Hover color for $background;
  • Hover color for transparent backgrounds
  • Gray 50, 12%
  • #8d8d8d @ 12%
$background-active
  • Active color for $background
  • Gray 50, 50%
  • #8d8d8d @ 50%
$background-selected
  • Selected color for $background
  • Gray 50, 20%
  • #8d8d8d @ 20%
$background-selected-hover
  • Hover color for $background-selected
  • Gray 50, 32%
  • #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

TokenRoleValue
$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
  • #e8e8e8
$layer-hover-02
  • Hover color for $layer-02
  • Gray 10 hover
  • #e8e8e8
$layer-hover-03
  • Hover color for $layer-03
  • Gray 10 hover
  • #e8e8e8
$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

TokenRoleValue
$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 40
  • #a8a8a8
$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

TokenRoleValue
$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
  • #e8e8e8
$field-hover-02
  • Hover color for $field-02
  • Gray 10 hover
  • #e8e8e8
$field-hover-03
  • Hover color for $field-03
  • Gray 10 hover
  • #e8e8e8

Border

TokenRoleValue
$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 30
  • #c6c6c6
$border-subtle-02
  • Subtle borders paired with $layer-02
  • Gray 20
  • #e0e0e0
$border-subtle-03
  • Subtle borders paired with $layer-03
  • Gray 30
  • #c6c6c6
$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-tile-01
  • Operable tile indicator paired with $layer-01
  • Gray 30
  • #c6c6c6
$border-tile-02
  • Operable tile indicator paired with $layer-02
  • Gray 40
  • #a8a8a8
$border-tile-03
  • Operable tile indicator paired with $layer-03
  • Gray 30
  • #c6c6c6
$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

TokenRoleValue
$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%
  • #161616 – 25%

Link

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

TokenRoleValue
$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-interactive
  • Icons that indicate operability
  • Blue 60
  • #0f62fe
$icon-inverse
  • Inverse icon color
  • White
  • #ffffff
$icon-disabled
  • Disabled icon color
  • Gray 100 – 25%
  • #161616 – 25%

Button

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

TokenRoleValue
$support-error
  • Error;
  • Invalid state
  • Red 60
  • #da1e28
$support-success
  • Success;
  • On
  • Green 50
  • #24a148
$support-warning
  • Warning;
  • Caution
  • Yellow
  • #f1c21b
$support-info
  • Information
  • Blue 70
  • #0043ce
$support-error-inverse
  • Error in high contrast moments
  • Red 50
  • #fa4d56
$support-success-inverse
  • Success in high contrast moments
  • Green 40
  • #42be65
$support-warning-inverse
  • Warning in high contrast moments
  • Yellow
  • #f1c21b
$support-info-inverse
  • Information in high contrast moments
  • Blue 50
  • #4589ff

Focus

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

TokenRoleValue
$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, 50%
  • #161616 @ 50%
$skeleton-element
  • Skeleton color for text and UI elements
  • Gray 30
  • #c6c6c6
$skeleton-background
  • Skeleton color for containers
  • Gray 10 hover
  • #e5e5e5

Tag

TokenRoleValue
$tag-background-gray
  • Gray tag background
  • Gray 20
  • #e0e0e0
$tag-color-gray
  • Gray tag text;
  • Gray tag icon
  • Gray 100
  • #161616
$tag-hover-gray
  • Gray tag hover for $tag-background-gray
  • Gray 20 hover
  • #d1d1d1
$tag-border-gray
  • Gray tag border for operational tag
  • Gray 40
  • #a8a8a8
$tag-background-cool-gray
  • Cool gray tag background
  • Cool gray 20
  • #dde1e6
$tag-color-cool-gray
  • Cool gray tag text;
  • Cool gray tag icon
  • Cool gray 100
  • #121619
$tag-hover-cool-gray
  • Cool gray tag hover for $tag-background-cool-gray
  • Cool gray 20 hover
  • #cdd3da
$tag-border-cool-gray
  • Cool gray tag border for operational tag
  • Cool gray 40
  • #a2a9b0
$tag-background-warm-gray
  • Warm gray tag background
  • Warm gray 20
  • #e5e0df
$tag-color-warm-gray
  • Warm gray tag text;
  • Warm gray tag icon
  • Warm gray 100
  • #171414
$tag-hover-warm-gray
  • Warm gray tag hover for $tag-background-warm-gray
  • Warm gray 20 hover
  • #d8d0cf
$tag-border-warm-gray
  • Warm gray tag border for operational tag
  • Warm gray 40
  • #ada8a8
$tag-background-red
  • Red tag background
  • Red 20
  • #ffd7d9
$tag-color-red
  • Red tag text;
  • Red tag icon
  • Red 70
  • #a2191f
$tag-hover-red
  • Red tag hover for $tag-background-red
  • Red 20 hover
  • #ffc2c5
$tag-border-red
  • Red tag border for operational tag
  • Red 40
  • #ff8389
$tag-background-magenta
  • Magenta tag background
  • Magenta 20
  • #ffd6e8
$tag-color-magenta
  • Magenta tag text;
  • Magenta tag icon
  • Magenta 70
  • #9f1853
$tag-hover-magenta
  • Magenta tag hover for $tag-background-magenta
  • Magenta 20 hover
  • #ffbdda
$tag-border-magenta
  • Magenta tag border for operational tag
  • Magenta 40
  • #ff7eb6
$tag-background-purple
  • Purple tag background
  • Purple 20
  • #e8daff
$tag-color-purple
  • Purple tag text;
  • Purple tag icon
  • Purple 70
  • #6929c4
$tag-hover-purple
  • Purple tag hover for $tag-background-purple
  • Purple 20 hover
  • #dcc7ff
$tag-border-purple
  • Purple tag border for operational tag
  • Purple 40
  • #be95ff
$tag-background-blue
  • Blue tag background
  • Blue 20
  • #d0e2ff
$tag-color-blue
  • Blue tag text;
  • Blue tag icon
  • Blue 70
  • #0043ce
$tag-hover-blue
  • Blue tag hover for $tag-background-blue
  • Blue 20 hover
  • #b8d3ff
$tag-border-blue
  • Blue tag border for operational tag
  • Blue 40
  • #78a9ff
$tag-background-cyan
  • Cyan tag background
  • Cyan 20
  • #bae6ff
$tag-color-cyan
  • Cyan tag text;
  • Cyan tag icon
  • Cyan 70
  • #00539a
$tag-hover-cyan
  • Cyan tag hover for $tag-background-cyan
  • Cyan 20 hover
  • #99daff
$tag-border-cyan
  • Cyan tag border for operational tag
  • Cyan 40
  • #33b1ff
$tag-background-teal
  • Teal tag background
  • Teal 20
  • #9ef0f0
$tag-color-teal
  • Teal tag text;
  • Teal tag icon
  • Teal 70
  • #005d5d
$tag-hover-teal
  • Teal tag hover for $tag-background-teal
  • Teal 20 hover
  • #57e5e5
$tag-border-teal
  • Teal tag border for operational tag
  • Teal 40
  • #08bdba
$tag-background-green
  • Green tag background
  • Green 20
  • #a7f0ba
$tag-color-green
  • Green tag text;
  • Green tag icon
  • Green 70
  • #0e6027
$tag-hover-green
  • Green tag hover for $tag-background-green
  • Green 20 hover
  • #74e792
$tag-border-green
  • Green tag border for operational tag
  • Green 40
  • #42be65