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

Carbon color package
Color package demo
Edit this page on GitHub
Previous
Color: Usage
Next
Color: Implementation