Skip to main contentCarbon Design System

Color

The Carbon color package helps teams build engaging digital experiences through consistent application of color.

If you’re using @carbon/react, you probably don’t need need to install the color package separately. See our Carbon React guide to start building.

Getting started

To install @carbon/colors in your project, you will need to run the following command using npm:

npm install -S @carbon/colors

If you prefer Yarn, use the following command instead:

yarn add @carbon/colors

Usage

Sass

The @carbon/colors package enables you to access colors from the IBM Design Language in Sass. You can access a color directly from the package by writing the following:

@use '@carbon/colors';
.selector {
background: colors.$blue-50;
}

For a full list of colors exported, refer to the API section in the package’s Sass Documentation.

In addition to individual colors, you can access all colors in a Map using the $colors variable.

@use '@carbon/colors';
@each $swatch, $grades in colors.$colors {
@each $grade in $grades {
//
}
}

Each key in the $colors map is the name of a group of colors, also known as a swatch. The value of each entry is a Map where the keys are the color grade and the values are the hex codes for the color at that grade. For example:

$colors: (
blue: (
10: #edf5ff,
20: #d0e2ff,
30: #a6c8ff,
40: #78a9ff,
50: #4589ff,
60: #0f62fe,
70: #0043ce,

JavaScript

For JavaScript, you can import and use this module by doing the following in your code:

// ESM
import { black, blue, warmGray } from '@carbon/colors';
// CommonJS
const { black, blue, warmGray } = require('@carbon/colors');

Each color swatch is exported as a variable, and each color name is also exported as an object that can be called by specifying grade, for example:

black;
blue[50]; // Using the `blue` object.
warmGray100; // Using the `warmGray100` variable.

Resources