颜色基础
色相、明度、饱和度，以及界面里为什么中性色占九成。
界面里九成的面积是中性色，彩色只用在需要被看见的地方。颜色越省着用，它就越有效。
你会遇到的现象：
- 页面花花绿绿，但说不清重点在哪
- 想加一个新状态，发现颜色已经不够用了
- AI 生成的界面全是蓝紫渐变，跟品牌没关系
三个属性
| 属性 | 是什么 | 在界面里怎么用 |
|---|---|---|
| 色相 | 红黄蓝，颜色本身 | 用来区分不同类别。同一个页面里色相越少越干净 |
| 明度 | 亮还是暗 | 建立层级的主要手段。同一色相拉出深浅，比换色相安全 |
| 饱和度 | 鲜艳还是灰 | 大面积用低饱和，小面积可以高饱和。反过来会刺眼 |
做界面时最常用的是明度：同一个主题色拉出五到九个深浅档，按钮、悬停、背景、边框各用一档，页面就自然协调。这也是为什么设计系统只记色号不记颜色名字——色号保证一致，名字只会让人凭感觉取近似值。
四类角色
- **主题色。**一个就够。用在主按钮、选中态、链接、品牌标识上。它出现的地方，就是你希望用户点的地方。
- **中性色。**从近黑到近白拉一条灰阶，管文字、边框、底色、分隔。界面九成的面积都是它。
- **语义色。**成功绿、警告黄、错误红。这三个是行业惯例，别为了差异化改掉。
- **点缀色。**图表、标签分类时才需要。日常界面可以完全不用。
四类加起来控制在五种色相以内。超过之后，用户就无法从颜色里读出意义了——颜色多到一定程度，它就退化成了装饰。
选定主题色之后一定要记下具体色号并拉出深浅档。只记「蓝色」，下次做另一个页面时你会拿到另一个蓝——这是全站颜色慢慢走样最常见的起点。
怎么选主题色
| 方式 | 怎么做 |
|---|---|
| 跟品牌一致 | 有 logo 就取 logo 的主色。这是最省事也最不会错的做法 |
| 跟内容匹配 | 金融偏稳重的蓝，食品偏暖的橙红，环保偏绿 |
| 从参考里取 | 找一个你认可的产品，取它的主色号，再往自己的方向偏一点 |
| 用配色工具生成 | 确定主色号之后，用配色工具生成互补色、类比色，挑一个当辅助色 |
几个常见问题
- **别只靠颜色传递信息。**红绿色觉障碍的人占比不低。状态除了颜色还要有文字或图标。color-blindness-wiki
- **对比度要够。**浅灰字配白底看着高级，但很多人读不清。正文对比度至少 4.5:1，这是 WCAG 对普通文本的最低要求。wcag-contrast
- **大面积渐变要慎用。**它很容易让页面显得像模板，尤其是蓝紫那一套。要用就压低饱和度，作为背景而不是主角。
- **暗色模式不是把颜色反过来。**纯黑底配纯白字会晃眼，通常用接近黑的深灰配接近白的浅灰，饱和度也要相应降低。
**怎么检查配色有没有用对。**把页面截图去饱和（转成灰度）看一眼：如果去色之后层级还在，说明你主要靠明度而非色相建立结构，这是健康的信号；如果去色之后什么都分不清，说明你过度依赖颜色——用户一旦有色觉异常，或者换了主题，你的层级就塌了。