配色与语义颜色

先理解这个概念

颜色需要按角色使用。原始色板描述色值，语义色描述用途，例如文本、表面、边框、危险。品牌色不应该自动变成所有链接、提示与图表的颜色。饱和度和明度控制视觉重量。

颜色应按用途命名，而不是把某个色值直接等同于含义。品牌蓝可能用于主要操作，信息提示也可能是蓝色，但两者的对比要求和背景不同。将原始色板与语义角色分开，能让主题变化时仍保持文字、表面、边界和状态之间的关系。

记住这三个原则

1. 01

   先建立中性色与可读文字，再加入少量强调色。

2. 02

   同一种状态跨页面保持一致。

3. 03

   不要仅用颜色传递成功、失败或选中状态。

实际设计时，分三步做

1. STEP 01

   先定义页面背景、内容表面、主要文字、次要文字、边界、操作与状态等角色，再选择各角色的颜色。

2. STEP 02

   为成功、警告和错误配套文字或图标，不要求用户只靠色相识别状态；选中态同样需要其他线索。

3. STEP 03

   检查角色在实际组合中的对比，包括按钮文字、浅色提示背景和悬停状态，不能只审查单独的色板。

一个容易理解的例子

用户不必根据上下文反复猜测颜色含义。

:root {
  --text-primary: #20231e;
  --surface: #fff;
  --action-bg: #263d22;
  --action-text: #fff;
}

适用边界与取舍

强调色过多会削弱真正需要突出的操作。品牌表达可以通过排版与图像完成，不必把每个组件都染成品牌色。