配色实用指南

是什么

新手配色的两个死穴：颜色太多（五种颜色都在抢注意力）和不敢用色（全程黑白灰）。解法是规则化的：一个主色 + 一个功能色 + 一套中性色，用比例控制。

60-30-10 法则

• 60% 中性色（背景、大面积留白）：白、浅灰
• 30% 次要色（卡片、分割、辅助文字）：灰阶深几档
• 10% 强调色（按钮、链接、选中态、徽章）：你的主色

强调色之所以有效，正因为它只占 10%。到处都是主色的页面等于没有主色。

从零配一套色（三步）

第 1 步：选主色

选一个饱和度中等偏上的颜色当品牌色。参考本知识库的选择：竹月 #6090B8——不够艳也不发闷，做链接和按钮都稳。

第 2 步：衍生状态色

主色确定后，交互状态由它衍生（变亮/变暗），而不是另选颜色：

:root {
  --color-primary: #6090b8;      /* 默认 */
  --color-primary-hover: #7ba6c9;   /* hover：变亮 */
  --color-primary-active: #4e7ba3;  /* 按下：变暗 */
  --color-primary-soft: rgba(96, 144, 184, 0.14); /* 选中背景：加透明度 */
}

第 3 步：定中性色阶梯

文字和背景不要用纯黑纯白，带一点主色相的灰更高级：

:root {
  --text-1: #1f2d3a;   /* 主文字：极深的蓝灰 */
  --text-2: #5c6d7c;   /* 次要文字 */
  --text-3: #9aa8b4;   /* 辅助文字 */
  --bg-1: #ffffff;     /* 页面背景 */
  --bg-2: #f5f7f9;     /* 卡片背景 */
  --border: #e4e9ee;   /* 边框 */
}

双色搭配：成对使用

装饰场景（插画、卡片点缀、渐变）需要第二颜色时，用成对的搭配而不是随机挑。本知识库的规范就存在 AGENTS.md 配色专区，例如奶油粉 #F3D8C3 ＋ 竹月 #6090B8：一个低饱和打底、一个中饱和强调，天然不打架。

你的配色库

AGENTS.md 里有专属「配色专区」，收录验证过的搭配。找到好看的配色先记进去，用的时候只从库里拿——这比每次现场配快得多，而且保证全站一致。

可读性红线

• 正文文字和背景的对比度至少 4.5 : 1（大字 3 : 1），用 WebAIM Contrast Checker 验
• 浅色背景上避免纯灰 #777 以下做正文
• 彩色背景上放文字前先压暗背景，或文字改白

收藏的工具

• 配色灵感：中国色（传统色，本库配色就是从这类思路来的）
• 快速生成：Coolors（按空格随机，锁住喜欢的）
• 对比度检查：WebAIM

完整清单见精选资源大清单。