Color – Carbon Design System

Outdated content: The tokens listed in the table are from v10 but will be updated soon. For now, check out v11 elements preview to see the v11 tokens and values.

Tokens by theme

Core color tokens

Token	Role	Value
`$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

Token	Role	Value
`$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 — #0043ce
`$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

Edit this page on GitHub

Color: Overview

Color: Code