Color

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

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:

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.

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:

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

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:

Usage

Sass

JavaScript

Resources

Carbon color package

Color package demo