# @financial-times/o-colors 中文文档

规范地址：https://npmcn.com/package/%40financial-times/o-colors/

版本：6\.7\.1
npm 元数据更新时间：2026-10-06T13:39:36.489Z
中文译文更新时间：2026-11-14T18:21:45.785Z
软件包许可：MIT

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

原始 npm 页面：https://www.npmjs.com/package/%40financial-times/o-colors
原文对照：https://npmcn.com/package/%40financial-times/o-colors/?lang=original
项目主页：https://registry.origami.ft.com/components/o-colors

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

- 包体积（解压后）：140 kB，35 个文件
- 模块格式：ES Module
- TypeScript 类型：未声明
- 运行依赖：0 个
- peer 依赖：@financial-times/math ^1\.0\.0，@financial-times/o-brand ^4\.0\.1
- 首次发布：2019-02-12T16:19:00.746Z
- 最新版本发布：2026-02-26T10:54:59.257Z
- 近 30 天下载量：15763（2026-10-15 至 2026-11-13，npm 官方下载统计）
- 已发布版本数：70（近 12 个月 1 个）

## 中文简介

所有 FT 产品的默认颜色调色板 。 调色板支持色彩对比检查,色彩混合和调色.

## 安装

```sh
npm install @financial-times/o-colors
```

也可以使用：`pnpm add @financial-times/o-colors`、`yarn add @financial-times/o-colors`、`bun add @financial-times/o-colors`

## README

