Skip to main contentCarbon Design System

Color

Tokens by theme

Core color tokens

TokenRoleValue
$ui-background
  • Default page background
  • White
  • #ffffff
$interactive-01
  • Primary interactive color;
  • Primary buttons
  • Blue 60
  • #0f62fe
$interactive-02
  • Secondary interactive color;
  • Secondary button
  • Gray 80
  • #393939
$interactive-03
  • 4.5:1 AA contrast;
  • Tertiary button
  • Blue 60
  • #0f62fe
$interactive-04
  • 3:1 AA contrast;
  • Selected elements;
  • Active elements;
  • Accent icons
  • Blue 60
  • #0f62fe
$danger-01
  • Danger button background;
  • 3:1 AA contrast
  • Red 60
  • #da1e28
$danger-02
  • Danger button variant;
  • Text;
  • Icon;
  • Border
  • Red 60
  • #da1e28
$ui-01
  • Container background on $ui-background;
  • Secondary page background
  • Gray 10
  • #f4f4f4
$ui-02
  • Container background on $ui-01;
  • `Light` variant background
  • White
  • #ffffff
$ui-03
  • Subtle border;
  • Tertiary background
  • Gray 20
  • #e0e0e0
$ui-04
  • 3:1 aa element contrast;
  • Medium contrast border
  • Gray 50
  • #8d8d8d
$ui-05
  • 4.5:1 aa element contrast;
  • High contrast border;
  • Emphasis elements
  • Gray 100
  • #161616
$button-separator
  • 3:1 aa element contrast;
  • Fluid button separator
  • Gray 20
  • #e0e0e0
$decorative-01
  • “Light” variant elements
  • Gray 20
  • #e0e0e0
$text-01
  • Primary text;
  • Body copy;
  • Headers;
  • Hover text color for $text-02
  • Gray 100
  • #161616
$text-02
  • Secondary text;
  • Input labels
  • Gray 70
  • #525252
$text-03
  • Placeholder text
  • Gray 40
  • #a8a8a8
$text-04
  • Text on interactive colors
  • White
  • #ffffff
$text-05
  • Tertiary text;
  • Help text
  • Gray 60
  • #6f6f6f
$text-error
  • Error message text
  • Red 60
  • #da1e28
$link-01
  • Primary links;
  • Ghost button
  • Blue 60
  • #0f62fe
$link-02
  • Secondary link color for lower contrast backgrounds
  • Blue 70
  • #0043ce
$inverse-link
  • Links on $inverse-02 backgrounds
  • Blue 40
  • #78a9ff
$icon-01
  • Primary icons
  • Gray 100
  • #161616
$icon-02
  • Secondary icons
  • Gray 70
  • #525252
$icon-03
  • Icons on interactive colors;
  • Icons on non-ui colors
  • White
  • #ffffff
$field-01
  • Default input fields;
  • Fields on $ui-backgrounds
  • Gray 10
  • #f4f4f4
$field-02
  • “Light” variant input fields;
  • Fields on $ui-01 backgrounds
  • White
  • #ffffff
$inverse-01
  • Inverse text color;
  • Inverse icon color
  • White
  • #ffffff
$inverse-02
  • High contrast backgrounds;
  • High contrast elements
  • Gray 80
  • #393939
$support-01
  • Error
  • Red 60
  • #da1e28
$support-02
  • Success
  • Green 60
  • #198038
$support-03
  • Warning
  • Yellow
  • #f1c21b
$support-04
  • Information
  • Blue 70
  • #0043ce
$inverse-support-01
  • Danger in high contrast moments
  • Red 50
  • #fa4d56
$inverse-support-02
  • Success in high contrast moments
  • Green 40
  • #42be65
$inverse-support-03
  • Warning in high contrast moments
  • Yellow
  • #f1c21b
$inverse-support-04
  • Information in high contrast moments
  • Blue 50
  • #4589ff
$overlay-01
  • Background overlay
  • Gray 100
  • #161616 @ 50%

Interactive color tokens

TokenRoleValue
$focus
  • Focus border;
  • Focus underline
  • Blue 60
  • #0f62fe
$inverse-focus-ui
  • Focus on high contrast moments
  • White
  • #ffffff
$hover-primary
  • $interactive-01 hover
  • Blue 60 hover
  • #0353e9
$hover-primary-text
  • $interactive-01 text hover
  • Blue 70
  • #054ada
$hover-secondary
  • $interactive-02 hover
  • Gray 80 hover
  • #4c4c4c
$hover-tertiary
  • $interactive-03 hover;
  • $inverse-01 hover
  • Blue 60 hover
  • #0353e9
$hover-ui
  • $ui-01 hover;
  • $ui-02 hover;
  • Transparent background hover
  • Gray 10 hover
  • #e5e5e5
$hover-light-ui
  • “Light” variant hover
  • Gray 10 hover
  • #e5e5e5
$hover-selected-ui
  • Selected row hover
  • Gray 20 hover
  • #cacaca
$hover-danger
  • Danger hover;
  • $support-01 hover
  • Red 60 hover
  • #ba1b23
$hover-row
  • Row hover
  • Gray 10 hover
  • #e5e5e5
$inverse-hover-ui
  • Hover for $inverse-02
  • Gray 80 hover
  • #4c4c4c
$active-primary
  • $interactive-01 active
  • Blue 80
  • #002d9c
$active-secondary
  • $interactive-02 active;
  • $inverse-01 active
  • Gray 60
  • #6f6f6f
$active-tertiary
  • $interactive-03 active
  • Blue 80
  • #002d9c
$active-ui
  • $ui-01 active;
  • $ui-02 active
  • Gray 30
  • #c6c6c6
$active-light-ui
  • “Light” variant active
  • Gray 30
  • #c6c6c6
$active-danger
  • Danger active;
  • $support-01 active
  • Red 80
  • #750e13
$selected-ui
  • Selected UI elements
  • Gray 20
  • #e0e0e0
$selected-light-ui
  • “Light” variant selected
  • Gray 20
  • #e0e0e0
$highlight
  • $interactive-01 highlight
  • Blue 20
  • #d0e2ff
$skeleton-01
  • Skeleton state of graphics
  • Gray 10 hover
  • #e5e5e5
$skeleton-02
  • Skeleton state of texts
  • Gray 30
  • #c6c6c6
$visited-link
  • Visited links
  • Purple 60
  • #8a3ffc
$disabled-01
  • Disabled fields;
  • Disabled backgrounds;
  • Disabled border
  • Gray 10
  • #f4f4f4
$disabled-02
  • Disabled elements on $disabled-01;
  • Disabled label;
  • Disabled text on $disabled-01;
  • Disabled icons;
  • Disabled border
  • Gray 30
  • #c6c6c6
$disabled-03
  • Disabled text on $disabled-02;
  • Disabled icons on $disabled-02
  • Gray 50
  • #8d8d8d

Color and accessibility

Check out the accessibility section for complete guidance on color and accessibility in Carbon.