Skip to main contentCarbon Design System

Color

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-inverse-hover
  • Hover color for links on $background-inverse backgrounds
  • Blue 30
  • #a6c8ff
$link-inverse-active
  • Active color for links on $background-inverse backgrounds
  • Gray 10
  • #f4f4f4
$link-inverse-visited
  • Color for visited links on $background-inverse backgrounds
  • Purple 40
  • #be95ff
$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
  • Yellow 30
  • #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 30
  • #f1c21b
$support-info-inverse
  • Information in high contrast moments
  • Blue 50
  • #4589ff
$support-caution-minor
  • Minor caution status
  • Yellow 30
  • #f1c21b
$support-caution-major
  • Major caution status
  • Orange 40
  • #ff832b
$support-caution-undefined
  • Undefined status
  • Purple 60
  • #8a3ffc

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

AI

TokenRoleValue
$ai-aura-start
  • Linear gradient start value for large AI layers
  • Blue 50, 10%
  • #4589ff @ 10%
$ai-aura-start-sm
  • Linear gradient start value for small AI layers
  • Blue 50, 16%
  • #4589ff @ 16%
$ai-aura-end
  • Linear gradient start value for all AI layers
  • White, 0%
  • #ffffff @ 0%
$ai-aura-hover-start
  • Linear gradient start value for the AI aura hover
  • Blue 50, 32%
  • #4589ff
$ai-aura-hover-end
  • Linear gradient end value for the AI aura hover
  • White, 0%
  • #ffffff @ 0%
$ai-aura-hover-background
  • Hover background color for AI layers
  • Blue 10
  • #edf5ff
$ai-border-start
  • Linear gradient start value for AI borders
  • Blue 30, 64%
  • #a6c8ff @ 64%
$ai-border-end
  • Linear gradient end value for AI borders
  • Blue 40
  • #78a9ff
$ai-border-strong
  • Medium contrast border for AI elements;
  • Border-bottom paired with AI fields;
  • 3:1 AA non-text contrast
  • Blue 50
  • #4589ff
$ai-drop-shadow
  • Drop shadow for the AI layer
  • Blue 60, 10%
  • #0f62fe @ 10%
$ai-inner-shadow
  • Inner shadow for the AI layer
  • Blue 50, 10%
  • #4589ff @ 10%
$ai-popover-background
  • Background color for the AI explainability popover
  • White
  • #ffffff
$ai-popover-shadow-outer-01
  • 1 of 2 shadow colors for the AI explainability popover
  • Blue 70, 6%
  • #0043ce @ 6%
$ai-popover-shadow-outer-02
  • 2 of 2 shadow colors for the AI explainability popover
  • Black, 4%
  • #000000 @ 4%
$ai-skeleton-element
  • Skeleton color for AI text and UI elements
  • Blue 50
  • #4589ff
$ai-skeleton-background
  • Skeleton color for AI containers
  • Blue 20
  • #d0e2ff
$ai-overlay
  • Background overlay for AI components
  • Blue 100, 50%
  • #001141 @ 50%

Chat

TokenRoleValue
$chat-avatar-bot
  • Chat avatar background color for bots
  • Gray 60
  • #6f6f6f
$chat-avatar-agent
  • Chat avatar background color for agents
  • Gray 80
  • #393939
$chat-avatar-user
  • Chat avatar background color for users
  • Blue 60
  • #0f62fe
$chat-bubble-user
  • Chat bubble background color for users
  • Gray 20
  • #e0e0e0
$chat-bubble-agent
  • Chat bubble background color for agents
  • White
  • #ffffff
$chat-bubble-border
  • Chat bubble border color for agents
  • Gray 20
  • #e0e0e0
$chat-prompt-background
  • Background color for chat prompt input
  • White
  • #ffffff
$chat-prompt-border-start
  • Linear gradient start value for chat prompts border
  • Gray 10
  • #f4f4f4
$chat-prompt-border-end
  • Linear gradient end value for chat prompts border
  • Gray 10, 0%
  • #f4f4f4 @ 0%
$chat-shell-background
  • Chat shell background color
  • White
  • #ffffff
$chat-header-background
  • Chat header background color
  • White
  • #ffffff

Chat button

TokenRoleValue
$chat-button
  • Chat quick action button color
  • $link-primary
  • #0f62fe
$chat-button-hover
  • Hover color for $chat-button
  • $background-hover
  • #8d8d8d @ 12%
$chat-button-text-hover
  • Text color for hovered chat button
  • $link-primary-hover
  • #0043ce
$chat-button-active
  • Active color for $chat-button
  • $background-active
  • #8d8d8d @ 50%
$chat-button-selected
  • Selected color for $chat-button
  • $background-selected
  • #8d8d8d @ 20%
$chat-button-text-selected
  • Text color for selected chat-button
  • $text-secondary
  • #525252