---
title: 色彩
slug: 色彩
category: 基础
figma_node_id: 1:3
figma_page_name: 基础元素 / 颜色（聚合自2023设计语言规范）
aliases: [Color, color tokens, 色板, 颜色, 主色, 品牌色, 功能色, 中性色, 背景色, 文字色, 边框色, palette, design tokens]
last_extracted: 2026-05-19
status: ok
---

# 色彩

> 如流设计系统 2.0 的色彩 token 总表，由"2023 设计语言规范"页与"基础元素 / 颜色"卡片聚合而成。色彩定义采用 HSB 模式、sRGB 输出；总色板包含 120 个色值（12 主色 × 10 阶），每个色系的 60 号色（如 Brandblue60）为该色系主色锚点。中性色另以 `C-Coolgray*` 命名独立成系列。

## 一览：色彩三大分层

1. **品牌色（Brand）**：以 Brandblue60 为锚点，承载强调样式。
2. **彩色色板（Color palette）**：12 个色相 × 10 阶（10→100），覆盖渐变、标签、提示等。
3. **中性色（C-Coolgray）**：底层结构色，承担背景、分隔、占位、边框等基础角色。

## 主色

如流的品牌主色定义于 Brandblue 色系，第 6 号色作为强调样式的标准 token。

| token 名 | hex | 用途说明 |
|---|---|---|
| `Brandblue60` | `#165DFF` | 品牌主色：强调类文字色 / 通用 Button 背景 / 筛选项选中态 / 图标选中态 / 标签强调态 |
| `Brandblue40` | `#5990FF` | 双色渐变常用上端（与 Purple60 组合用于应用图标背景） |
| `primary-6` | `#165DFF` | 等同 Brandblue60，部分组件 token 别名 |
| `purple-6` | `#722ED1` | 紫色强调（设计系统封面页"组件属性"标签） |
| `purple-1` | `#F5E8FF` | 紫色弱化背景，搭配 `purple-6` 文字使用 |

> 品牌蓝色的基准色号为 Brandblue60；主要应用于强调类文字色及通用组控件中的强调样式，包括通用类 Button 背景色、筛选项选中态、icon 选中态、标签等。

## 12 个色相基础色板（Colors）

每色相 10 阶（10/20/30/40/50/**60**/70/80/90/100），第 60 号为该色系主色。完整命名规则：`<色相英文>+<色阶号>`。

| 色相英文 | 中文 | 主色（60 号） |
|---|---|---|
| Skyblue | 天蓝 | Skyblue60 |
| Blue | 蓝 | Blue60 |
| Brandblue | 品牌蓝 | Brandblue60 = `#165DFF` |
| Purple | 紫 | Purple60 |
| Palepurple | 浅紫 | Palepurple60 |
| Redpurple | 红紫 | Redpurple60 |
| Magenta | 品红 | Magenta60 |
| Red | 红 | Red60 |
| Vermilion | 朱红 | Vermilion60 |
| Orange | 橙 | Orange60 |
| Yellow | 黄 | Yellow60 |
| Grassgreen | 草绿 | Grassgreen60 |
| Viridity | 翠绿 | Viridity60 |
| Aqua | 水蓝 | Aqua60 |
| cyan | 青 | cyan60（样例 H194 S100 B25） |

> 如流的彩色扩展色板总共分为 120 个色值，包含 12 个主色以及衍生色，其中将色阶的第 6 号色作为该色系的主色。

## 功能色

| token 名 | 基底色相 | 典型 hex | 用途 |
|---|---|---|---|
| `Link` | Brandblue | `#165DFF` | 普通超链接 |
| `Notice` | Yellow | Yellow60 | 一般信息提示 / 通知 |
| `Warning/error/delete` | Red | Red60 | 错误提示、危险操作、删除入口 |
| `Unavailable` | Coolgray | `#C7CDD9` | 禁用态、不可用按钮、占位 |
| `success-6` | Green | `#00B42A` | 成功反馈（设计系统简介页"时间轴当前节点"标识） |

> 功能色起到向用户传达某种固定含义信息的作用，主要应用于链接、反馈提示、Button 等场景中的不同状态。

## 背景色

