Skip to main contentCarbon Design System

Color

Maintaining consistent and engaging digital interfaces throughout IBM, whether applications or experiences, demands extended guidance around color usage. The following concepts provide the foundation as we strive to achieve balance and harmony through our User Interface design.



Introduction

Application of the color palette brings a unified and recognizable consistency to IBM’s array of digital products and interfaces. This consistency is grounded in a set of well-defined rules about how to work with the Carbon component library in the context of dark and light themes.

6 screenshots showing a range of color schemes and considerations for text and data visualizations

Color anatomy

Carbon’s default themes are derived from the IBM Design Language color palette. The neutral gray family is dominant in the default themes, making use of subtle shifts in value to organize content into distinct zones.

The core blue family serves as the primary action color across all IBM products and experiences. Additional colors are used sparingly and purposefully.

Alert Colors

Layering model

Colors in the neutral gray palette are layered on top of each other to create depth and spatial associations. The layering model defines the logic of how colors stack on top of each other in a UI when using the Carbon themes. Aspects of the layering model are built directly into the themes, color tokens, and components.

The layering model differs between the light and dark themes.

  • In the light themes, layers alternate between White and Gray 10 with each added layer.
  • In the dark themes, layers become one step lighter with each added layer.
Layering model for light themes

Layering model for the White theme (left) and Gray 100 theme (right)


Implementing color

Carbon uses tokens and themes to manage color. Tokens are role-based, and themes specify the color values that serve those roles in the UI.

TermDefinition
ThemeA theme is a collection of colors designed to create a specific aesthetic. Themes control the color value assigned to a token. For example, Gray 100 theme.
TokenA token is the role-based identifier that assigns a color. Unlike hex codes, tokens apply universally across themes. For example, $layer, $border-subtle, $support-error.
RoleA role is the systematic usage of a color assigned to a token. Roles cannot be changed between themes.
ValueA value is the unique visual attribute (hex code, rgba value) assigned to a token through the use of themes.

Themes

Themes serve as an organizational framework for color in Carbon, with each theme based on a specific primary background color. And they actually get their names from their background color. There are two default light themes and two default dark themes.

The light themes are based on White and Gray 10 backgrounds, and the dark themes use Gray 100 and Gray 90 backgrounds. Within each theme, the values for the universal color tokens use the primary background color as the base of its layering model.

White
Light
Gray 10
Gray 100
Dark
Gray 90

Global background colors
ThemePrimary backgroundTokenHex value
WhiteGlobal Background Light$background#ffffff
Gray 10Global Background Light$background#f4f4f4
Gray 90Global Background Dark$background#262626
Gray 100Global Background Dark$background#161616

Light themes

There are two light themes in Carbon: White and Gray 10. For enabled UI colors light themes primarily use the color range of White to Gray 20, and for text and icons uses the color range between Gray 100 and Gray 60.

All of the themes are available in Design kits.

Layering model

In the light themes, layers alternate between White and Gray 10.

  • White theme: uses White as the global background color and is layered first with components using Gray 10 backgrounds. The second layer uses White and the third layer used Gray 10.
  • Gray 10 theme: uses Gray 10 as the global background color and is layered first with components using White backgrounds. The second layer uses Gray 10 and the third layer used White.
A dashboard in the white theme
Gray 10 dropdown on White background.

Gray 10 dropdown on White background.

Gray 10 dropdown on a Gray 20 background

Avoid use of midtones.


Dark themes

There are two dark themes: Gray 90 and Gray 100. For enabled UI colors, dark themes primarily use the color range of Gray 100 through Gray 70, and for text and icons uses the color range between White and Gray 50.

All of the themes are available in Design kits.

Layering model

In the dark themes, layers become one step lighter with each added layer.

  • Gray 90 theme: uses Gray 90 as the global background color and is layered first with components using Gray 80 backgrounds. The second layer uses Gray 70 and the third layer used Gray 60.
  • Gray 100 theme: uses Gray 100 as the global background color and is layered first with components using Gray 90 backgrounds. The second layer uses Gray 80 and the third layer used Gray 70.