Skip to main content
Color brings a design to life. Color is versatile; it's used to express emotion and tone, as well as place emphasis and create associations. Color should always be used in meaningful and intentional ways in order to create patterns and visual cues.

Color palette

The Carbon color palette is designed and implemented in a themable manner. The universal color variables are determined by common roles and usage; it is not based singularly on a color value (i.e. unique hex code). The same color value may be assigned to multiple variables in a theme's palette when the values have distinctly different roles.

A universal variable can also have multiple associated roles when the color is consistently used across those roles. This allows for uniform color application across themes while giving each theme the freedom to express its own individuality at a more detailed level.

Color terms

ValueA unique color (hex code) assigned to a universal variable
RoleThe systematic usage/s of a color value
VariableThe code identifier for a unique role or set of roles. Variables are universal and never change across themes. Within a theme variables are assigned appropriate values.
ThemeThe set of unique color values assigned to the universal palette
PaletteThe complete set of universal variables. The palette is the naming conventions of colors used in the UI. Each theme will use the same palette of variables.

Color roles

$brand-01Primary brand
Interactive text
Primary icon color
Border highlight
Emphasis background
$brand-02Supporting brand
$brand-03Tertiary brand
$ui-01Primary background
Layer 1 background
$ui-02Default page background
Layer 0 background
Secondary background
$ui-03Subtle border
$ui-043:1 color contrast
Emphasis border
$ui-054.5:1 color contrast
High contrast border
Secondary icons
$text-01Primary text
Body copy
$text-02Secondary text
Subtle text
Help text
$text-03Placeholder text
$inverse-01Inverse text color
Inverse icon color
$inverse-02Inverse background color
$field-01Field color on $ui-01 background
$field-02Field color on $ui-02 background
$hover-primary$brand-01 element hoverdarken($brand-01, 10%)
$hover-primary-text$brand-01 text hoverdarken($brand-01, 15%)
$hover-dangerDanger hoverdarken($support-01, 10%)
$hover-secondary$ui-05 element hover$brand-01
$hover-rowRow hoverrgba($brand-02, 0.1)

Color contrast | WCAG AA standards

Type colors

All type color combinations on Carbon must pass WCAG AA standards of 4.5:1 for normal text and 3:1 for large text. For larger text, if the font weight is light (300) or normal (400) the text should be no smaller than 24px. If the font weight is Semi-Bold (600) then the large text should be no smaller than 19px. In the table below are approved Carbon color combinations.

UI colors

Certain UI color combinations on Carbon must pass the new WCAG AA standards of a minimum 3:1 ratio. Carbon complies with a 4.5:1 color ratio for certain controls and all icons. In the table below are approved Carbon color combinations.

Additional color accessibility

Other color accessibility concerns include color blindness and low vision users. Learn more about these additional color accessibility guidelines in the accessibility section of the Carbon website.