Color – Carbon Design System

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`	Danger button background; 3:1 AA contrast	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
`$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 50 — #24a148
`$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 — #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-ui-light`	“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-danger`	Danger active; $support-01 active	Red 80 — #750e13
`$selected-ui`	Selected UI elements	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.

Edit this page on GitHub

Color: Overview

Color: Code