# @carbon/colors > Colors for digital and software products using the Carbon Design System Latest version **11.60.0** (published 2026-10-07) · Apache-2.0 license · 0 weekly downloads ## Install ```sh npm install @carbon/colors pnpm add @carbon/colors yarn add @carbon/colors bun add @carbon/colors ``` ## Health **Score 70/100 (B)** — status: active. Positive: has types; esm support; no vulnerabilities; has provenance; recently updated; high maintenance score. Warnings: low downloads. ## Facts | | | |---|---| | Version | 11.60.0 | | Published | 2026-10-07 | | First published | 2018-08-30 | | Weekly downloads | 0 | | License | Apache-2.0 | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 1 | | Unpacked size | 121.7 KB | | Known vulnerabilities | 0 | | Install scripts | yes | | Provenance | attested (GitHub Actions) | | GitHub stars | 9471 | | Maintainers | carbon-design-system, carbon-bot, leechase, jeffreychew, sstrubberg | | Keywords | eyeglass-module, ibm, elements, carbon, carbon-elements, carbon-design-system, components, react | ## Links - npm: https://www.npmjs.com/package/@carbon/colors - Repository: https://github.com/carbon-design-system/carbon - Homepage: https://github.com/carbon-design-system/carbon#readme - Issues: https://github.com/carbon-design-system/carbon/issues - npm.io page: https://npm.io/package/@carbon/colors ## Dependencies (1) - [@ibm/telemetry-js](https://npm.io/package/@ibm/telemetry-js.md) ^1.5.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 11.60.0 (latest) — 2026-10-07 - 11.60.0-rc.0 (next) — 2026-10-05 - 12.0.0-alpha.1 (v12-alpha) — 2026-09-30 - 10.37.5 (v10-next) — 2025-05-14 - 10.18.0-alpha.0 (nightly) — 2020-12-03 - 10.5.0-alpha.5727 (canary) — 2019-09-09 - 0.0.1-beta.5 (beta) — 2019-03-25 - 0.0.1-alpha.32 (alpha) — 2019-02-12 - 12.0.0-alpha.0 — 2026-09-29 - 11.59.0 — 2026-09-23 - 11.59.0-rc.0 — 2026-09-21 - 11.58.0 — 2026-09-09 - 11.58.0-rc.0 — 2026-09-08 - 11.57.0 — 2026-08-27 - 11.57.0-rc.0 — 2026-08-24 - … 287 more at https://npm.io/package/@carbon/colors/versions ## README # @carbon/colors > Colors for digital and software products using the Carbon Design System ## Getting started To install `@carbon/colors` in your project, you will need to run the following command using [npm](https://www.npmjs.com/): ```bash npm install -S @carbon/colors ``` If you prefer [Yarn](https://yarnpkg.com/en/), use the following command instead: ```bash 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: ```scss @use '@carbon/colors'; // Another way if using `@carbon/react @use '@carbon/react/scss/colors'; ``` These color variables follow the naming convention: `-`. For example: ```scss colors.$blue-50; colors.$cool-gray-10; colors.$black-100; colors.$white-0; ``` 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: ```scss $colors: ( 'blue': ( 10: #edf4ff, // ... ) ); ``` ### JavaScript For JavaScript, you can import and use this module by doing the following in your code: ```js // 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: ```js black; blue[50]; // Using the `blue` object. warmGray100; // Using the `warmGray100` variable. ``` ## 📚 Examples If you're looking for more examples on how to use `@carbon/colors`, we have some examples that you can check out: - [sass-modules](./examples/sass-modules) ## 🙌 Contributing We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our [Contributing Guide](/.github/CONTRIBUTING.md)! 👀 ### Modifying color values Color values are defined in [`src/dtcg/colors.json`](./src/dtcg/colors.json) using the [DTCG token format](https://tr.designtokens.org/format/). This is the single source of truth for the package — **do not edit generated files directly**. The following files are generated at build time by Style Dictionary and should not be hand-edited: - `js/generated/colors.js` / `js/generated/colors.d.ts` — JS exports - `scss/` — Sass variables and maps To add or update a color: 1. Edit `src/dtcg/colors.json` 2. Run `yarn build` in this package to regenerate all outputs 3. Run `yarn test --testPathPatterns=packages/colors` from the repo root to confirm nothing regressed ## 📝 License Licensed under the [Apache 2.0 License](/LICENSE). ## IBM Telemetry IBM Telemetry This package uses IBM Telemetry to collect de-identified and anonymized metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see [Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection). For more information on the data being collected, please see the [IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics). --- _Source: https://npm.io/package/@carbon/colors · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._