Color Basics
Nine-tenths of an interface is neutral; color only goes where it needs to be seen. The more sparingly you use color, the more effective it is.
What you will run into
- 页面花花绿绿，但说不清重点在哪
- 想加一个新状态，发现颜色已经不够用了
- AI 生成的界面全是蓝紫渐变，跟品牌没关系
Three Properties
| 属性 | 是什么 | 在界面里怎么用 |
|---|---|---|
| 色相 | 红黄蓝，颜色本身 | 用来区分不同类别。同一个页面里色相越少越干净 |
| 明度 | 亮还是暗 | 建立层级的主要手段。同一色相拉出深浅，比换色相安全 |
| 饱和度 | 鲜艳还是灰 | 大面积用低饱和，小面积可以高饱和。反过来会刺眼 |
Four Roles
- Brand color. One is enough. Use it on primary buttons, selected states, links, brand marks. Where it shows up is where you want users to click.
- Neutral colors. Pull a gray scale from near-black to near-white to handle text, borders, backgrounds, dividers. These cover nine-tenths of the interface.
- Semantic colors. Success green, warning yellow, error red. These three are industry convention—don't change them for the sake of being different.
- Accent colors. Only needed for charts and tag categories. Everyday interfaces can skip them entirely.
Keep all four roles to no more than five hues combined. Beyond that, users stop being able to read meaning out of color — past a certain density, color degrades into decoration.
How to Pick a Theme Color
| 方式 | 怎么做 | |
|---|---|---|
| 跟品牌一致 | 有 logo 就取 logo 的主色。这是最省事也最不会错的做法 | |
| 跟内容匹配 | 金融偏稳重的蓝，食品偏暖的橙红，环保偏绿 | |
| 从参考里取 | 找一个你认可的产品，取它的主色号，再往自己的方向偏一点 | |
| 用配色工具生成 | 确定主色号之后，用配色工具生成互补色、类比色，挑一个当辅助色 |
Common Pitfalls
- 别只靠颜色传递信息。红绿色觉障碍的人占比不低。状态除了颜色还要有文字或图标。
- 对比度要够。浅灰字配白底看着高级，但很多人读不清。正文对比度至少 4.5:1。
- 大面积渐变要慎用。它很容易让页面显得像模板，尤其是蓝紫那一套。要用就压低饱和度，作为背景而不是主角。
- 暗色模式不是把颜色反过来。纯黑底配纯白字会晃眼，通常用接近黑的深灰配接近白的浅灰，饱和度也要相应降低。