# 色彩系统硬规则

> 颜色不靠眼睛"感觉"，靠**色彩空间 + 对比度数字 + 结构化调色板**。

---

## 一、永远优先用 oklch，不要 rgb / hex / hsl

### 为什么

- **rgb / hex** 相邻值肉眼看着亮度不均（#4169E1 比 #FF6347 更"暗"但 RGB 总和差不多）
- **hsl** 的 L（lightness）是数学值，不是感知值
- **oklch** 是基于**人眼感知**设计的色彩空间：L=50% 的红和 L=50% 的蓝看起来一样亮

### 语法

```css
oklch(L% C H)
/*    ↑  ↑ ↑
      │  │ └ Hue 色相 0-360（红 30, 橙 60, 黄 90, 绿 130, 青 200, 蓝 260, 紫 300, 粉 0/360）
      │  └── Chroma 饱和度 0-0.4（0=灰，0.2=中饱和，0.3+=鲜艳）
      └───── Lightness 亮度 0-100%（0=黑，100=白）*/

oklch(62% 0.19 40)    /* Equation 橙 */
oklch(98% 0.005 85)   /* 米白背景 */
oklch(25% 0.04 240)   /* 深蓝墨色 */
```

### 舒适区间

| 用途 | L 亮度 | C 饱和度 |
|------|--------|---------|
| 明亮背景 | 95-99% | 0-0.02 |
| 大面积浅色块 | 85-95% | 0.02-0.05 |
| 主色（按钮/强调） | 45-70% | 0.12-0.22 |
| 正文字色 | 15-25% | 0-0.03 |
| 高饱和点缀 | 55-75% | 0.22-0.32 |
| **永远不要** | L<10 或 >99 | C>0.35（屏幕纯色，刺眼） |

---

## 二、WCAG 对比度硬要求

| 文字大小 | AA 合格 | AAA 合格 |
|---------|---------|---------|
| 正文（< 18px） | **≥ 4.5 : 1** | ≥ 7 : 1 |
| 大文字（≥ 18px 或 14px Bold） | **≥ 3 : 1** | ≥ 4.5 : 1 |
| 非文字 UI（按钮边框、图标） | ≥ 3 : 1 | — |

### 检查工具

- 浏览器 devtools 的 Color Picker 自带对比度提示
- 命令行：`npx wcag-contrast "#1a1a1a" "#fafaf7"`
- Figma / Sketch 插件：Stark

**规则**：设计完成前，**主要文字色 + 背景色**组合必须 ≥ AA。没达标就调 L。

---

## 三、调色板结构（5–7 色封顶）

### 标准 6 色框架

```css
:root {
  /* 1. Primary 主色（品牌色，最少用，点缀即可）*/
  --primary: oklch(62% 0.19 40);

  /* 2. Surface 表面色（背景分层）*/
  --surface-0: oklch(99% 0.005 85);   /* 页面底 */
  --surface-1: oklch(97% 0.008 85);   /* 卡片 */
  --surface-2: oklch(94% 0.012 85);   /* 嵌套卡片 */

  /* 3. Text 文字色（从主到次）*/
  --text-1: oklch(18% 0.01 260);      /* 正文 */
  --text-2: oklch(45% 0.01 260);      /* 次要 */
  --text-3: oklch(65% 0.01 260);      /* 辅助 */

  /* 4. Border 边框 */
  --border: oklch(88% 0.01 85);

  /* 5. Semantic 语义色（成功/警告/错误）*/
  --success: oklch(62% 0.15 150);
  --warning: oklch(72% 0.16 70);
  --danger:  oklch(58% 0.20 25);
}
```

### 规则

- **最多 6 种主要色**（主色 1 + surface 3 + text 3 + border 1 + semantic 2 = 10 个 token，但视觉上只有 6 个基本色）
- 发明第 7 种前，**先问自己：能不能用已有色的亮度/饱和度变体解决？**
- 中性色占 80–90% 面积，主色占 5–10%，点缀色 < 5%

---

## 四、深色模式 ≠ 直接反转

### 错误做法

```css
/* ❌ 直接颠倒 L 值 */
--text: oklch(18% ...);       /* 浅色模式 */
--text: oklch(82% ...);       /* 深色模式（问题：对比度破坏 + 发灰） */
```

### 正确做法

```css
/* ✅ 深色模式重新配色 */
@media (prefers-color-scheme: dark) {
  :root {
    --surface-0: oklch(14% 0.01 260);    /* 不是纯黑 */
    --surface-1: oklch(18% 0.015 260);   /* 差别更小 */
    --text-1: oklch(92% 0.005 85);       /* 不是纯白（刺眼） */
    --text-2: oklch(72% 0.01 85);
    --primary: oklch(70% 0.18 40);       /* 深色下主色要提亮，不然存在感低 */
  }
}
```

规则：
- 深色背景 **永不用 #000**，而是 oklch(14% 0.01 ...) — 略带色温
- 深色文字 **永不用 #fff**，而是 oklch(92% 0.005 ...) — 防刺眼
- 主色在深色下 **L +8-10%**（因为暗底需要更亮的对比才显眼）

---

## 五、色彩温度（色温）

统一项目色温，不然看着"脏"：

| 色温 | H 色相范围 | 适合 |
|------|----------|------|
| 暖色 | 20–80（红橙黄）| 编辑、食物、情绪、艺术 |
| 中性偏暖 | 85（米色系）| 纸质感、手账、生活方式 |
| 冷色 | 200–270（青蓝）| 科技、工具、效率 |
| 中性偏冷 | 250（灰蓝）| 企业、金融、严肃 |

**规则**：主色 + 背景 + 中性色的 H 值 **不要跨温度混用**。比如主色 60（橙）但中性色 H=250（冷灰），看着就脏；应该中性色 H=85（暖灰）。

---

## 六、配色灵感库（替代"我来发明一个"）

- **Radix Colors** — 12 级斜坡，语义化
- **Tailwind Palette** — 50-950 梯度
- **Open Color** — 北欧风中性色
- **TokyoNight / Everforest / Catppuccin** — 代码配色可借用
- 实体印刷品色板（Pantone、DIC）→ 比屏幕调色更有质感

规则：**先找现成配色，再微调，最后一步才是自己造**。

---

## 七、自检清单

输出 HTML 前检查：

- [ ] 所有颜色都用 oklch（或至少主色）
- [ ] 正文 vs 背景对比度 ≥ 4.5:1
- [ ] 色板总数 ≤ 7 种主要色
- [ ] 主色面积 ≤ 10%
- [ ] 没有 #000 或 #fff 直接使用
- [ ] 色温统一（所有 H 值差距 < 30 或跨度有理由）