LESSON · VALLEY OF HUES
二
色彩与配色
谷里的花草各有各的颜色，却从不打架。这一站学会描述色彩、组织色彩，并守住可读性的底线。
No.01
色彩的三个属性
说「这个绿色不错」太含糊，设计师用三个坐标描述任何颜色：色相（是哪种颜色）、饱和度（多鲜艳）、明度（多亮）。拖动滑杆，看一个颜色如何被三个数字精确定位。
试一试
调一台自己的颜色
H · S · Lhsl(150, 55%, 45%)
谷中来信
界面里的大面积用色应该克制：颜色落在标题和按钮上，就足够了。
主要操作
150°
55%
45%
No.02
让颜色成为一家
好看的配色很少是「挑出来的」，多半是按关系生成的。选定一个主色相，再选一种关系，整套颜色就自己长出来了。写界面时，先想清楚每个颜色扮演什么角色。
试一试
和谐关系生成器
pick a relation18°
另一个久经考验的配方——60-30-10：六成打底、三成辅助、一成点睛。点睛色越少，越有力量。
60% · 底色
30% · 辅助
10%
No.03
可读性是底线
再美的配色，看不清就全错了。WCAG 给出硬指标：正文文字与背景的对比度至少 4.5 : 1，大号标题可以放宽到 3 : 1。这是谷里唯一的「法律」。
试一试
对比度检查器
≥ 4.5 : 1山雾漫漫
雾气最重的清晨，路标若隐若现——文字与背景靠得越近，读起来越费力。这就是对比度在度量的事情。
4.6 : 1
AA 通过30°
33%
40°
88%
No.04
颜色自带语气
人对颜色有本能的反应。选色之前，先想想这一页想让访客感受到什么：
暖色 · 红橙黄
热烈、紧迫、有食欲。促销、餐饮、警示常用；大面积使用容易焦躁，需要冷色或中性色压场。
冷色 · 蓝绿紫
冷静、专业、可信赖。科技、金融、医疗的心头好；用多了疏离，点缀暖色能拉回人气。
中性 · 灰棕米
沉稳、克制、不抢戏。是版面的大多数，也是彩色的舞台。中性色偏暖偏冷一点，气质立刻不同。
No.05
样例小径
两张按「关系」配色的界面小样。
No.06
本站行囊
- 用色相、饱和度、明度三个坐标谈论颜色
- 配色按关系生成：单色 / 邻近 / 互补 / 三角
- 面积配方 60-30-10，点睛色越少越有力量
- 正文对比度 ≥ 4.5 : 1，这是底线不是追求