---
title: 色彩 Color
url: https://ui.zhaozimin.cn/foundations/color/
markdown: https://ui.zhaozimin.cn/foundations/color.md
group: 基础
origin: 设计系统源码（src/system），本仓库是唯一源头
source:
  - src/system/styles/v4/tokens.css  # https://ui.zhaozimin.cn/src/system/styles/v4/tokens.css
version: v0.2.0  # 设计系统版本，发布于 2026-09-23
scope: .zzm-v4   # 根节点必须带这个类，否则样式不生效
css: https://ui.zhaozimin.cn/v/0.2.0/zzm.css   # 锁版本地址，本仓库再改也不影响你
tokens: [--zzm-paper, --zzm-surface, --zzm-ink, --zzm-accent]
---

# 色彩 Color

> 黑、白、朱砂红。红只出现一次，永远标「你在这里 / 下一步」。白就是中性白，不偏暖。

## 品牌与底面

| 令牌 | 值 | 用途 |
|---|---|---|
| `--zzm-accent` | `#A6402F` |  |
| `--zzm-paper` | `#F6F6F4` | 应用画布 / 侧栏底 |
| `--zzm-surface` | `#FFFFFF` | 主内容面 / 卡片 |
| `--zzm-ink` | `#161616` | 主文字墨色 |
| `--zzm-ink-strong` | `#1D1D1B` | 深墨（黑胶囊 CTA） |

品牌朱有三个可选值 `#A6402F`（默认）/ `#8C3A31` / `#B5543F`，由外壳在运行时注入 `--zzm-accent`。任何颜色引用都写 `var(--zzm-accent, #A6402F)`，脱离外壳也有正确兜底。文字选区用朱色 16% 透明：`rgba(166,64,47,.16)`。

## 文字灰阶

| 令牌 | 值 | 用途 |
|---|---|---|
| `--zzm-text-1` | `#26261F` |  |
| `--zzm-text-2` | `#3F3F3B` |  |
| `--zzm-text-3` | `#4A4A46` |  |
| `--zzm-text-4` | `#6E6E6A` |  |
| `--zzm-text-5` | `#72726E` |  |
| `--zzm-muted` | `#8B8B85` |  |
| `--zzm-muted-2` | `#A2A29C` |  |
| `--zzm-muted-3` | `#B0B0AA` |  |
| `--zzm-faint` | `#C6C6C0` |  |

正文用 `text-2`，说明文字用 `text-5`，元数据与标签用 `muted-2`，分隔符用 `faint`。灰都带一点点黄绿偏（例如 `#8B8B85` 而不是 `#8B8B8B`），和纸面同一个色温。

## 暗底

只用在封面、播放器、付款页这类「放内容」的深色面上；界面本身没有暗色主题。

| 令牌 | 值 | 用途 |
|---|---|---|
| `--zzm-dark-card` | `#131316` |  |
| `--zzm-dark-poster` | `#0E0E10` |  |
| `--zzm-dark-pay` | `#0B0B0C` |  |

## 细线三档

黑色微透明只允许三档，同一用途同一档。深于 .18 的深色遮罩和滚动条不算细线。

| 令牌 | 值 | 用途 |
|---|---|---|
| `--zzm-hairline` | `rgba(0, 0, 0, 0.07)` |  |
| `--zzm-hairline-2` | `rgba(0, 0, 0, 0.09)` |  |
| `--zzm-hairline-strong` | `rgba(0, 0, 0, 0.14)` |  |

## 课时档位信号色

黑白系统里唯一被允许的功能色，只用在档位胶囊上（见[徽章与档位](/components/badge)）。每档三件套：实色、浅底、深字。

| 令牌 | 值 | 用途 |
|---|---|---|
| `--zzm-tier-free` | `#16A34A` | 免费 · 绿 |
| `--zzm-tier-free-bg` | `rgba(22, 163, 74, 0.12)` |  |
| `--zzm-tier-free-ink` | `#157F3C` |  |
| `--zzm-tier-member` | `#E0920A` | 会员 · 黄金 |
| `--zzm-tier-member-bg` | `rgba(224, 146, 10, 0.18)` |  |
| `--zzm-tier-member-ink` | `#8A5606` |  |
| `--zzm-tier-ext` | `#A6402F` | 拓展 · 红（品牌朱同族） |
| `--zzm-tier-ext-bg` | `rgba(166, 64, 47, 0.11)` |  |
| `--zzm-tier-ext-ink` | `#A6402F` |  |

## 组件里的字面量对照

v4 组件大量直接写色值而不是 CSS 变量。复刻时遇到下面这些字面量，它们对应的就是这些令牌：

| 字面量 | 令牌 | 常见位置 |
|---|---|---|
| `#161616` | `--zzm-ink` | 标题、当前项文字 |
| `#1D1D1B` | `--zzm-ink-strong` | 墨键底、圆徽、开关开启、选中复选框 |
| `#3F3F3B` | `--zzm-text-2` | 正文、纸键文字 |
| `#72726E` | `--zzm-text-5` | 卡片简介 |
| `#8B8B85` | `--zzm-muted` | 面包屑、说明、元数据 |
| `#A2A29C` | `--zzm-muted-2` | mono 小标签、表头 |
| `#C6C6C0` | `--zzm-faint` | 面包屑分隔符 |
| `#131316` | `--zzm-dark-card` | 封面与缩略图暗底 |
| `rgba(0,0,0,.09)` | `--zzm-hairline-2` | 卡片描边 |
| `#EFEFEC` | — | 骨架块、中性标签底（无对应令牌） |

## 铁律

- ✓ 要：同一屏只出现一处朱色，标当前位置或下一步
- ✗ 不要：鲜艳纯红，或把朱色当装饰
- ✓ 要：颜色写 `var(--zzm-*)`，带字面量兜底
- ✗ 不要：奶油色、米色暖底
- ✓ 要：朱色只做冗余信号：旁边总有图标或文字
- ✗ 不要：档位色（绿 / 黄）出现在档位胶囊以外的地方

---

上一页：[设计原则](https://ui.zhaozimin.cn/foundations/principles.md) · 下一页：[字体与字阶](https://ui.zhaozimin.cn/foundations/typography.md) · 全站目录：https://ui.zhaozimin.cn/llms.txt