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 — #0062ff
`$interactive-02`	Secondary interactive color; Secondary button	Gray 100 — #171717
`$interactive-03`	4.5:1 AA contrast; Tertiary button	Blue 60 — #0062ff
`$interactive-04`	3:1 AA contrast; Selected elements; Active elements; Accent icons	Blue 60 — #0062ff
`$ui-01`	Primary container background; Secondary page background	Gray 10 — #f3f3f3
`$ui-02`	Primary page background; Secondary container background	White — #ffffff
`$ui-03`	Subtle border; Tertiary background color	Gray 20 — #dcdcdc
`$ui-04`	3:1 AA element contrast; Medium contrast border	Gray 50 — #8c8c8c
`$ui-05`	4.5:1 AA element contrast; High contrast border; Emphasis elements	Gray 100 — #171717
`$text-01`	Primary text; Body copy; Headers; Hover text color for text-02	Gray 100 — #171717
`$text-02`	Secondary text; Input labels; Help text	Gray 70 — #565656
`$text-03`	Placeholder text	Gray 50 — #8c8c8c
`$text-04`	Text on interactive colors	White — #ffffff
`$link-01`	Primary links; Ghost button	Blue 60 — #0062ff
`$icon-01`	Primary icons	Gray 100 — #171717
`$icon-02`	Secondary icons	Gray 70 — #565656
`$icon-03`	Tertiary icons; Icons on interactive colors; Icons on non-ui colors	White — #ffffff
`$field-01`	Default input fields; Field color on $ui-backgrounds	Gray 10 — #f3f3f3
`$field-02`	Input field color on $ui-02 backgrounds	White — #ffffff
`$inverse-01`	Inverse text color; Inverse icon color	White — #ffffff
`$inverse-02`	High contrast backgrounds; High contrast elements	Gray 80 — #3d3d3d
`$support-01`	Error	Red 60 — #da1e28
`$support-02`	Success	Green 50 — #24a148
`$support-03`	Warning	Yellow — #fdd13a
`$support-04`	Information	Blue 70 — #054ada
`$inverse-support-01`	Danger in high contrast moments	Red 50 — #fb4b53
`$inverse-support-02`	Success in high contrast moments	Green 40 — #3dbb61
`$inverse-support-03`	Warning in high contrast moments	Yellow — #fdd13a
`$inverse-support-04`	Information in high contrast moments	Blue 50 — #408bfc
`$overlay-01`	Background overlay	Gray 100 — #171717 @ 50%

Interactive color tokens

Token	Role	Value
`$focus`	Focus border; Focus underline	Blue 60 — #0062ff
`$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-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
`$active-primary`	$interactive-01 active	Blue 80 — #0530ad
`$active-secondary`	$interactive-02 active; $inverse-01 active	Gray 60 — #6f6f6f
`$active-tertiary`	$interactive-03 active	Blue 80 — #0530ad
`$active-ui`	$ui-01 active; $ui-02 active	Gray 30 — #bebebe
`$active-danger`	Danger active; $support-01 active	Red 80 — #750e13
`$selected-ui`	Selected UI elements	Gray 20 — #dcdcdc
`$highlight`	$interactive-01 highlight	Blue 20 — #C9deff
`$skeleton-01`	Skeleton state of graphics	Gray 10 hover — #e5e5e5
`$skeleton-02`	Skeleton state of texts	Gray 30 — #bebebe
`$visited-link`	Visited links	Purple 60 — #8a3ffc
`$disabled-01`	Disabled fields; Disabled backgrounds; Disabled border	Gray 10 — #f3f3f3
`$disabled-02`	Disabled elements on $disabled-01; Disabled label; Disabled text on $disabled-01; Disabled icons; Disabled border	Gray 30 — #bebebe
`$disabled-03`	Disabled text on $disabled-02; Disabled icons on $disabled-02	Gray 50 — #8c8c8c

Color and accessibility

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

Edit this page on GitHub

Color: Overview

Guidelines: Iconography