# @carbon/colors 中文文档

规范地址：https://npmcn.com/package/%40carbon/colors/

版本：11\.62\.0
npm 元数据更新时间：2026-11-04T14:07:39.869Z
中文译文更新时间：2026-11-09T02:36:52.960Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40carbon/colors
原文对照：https://npmcn.com/package/%40carbon/colors/?lang=original
项目主页：https://github.com/carbon-design-system/carbon#readme
源码仓库：https://github.com/carbon-design-system/carbon

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：177 kB，13 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：包内自带
- 运行依赖：1 个
- 首次发布：2018-08-30T17:48:39.618Z
- 最新版本发布：2026-11-04T14:07:39.544Z
- 近 30 天下载量：923934（2026-10-09 至 2026-11-07，npm 官方下载统计）
- 已发布版本数：308（近 12 个月 41 个）

## 中文简介

使用碳设计系统的数字和软件产品的颜色

## 安装

```sh
npm install @carbon/colors
```

也可以使用：`pnpm add @carbon/colors`、`yarn add @carbon/colors`、`bun add @carbon/colors`

## README

# @ 碳/ 颜色

> 使用碳设计系统的数字和软件产品的颜色

## 开始

要安装 `@carbon/colors` 在您的工程中, 您需要运行以下 命令使用 [无](https://www.npmjs.com/)数字 :

```bash
npm install -S @carbon/colors
```

如果你喜欢 [雅伦](https://yarnpkg.com/en/),使用以下命令 相反:

```bash
yarn add @carbon/colors
```

## 使用量

你可以用这个 `@carbon/colors` 除了您的 JavaScript 模块 萨斯.

### 萨斯

在 Sass 中,您可以通过 :

```scss
@use '@carbon/colors';

// Another way if using `@carbon/react
@use '@carbon/react/scss/colors';
```

这些颜色变量遵循命名惯例: `<swatch>-<grade>`用于 示例:

```scss
colors.$blue-50;
colors.$cool-gray-10;
colors.$black-100;
colors.$white-0;
```

除了上面详述的颜色变量之外,我们还提供了一张颜色图,这样 您可以在程序上使用这些值。 这个地图叫做 `$colors` 财务报告和审定财务报表 每个密钥都是表的名称。 这些表的价值也是一种地图,但是 每个键现在都是等级。 在代码中,这看起来像如下:

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

### Java 脚本

对于 JavaScript , 您可以导入并使用此模块 您的代码 :

```js
// ESM
import { black, blue, warmGray } from '@carbon/colors';

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

每个颜色表作为变量导出,每个颜色名也是 导出为可以通过指定等级调用的对象, 例如:

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

## 实例

如果你想要更多关于如何使用的例子 `@carbon/colors`我们有一些 实例可以查看:

-   [萨斯模块](https://npmcn.com/package/%40carbon/colors/examples/sass-modules)

## 捐款

我们总是寻找贡献者 帮助我们修复错误, 建立新的特性, 或者帮助我们改进项目文件。 如果你有兴趣,肯定 看看我们 [贡献指南](https://npmcn.com/.github/CONTRIBUTING.md)!

### 修改颜色值

颜色值定义于 [`tokens/colors.tokens.json`](https://npmcn.com/package/%40carbon/colors/tokens/colors.tokens.json) 使用 [DTCG 符号格式](https://www.designtokens.org/tr/2025.10/format/)这是 包件唯一的真相来源—— **不编辑生成的文件 直接**。 。 。 .

下列文件由样式词典在构建时生成,并应 不手工编辑 :

-   `js/generated/colors.js` 编号 : `js/generated/colors.d.ts` - 联合来文的出口
-   `index.scss` 萨斯变量和地图

要添加或更新颜色:

1.  编辑 `tokens/colors.tokens.json`
2.  运行 `yarn build` 在此包中重新生成所有输出
3.  运行 `yarn test --testPathPatterns=packages/colors` 从 repo 根到 证实没有倒退

## 许可证

凭 [Apache 2.0 许可证](https://npmcn.com/LICENSE)。 。 。 .

## ![IBM Telemetry](https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg) IBM 遥测

本套件使用 IBM 遥测来收集去识别和匿名的度量衡 数据。 通过安装此包作为依赖, 您同意远程测量 藏书。 选择退出,看 [选择退出IBM遥测数据收集](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection)。 。 。 . 有关所收集数据的更多信息,请参见: [IBM 遥测文档](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics)。 。 。 .

## 常见问题

### @carbon/colors 是什么？

使用碳设计系统的数字和软件产品的颜色

### 如何安装 @carbon/colors？

在项目目录运行 npm install @carbon/colors，或使用 pnpm add / yarn add / bun add。

### @carbon/colors 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package\.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

### @carbon/colors 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @carbon/colors 可以商用吗？

@carbon/colors 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @carbon/colors 的下载量有多少？

根据 npm 官方下载统计，@carbon/colors 在 2026/10/09 – 2026/11/07 这 30 天内被下载 923,934 次，日均约 30,798 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @carbon/colors 还在维护吗？

最新版本 11\.62\.0 发布于 2026/11/04（4 天前）；至今共发布 308 个版本，其中过去 12 个月发布了 41 个；首次发布于 2018/08/31。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。