> ⚠️ **注:** 已替换为 [o3 创建](https://npmcn.com/package/%40financial-times/o3-foundation/README.md)请参看 [移徙指南](https://npmcn.com/package/%40financial-times/o-colors/MIGRATION.md#migrating-from-v3-to-o3-foundation@3) 用于升级的步骤.

# o-颜色 [![MIT licensed](https://img.shields.io/badge/license-MIT-blue.svg)](https://npmcn.com/package/%40financial-times/o-colors/#readme-licence)

用于管理颜色的组件 。 包括 FT 彩色调色板.

-   [使用量](https://npmcn.com/package/%40financial-times/o-colors/#readme-usage)
-   [标记](https://npmcn.com/package/%40financial-times/o-colors/#readme-markup)
-   [CSS 自定义属性](https://npmcn.com/package/%40financial-times/o-colors/#readme-css-custom-properties)
-   [萨斯](https://npmcn.com/package/%40financial-times/o-colors/#readme-sass)
-   [移徙](https://npmcn.com/package/%40financial-times/o-colors/#readme-migration)
-   [联系人](https://npmcn.com/package/%40financial-times/o-colors/#readme-contact)
-   [许可证](https://npmcn.com/package/%40financial-times/o-colors/#readme-licence)

## 使用量

检查出来 [如何将 Origami 组件纳入您的项目](https://origami.ft.com/documentation/components/#including-origami-components-in-your-project) 开始 `o-colors`。 。 。 .

## 标记

### 颜色使用大小写类

有限的颜色 [使用大小写](https://npmcn.com/package/%40financial-times/o-colors/#readme-usecases) 提供CSS课程,包括:

-   `.o-colors-page-background`
-   `.o-colors-box-background`
-   `.o-colors-body-text`
-   `.o-colors-muted-text`

```html
<body class="o-colors-page-background">
    <!-- default background colour set -->
    <!-- e.g. for the core brand `background: #fff1e5;` -->
</body>
```

用于构建服务用户的颜色更多 [CSS 自定义属性](https://npmcn.com/package/%40financial-times/o-colors/#readme-css-custom-properties)。 。 。 .

## CSS 自定义属性

### 色彩调色板自定义属性

所有调色板颜色,包括默认的组合和色调,都可以作为CSS自定义属性(CSS可变)格式 `--o-colors-[NAME]`。 。 。 .

见 [所有可用的调色板颜色](https://registry.origami.ft.com/components/o-colors) 在登记册中.

```css
.ft-pink {
    background: var(--o-colors-paper);
    color: var(--o-colors-black-80);
}
```

### 颜色自定义属性

有限的颜色 [使用大小写](https://npmcn.com/package/%40financial-times/o-colors/#readme-usecases) 也可作为CSS自定义属性(CSS变量)提供,包括:

-   `--o-colors-page-background`
-   `--o-colors-box-background`
-   `--o-colors-body-text`
-   `--o-colors-muted-text`
-   `--o-colors-link-text`
-   `--o-colors-link-hover-text`

```css
body {
    background: var(--o-colors-page-background);
}
```

## 萨斯

o-colors有多个混音器和功能供您访问项目中的调色板. 我们建议Sass项目直接使用这些混合体和功能. 举个例子. [颜色ByName](https://npmcn.com/package/%40financial-times/o-colors/#readme-oColorsByName) 财务报告和审定财务报表 [颜色Byuses case](https://npmcn.com/package/%40financial-times/o-colors/#readme-oColorsByUsecase)然而,也可以使用以下选项输出所有 o-colors CSS 自定义属性(CSS变量)和类: `oColors` 混合剂.

```scss
@import '@financial-times/o-colors/main';
@include oColors(
    $opts: (
        'palette-custom-properties': true,
        // e.g. --o-colors-paper
        'usecase-custom-properties': true,
        // e.g. --o-colors-page-background
        'usecase-classes': true // e.g. .o-colors-page-background,
    )
);
```

### 调色板颜色

o-colors 定义了一个颜色调色板( 一组命名的颜色), 它可能是 [在登记册中预览](https://registry.origami.ft.com/components/o-colors)。自定义调色板颜色可能会被添加到调色板上,以便与依赖性共享.

| 颜色名称 | 品牌支持 |
| :-: | :-: |
| 黑色 | 核心、内部、白色标签 |
| 白色 | 核心、内部、白色标签 |
| 奥克福德 | 核心、内部 |
| 泰尔 | 核心、内部 |
| 列表 | 核心,内部, |
| 柠檬 | 核心,内部, |
| 玉坛 | 核心、内部 |
| 普通话 | 核心、内部 |
| 曲线 | 核心、内部 |
| 纸张 | 核心项目 |
| 克莱特 | 核心项目 |
| 小麦 | 核心项目 |
| 天空 | 核心项目 |
| 天鹅绒 | 核心项目 |
| 甜点 | 核心项目 |
| 伊萨比 | 核心项目 |
| 浅蓝色 | 核心项目 |
| 图形- 暗蓝色 | 核心项目 |
| ft-平克(原为品牌-ft-平克) | 核心项目 |
| ft-灰色 | 核心项目 |
| 奥尔格-b2c | 核心项目 |
| 奥尔克-b2c-黑暗 | 核心项目 |
| org-b2c-光线 | 核心项目 |
| 薄荷 | 核心项目 |

调色板默认还有额外的颜色,包括色调和混音. [见注册演示](https://registry.origami.ft.com/components/o-colors) 一个完整的名单.

`ft-pink` 财务报告和审定财务报表 `ft-grey` 是一些数字资产中使用的品牌颜色,例如FT标志,但数字用户界面的有效使用案例数量有限。 而不是考虑 `paper` 财务报告和审定财务报表 `slate` 或黑相/相纸混合,例如 `black-80`。作为用于 `ft-pink`,它可用于防止错误颜色的闪出作为标志图像负载.

### 默认调色板颜色

使用调色板获取默认颜色 `oColorsByName`。 。 。 .

```scss
.example {
    // Get a default o-colors palette colour.
    background: oColorsByName('paper');
}
```

#### 自定义调色板颜色

设置自定义调色板颜色以与其他组件共享调用 `oColorsSetColor`。 。 。 . 对项目或组件必须使用向前斜线进行命名.

```scss
// Set a custom palette colour within a project `o-example`.
@include oColorsSetColor(
    $color-name: 'o-example/myhotpink',
    $color-value: #ff69b4
);

.example {
    // Get a custom palette colour from a project `o-example`.
    background: oColorsByName('o-example/myhotpink');
}
```

默认的自定义颜色不允许 [音调](https://npmcn.com/package/%40financial-times/o-colors/#readme-tone-palette-colors) 以减少项目内使用的颜色。 允许Tones设置 `allow-tones` 选项.

```scss
// Set a custom palette colour within a project `o-example`,
// which allows tones of the same colour.
@include oColorsSetColor(
    $color-name: 'o-example/myhotpink',
    $color-value: #ff69b4,
    $opts: (
        'allow-tones': true,
    )
);

.example {
    // Get a toned custom palette colour from a project `o-example`.
    background-color: oColorsGetTone('o-example/myhotpink', 80);
}
```

删除一个颜色被视为突破性变化,需要主放出. 向用户告知一种颜色不应通过传递而贬值 `$opts` 带有贬损消息的参数.

```scss
// Deprecate a custom colour, which will be removed in a future major release.
@include oColorsSetColor(
    $color-name: 'o-example/myhotpink',
    $color-value #ff69b4,
    $opts: (
        'deprecated': 'Use the default colour claret instead.',
    )
);
```

见 [o- 颜色 SassDoc](https://registry.origami.ft.com/components/o-colors/sassdoc?brand=core#o-colors-mixin-ocolorssetusecase) 更多细节和实例.

### 使用大小写

A 类 [彩色调色板](https://npmcn.com/package/%40financial-times/o-colors/#readme-palette-colours) 帮助产品使用同一套颜色,但并不帮助他们一致地使用颜色. 因此o-colors提供了基于用例返回颜色的工具. 例如,页面背景或正文文本的颜色.

| 使用大小写 | 财产 | 品牌支持 |
| :-: | :-: | :-: |
| 页 次 | 背景情况 | 核心、内部、白色标签 |
| 焦点 | 大纲 | 核心、内部 |
| 选项框 | 背景情况 | 核心、内部 |
| 链接 | 文本 | 核心、内部 |
| 链接-hover | 文本 | 核心、内部 |
| 链接标题 | 文本 | 核心、内部 |
| 链接-标题-标题 | 文本 | 核心、内部 |
| 标题 | 文本 | 核心、内部 |
| 机构 | 文本 | 核心、内部 |
| 哑巴 | 文本 | 核心、内部 |
| 标签链接 | 文本 | 核心项目 |
| 标签链接- hover | 文本 | 核心项目 |
| 意见-tag-链接 | 文本 | 核心项目 |
| 意见-tag-link-hover | 文本 | 核心项目 |
| 意见 | 背景情况 | 核心项目 |
| 超级英雄 | 背景情况 | 核心项目 |
| 英雄倾向 | 背景情况 | 核心项目 |
| 英雄高亮灯 | 背景情况 | 核心项目 |
| 广告 | 背景情况 | 核心项目 |
| **区域颜色** |  |  |
| 生命权 | 全部 | 核心项目 |
| 生命-艺术-备选案文 | 全部 | 核心项目 |
| 区域图 | 全部 | 核心项目 |
| 区-岩浆-平面 | 全部 | 核心项目 |
| 住房 | 全部 | 核心项目 |
| 住房 | 全部 | 核心项目 |
| 款项 | 全部 | 核心项目 |
| 款-备用款 | 全部 | 核心项目 |

#### 默认使用大小写

获取默认使用大小写调用颜色 `oColorsByUsecase`。 。 。 .

```scss
html {
    // get the background colour for the page usecase
    background: oColorsByUsecase('page', 'background');
}

.paragraph {
    // get the text colour for the body usecase
    color: oColorsByUsecase('body', 'text');
}
```

### 自定义使用大小写

创建新的使用大小写呼叫 `oColorsSetUseCase`。 。 。 .

-   `$usecase`: 使用套件的名称, 如 “ page ” 。 这必须包括您组件或工程的命名空间,然后是向前斜线.
-   `$colors`: 将属性("文本","背景","边界",或"外线")映射到调色板颜色名上.
-   `$opts` (可选) :
    -   `deprecated`: 用于用例的贬损信息.

```scss
// set colours for a "stripes" in o-example.
@include oColorsSetUseCase(
    'o-example/stripes',
    (
        'text': 'white',
        'background': 'black',
        'border': 'black-50',
    )
);
```

删除一个使用大小写是一个突破性更改,需要主放出. 为通知用户,不应使用一个使用套件,而应加以折旧。 通过一个 `$opts` 带有贬损消息的参数.

折旧所有使用大小写属性 :

```scss
// deprecate all usecase properties for the o-example custom usecase "stripes".
@include oColorsSetUseCase(
    'o-example',
    'stripes',
    (
        'text': 'white',
        'background': 'black',
        'border': 'black-50',
    ),
    (
        'deprecated': 'o-example has no stripes anymore, use a different colour',
    )
);
```

折旧个人使用大小写属性 :

```scss
// deprecate only the background property for the o-example custom usecase "stripes".
@include oColorsSetUseCase(
    'o-example',
    'stripes',
    (
        'text': 'white',
        'background': 'black',
        'border': 'black-50',
    ),
    (
        'deprecated': (
            'background':
                'o-example stripes has no background anymore, use a different colour',
        ),
    )
);
```

### 生成文本颜色

`oColorsGetTextColor` 将返回基于背景和指定的不透明度的浅色或暗色文字颜色.

```scss
.example {
    background: oColorsByName('teal');
    // Get a text colour for a teal background
    color: oColorsGetTextColor('teal');
}
```

```scss
.example {
    background: oColorsByName('teal');
    // Get a text colour for a teal background,
    // with greater than usual opacity (80)
    color: oColorsGetTextColor('teal', 80);
}
```

背景对比度和产生的文本颜色对照 [WCAG 2.1准则](https://www.w3.org/TR/WCAG21/#contrast-minimum)。如果对比度过低,则投出出出错。 默认情况下, 在 AA 级别检查 对比度 。 可检查对比度 [大文本](https://www.w3.org/TR/WCAG21/#dfn-large-scale) 或针对更严格的AAA建议(正常、大、或大).

```scss
.example-large-text {
    background: oColorsByName('teal');
    // Get a text colour for a teal background,
    // enforce a lower level of contrast "large text".
    color: oColorsGetTextColor('teal', $minimum-contrast: 'aa-large');
}
```

设定 `$minimum-contrast` 改为 `null` 删除对比检查。 只忽略对比 [附带或标志文本](https://www.w3.org/TR/WCAG21/#contrast-minimum),否则您的项目可能无法访问.

### 混合颜色

`oColorsMix` 将按百分比混合两种颜色。 这给人留下了底色在背景颜色上不透明的百分比时出现的印象. `oColorsMix` 将接受一个颜色值或一个o-colors调色板颜色的名称作为参数.

默认 `oColorsMix` 与页面背景颜色使用大小写相混合 :

```scss
$color: oColorsMix(
    $color: 'black',
    $percentage: 30,
); // same as black-30
```

但可出出二种相相相. 例如,以20%的速度混合平板电脑:

```scss
$color: oColorsMix(
    $color: 'claret',
    $background: 'slate',
    $percentage: 20,
);
```

### 调色板颜色

O-克色色调是调色板颜色,带有被修改的饱和度和发光度,在保持活性的同时会形成更轻或更暗的颜色.

所推荐的色调已经在色调中,例如:. `teal-80` (见 [登记册中的默认值](https://registry.origami.ft.com/components/o-colors)) (中文(简体) ). 然而,对于需要使用新语气的情况 `oColorsGetTone`。它将返回基于指定亮度的新颜色.

```scss
.teal-tone-example {
    background-color: oColorsGetTone('teal', 80);
}
```

就设计的一致性而言,并非所有颜色都允许被标注。 只有调色板中带有默认色调的颜色(如teal,oxford,和claret)才能被使用. 其他颜色 [可能还是混血儿](https://npmcn.com/package/%40financial-times/o-colors/#readme-mix-colors)。如果您的工程使用 `oColorsSetColor`,这些可能通过设置 [`allow-tones` 选项](https://npmcn.com/package/%40financial-times/o-colors/#readme-custom-palette-colours)。 。 。 .

### 颜色工具

o-colors为用颜色工作提供了其他有用的功能,包括:

-   校对:Soup
-   颜色亮度
-   颜色图示

见 [o- 颜色 SassDoc](https://registry.origami.ft.com/components/o-colors/sassdoc) 更多细节和实例.

## 移徙

| 状态 | 主要版本 | 最后一个小版本 | 移徙指南 |
| :-: | :-: | :-: | :-: |
| 活动 | 单位3 | 不详 | [迁移到 o3](https://npmcn.com/package/%40financial-times/o-colors/MIGRATION.md#migrating-from-v6-to-o3-foundation@3) |
| 维护 | 6个 | 不详 | [迁移到 v6](https://npmcn.com/package/%40financial-times/o-colors/MIGRATION.md#migrating-from-v5-to-v6) |
| 已贬值 | 页:1 | 不详 | [迁移到 v5](https://npmcn.com/package/%40financial-times/o-colors/MIGRATION.md#migrating-from-v4-to-v5) |
| 已贬值 | 页:1 | 4.10 (中文(简体) ) | [迁移到 v4](https://npmcn.com/package/%40financial-times/o-colors/MIGRATION.md#migrating-from-v3-to-v4) |
| 已贬值 | 3个 | 3.6 国家 | [迁移到 v3](https://npmcn.com/package/%40financial-times/o-colors/MIGRATION.md#migrating-from-v2-to-v3) |
| 已贬值 | 2个 | 2.5 国家 | [迁移到 v2](https://npmcn.com/package/%40financial-times/o-colors/MIGRATION.md#migrating-from-v1-to-v2) |
| 已贬值 | 1个 | 1.1 国家 | [迁移到 v1](https://npmcn.com/package/%40financial-times/o-colors/MIGRATION.md#migrating-from-v0-to-v1) |
| 已贬值 | 0 个 | 0.2 (韩语) | 不详 |

## 联系人

如果您对本部分有任何问题或评论,或需要帮助使用本部分,请 [提出问题](https://github.com/Financial-Times/o-colors/issues)访问 [#origami - 支持](https://financialtimes.slack.com/messages/origami-support/) 或电子邮件 [折纸支持](mailto:origami-support@ft.com)。 。 。 .

* * *

## 许可证

本软件由金融时报根据以下规定出版: [麻省理工学院许可证](http://opensource.org/licenses/MIT)。 。 。 .

## 常见问题

### @financial-times/o-colors 是什么？

所有 FT 产品的默认颜色调色板 。 调色板支持色彩对比检查,色彩混合和调色\.

### 如何安装 @financial-times/o-colors？

在项目目录运行 npm install @financial-times/o-colors，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：@financial-times/math（^1\.0\.0）、@financial-times/o-brand（^4\.0\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @financial-times/o-colors 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/financial-times\_\_o-colors 是否存在。

### @financial-times/o-colors 支持 ESM 还是 CommonJS？

以 ES Module 形式发布，推荐使用 import 引入。在 CommonJS 项目中，Node\.js 20\.19\+ / 22\.12\+ 可以直接 require\(\) 不含顶层 await 的 ES Module，更早的版本需要改用动态 import\(\)。

### @financial-times/o-colors 可以商用吗？

@financial-times/o-colors 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @financial-times/o-colors 的下载量有多少？

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

### @financial-times/o-colors 还在维护吗？

最新版本 6\.7\.1 发布于 2026/02/26（8 个月前）；至今共发布 70 个版本，其中过去 12 个月发布了 1 个；首次发布于 2019/02/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。