Color – Carbon Design System

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

If you’re using carbon-components there’s no reason to install the color package separately. See our get started guide to start building.

Getting started
Usage
Resources

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

You can use the @carbon/colors module in your JavaScript, in addition to your Sass.

Sass

In Sass, you can import the files individual by doing:

@import '@carbon/colors/scss/colors';

This file automatically includes the colors mixin which initializes all the color variables for the IBM Design Language.

These color variables follow the naming convention: $<swatch>-<grade>. For example:

$blue-50;
$cool-gray-10;
$black-100;
$white-0;

You can also use the shorthand form of these colors by dropping the “ namespace:

$blue-50;
$cool-gray-10;
$black-100;
$white-0;

Note: the shorthand variables require that you do not have any other conflicting variables in your setup. Namespaced variables are always preferred for this reason, unless you are confident that no collisions will occur.

If you would like you choose when these variables are defined, then you can call the colors mixin directly by importing the following file:

@import '@carbon/colors/scss/mixins';

// ...
@include colors();

Alongside the color variables detailed above, we also provide a map of colors so that you can programmatically use these values. This map is called $colors and each key is the name of a swatch. The value of these swatches is also a map, but each key is now the grade. In code, this looks like the following:

$colors: (
  'blue': (
    10: #edf4ff,
    // ...
  )
);

You can include this variable by including @carbon/colors/scss/colors or calling the colors() mixin directly.

Migrating from previous versions

If you were originally using a project that had color variables defined as $ibm-color__<swatch>-<grade>, or are relying on $ibm-color-map, you can also use the entrypoint described above to access these colors. They are meant as an easier way to help adopt these packages. However, these variables will be removed in the next release of Carbon.

Similar to previous efforts, we also provide colors in the formats mentioned above. For example:

$ibm-color__blue-50;
$ibm-color__warm-gray-100;

If you would like a mixin to conditionally include these variables, you can include the mixin by using:

@import '@carbon/colors/scss/mixins';

@include ibm--colors();

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

Color: Usage

Color: Implementation