| token 名 | hex | 用途说明 |
|---|---|---|
| `color-bg-1` | `#FFFFFF` | 通用背景色（主体页底） |
| `White` | `#FFFFFF` | 通用底色 token 别名 |
| `C-Coolgray10` | `#FCFCFC` | 对话窗口背景色（桌面端） |
| `C-Coolgray20` | `#F7F8FA` | 通用可点击区域底色 / 粗分隔线 / 动态卡片下层底色 |
| `C-Coolgray30` | `#F2F4F7` | 可点击胶囊底色（未选中态）/ 切换 tab 未选中态 / 搜索框背景（白底） |
| `C-Coolgray40` | `#EDF0F5` | 不可用 button 背景色 / 占位图背景色 |
| `color-fill-2` | `#F2F3F5` | 浅灰填充（设计系统简介卡片底色） |

## 文字色

| token 名 | hex | 用途说明 |
|---|---|---|
| `color-text-1` | `#1D2129` | 主文字色（标题、正文） |
| `color-text-3` | `#86909C` | 辅助文字色（说明、副标题） |
| `color-text-4` | `#C9CDD4` | 弱化文字色（占位、提示） |
| `C-Coolgray60` | `#878D99` | 占位文字色（与 color-text-3 同梯度） |

## 中性色（蓝灰系 / C-Coolgray）

> 中性色在色彩系统中具有至关重要的作用，是设计的底层结构。主要用于表达边界，建立信息层次。
> 目前使用了两种灰色：中性灰（用于遮罩蒙层）与蓝灰（用于投影、水槽、分割线、图标等）。

| token 名 | hex | 用途 |
|---|---|---|
| `中性灰` | `#000000` α 50% | 遮罩 / 蒙层。HSB: H0 S0 B0 Alpha50% |
| `蓝灰` | `#39404D` | 投影、水槽、分割线、图标。HSB: H219 S26 B30 |
| `C-Coolgray10` | `#FCFCFC` | 对话窗口背景（桌面端） |
| `C-Coolgray20` | `#F7F8FA` | 通用可点击区域底色 / 粗分隔线 |
| `C-Coolgray30` | `#F2F4F7` | 胶囊未选中底色 / tab 未选中态 / 搜索框背景 |
| `C-Coolgray40` | `#EDF0F5` | 不可用按钮背景 / 占位图背景 |
| `C-Coolgray50` | `#E1E6F0` | 二级分隔线 / 对话气泡背景 / 图片边框 / 一级分隔线（框架） |
| `C-Coolgray50-暗` | `#C7CDD9` | 一级分隔线（框架）深一档变体 |
| `C-Coolgray60` | `#878D99` | 占位文字色 |
| `Blue100` | `#001B66` | 中性色投影默认色值（透明度 0.16） |
| `滚动条色` | `#E1E6F0` | 滚动条填充色（暗黑模式 `#505051`） |

## 边框色

| token 名 | hex | 用途 |
|---|---|---|
| `C-Coolgray50` | `#E1E6F0` | 图片 / 卡片边框，二级分隔线 |
| `C-Coolgray50-暗` | `#C7CDD9` | 一级分隔线（框架级） |
| `#8C90A2` | `#8C90A2` | 描边强对比场景 |
| `#A4A7B5` | `#A4A7B5` | 弱化描边 / 浅分隔 |

## 渐变（产品级应用）

> 渐变遵循光源照射角度，自上至下呈 30° 小角度渐变，分为线性单色相渐变与双色渐变两种。

- **双色渐变**：相邻色相、色号差 ≤1，主要用于应用图标背景色。常用组合：`Skyblue40→Brandblue60`、`Brandblue40→Purple60`、`Magenta40→Red60`、`Yellow40→Orange60`、`Viridity40→Aqua60`。
- **单色渐变**：同色相中相邻色阶，常 `*40→*60`，用于标签、强调类信息背景。
- 基准色选用建议：色板中 4–6 号色。

## 透明度阶梯

| 阶梯 | 透明度 |
|---|---|
| T1 | 100% |
| T2 | 96% |
| T3 | 80% |
| T4 | 60% / 32%（按场景选用） |
| T5 | 12% |

## 投影色

| 类型 | 默认色值 | 透明度 |
|---|---|---|
| 中性色投影 | `Blue100 = #001B66` | 0.16 |
| 彩色投影 | 主色 60（如 Red60） | 0.32 |

## 对比度规则

- 文字 vs 背景：`3:1 ~ 12:1`
- 24px 以下文字 vs 背景：≥ `4.5:1`（占位文字除外）
- 色块 vs 背景：≤ `10:1`
- 自查工具：https://contrast-ratio.com/

## 关联

- 完整色彩文化与体系叙事见 [2023设计语言规范](2023设计语言规范.md)
- 字体相关 token 见 [字体](字体.md)
- 图标颜色规范见 [图标](图标.md)
