颜色选择：不只是好看那么简单

可视化演示

动态演示颜色选择的核心机制，通过概览/流程/对比/趋势四种模式展示关键概念与交互流程。

色彩空间基础：油漆店的两种“语言”

小林站在油漆店里，指着一块灰色色卡说：“我要这个莫兰迪灰。”店员却问：“你要哪一种灰？是按配方兑出来的灰，还是按感觉挑出来的灰？”说着递过来两本目录：一本是密密麻麻的数字配方，另一本是按色相、鲜艳度、明暗排好的样卡。

两本目录就是计算机世界的两套色彩语言。RGB 是配方本：屏幕上的每个像素用红、绿、蓝三盏小灯按不同亮度发光，所以它是“加法混色”——三盏灯全开是白，全灭是黑。而 HSL 是感觉本：色相 H 告诉你这颜色属于哪个家族（红橙黄绿蓝紫），饱和度 S 告诉你它鲜艳还是灰扑扑，明度 V/L 告诉你它亮还是暗。设计师写“莫兰迪灰”时用的是 HSL 的感觉，浏览器渲染时却必须换算成 RGB 的配方。

配方本里藏着一个反直觉的事实：人眼对三种原色的敏感度完全不同。同样是数值 100，绿色看起来远比蓝色亮得多。于是就有了感知亮度的经典公式：

看完成分表，小林终于明白：选颜色之前，得先知道这套颜色在“谁的眼里”被看到。配方本和感觉本之间的换算，是一切配色决策的起点。好在接下来的每一个问题，都能从这两本目录里找到答案。

数据类型匹配：先问房间干什么用

我问小林：“你的客厅要干什么？”他说看投影、读书。我又问：“卧室门呢？”他说要贴家人的名字标签。同一个问题，在配色里就是：你要画的数据是什么类型？ 用途决定了涂料，数据决定了色板。

客厅看投影，需要一面从浅到深缓慢过渡的渐变墙——这对应连续数据，比如温度、降雨量、海拔。渐变暗示“中间还有很多值”，符合人对连续量的直觉。卧室门要区分四个人，就得用四种互相不撞的颜色——这对应分类数据，比如品类、地区、部门。颜色只负责“你和他不一样”，不负责排序。还有一种有序数据，比如 1 到 5 分的评分，适合同一色系由浅入深，既分等级又不乱。至于发散数据，比如气温正负、营收盈亏，则需要一面以零点为轴、两边各自渐变的反向墙—中间是中性色，两端各奔冷暖。

造一面渐变墙，本质上是在两桶油漆之间不断兑出中间色。计算机做这件事的办法，就是逐通道的线性插值：

小林恍然大悟：原来“选颜色”应该先问“数据是哪种性格”。连续数据要的是平滑的过渡，分类数据要的是干脆的界线——用错类型，就像把卧室门漆成渐变色，四扇门根本分不清谁是谁。

连续色板设计：黄昏墙要“均匀地”暗下去

小林决定在客厅刷一面“黄昏渐变墙”：从亮白到深紫。木工师傅直接用公式一顿线性插值，刷出来的墙面却让人皱眉——中间一段灰扑扑的，像谁打翻了水泥。问题出在哪？出在 R、G、B 三个通道的“算术距离”并不等于人眼的“感知距离”。

打个比方：RGB 空间是一张按配方编号的地图，但地图上“等距”的两个格点，落在人眼里可能是“一步”和“十步”的区别。要让人眼觉得均匀，就得换一张以感知为尺度的地图——Lab 色彩空间。Lab 里，L 管明度，a 管红绿对立，b 管黄蓝对立，三个轴都按人的视觉重排过。于是衡量两个颜色“差多少”的标准也变了：

明白了这一点，就能理解为什么 Viridis 家族（Viridis、Magma、Inferno、Plasma）成了连续色板的“网红”：它们在设计时直接在感知空间里等步长取点，明度单调上升，而且天然对红绿色盲友好。老师傅刷黄昏墙，靠的是眼睛一遍遍调色；Viridis 则把“匀”写进了工厂的配方里。

离散色板设计：六扇门互不撞色

新房有六扇卧室门，小林想用六种颜色区分。我提醒他：走廊灯很暗，深夜回家时你得能在十米外一眼认出自己的门。这一眼，就是离散色板的全部考验——分类色板不需要渐变，需要的是互相之间足够远。

怎么算“足够远”？把每个颜色当成空间里的一个点，然后找到“最像”的那一对，看它们离多远：

除了距离，还有两条实战纪律。第一，门牌色的明度尽量一致：六扇门如果有一扇特别亮，人眼会自动把它当成“重点门”，产生虚假的层级。第二，门的数量别贪多：心理学里有个"7 ± 2"的经验值，超过七个类别，人眼和大脑的记忆就开始打架。真到非用十几种颜色不可时，请给门加上门牌——形状和纹理的冗余编码，永远比纯颜色可靠。

色盲友好设计：色弱朋友来做客

小林的好友阿哲是红绿色弱。装修验收那天，我看着六扇门上的红红绿绿，问小林：“阿哲来借宿，他能分清自己的房间吗？”小林愣住了。这不是客套，而是真实世界的残酷统计：每 12 个男性里就有 1 个红绿色弱，大约 8%；女性也有约 0.5%。

色盲不是“看不见颜色”，而是某些颜色轴“塌了”。最常见的是红绿色弱，红色和绿色在他们的世界里退化成相似的灰黄色，我们眼里的“红绿分明”在他们眼里是“灰黄莫辨”。要提前发现这类问题，业界用一套模拟变换——把每种颜色放进“红绿色弱滤镜”里过一遍：

解药有两味。一味是安全色板：比如 Okabe-Ito 的八色方案，用橙、天蓝、蓝、绿、粉、黄这种“色弱也能拉开”的组合；另一味是冗余编码——在颜色之外，叠加上形状、线型、纹理和文字标签。好比门牌不仅颜色不同，还写着名字。这样即使色觉完全正常的人，也能从形状里获得第二重确认。

工具与实践：大师傅的色卡册

装修收尾那天，老师傅从工具箱里掏出一本翻得卷了边的色卡册，说：“我记不住那么多配方，但我认得这本册子里每一页能用在哪儿。”配色工具正是这样一本色卡册——替你把理论和经验固化下来。

最著名的ColorBrewer，是给地图和数据图表量身定做的选色工具：你先告诉它数据类型（连续、分类、发散），再告诉它输出介质（屏幕还是打印），它就会给出经过检验的色板，还标注了色盲友好程度。Chroma.js 则更像一个调漆台：你能用它做颜色插值、调亮调暗、在不同色彩空间之间换算，自己动手搓出定制色板。而无障碍规范，比如 WCAG，给出了硬性的对比度要求，图形元素的前景色与背景色对比度一般不应低于 3:1：

工具终究是工具的册子，原理才是翻册子的手。ColorBrewer 为什么推荐这套而不推荐那套？因为它在用 Lab 的 ΔE、色盲模拟矩阵和对比度公式做层层筛选。小林最终签下的验收清单上写着三行字：数据类型对不对得上、色弱模拟过不过得了、对比度达不达标。颜色选择，从此不再是“我觉得好看”。

AI 应用场景

Python 演示

# -*- coding: utf-8 -*-"""A tiny colorblind-safety checker for data visualization palettes."""  def hex_to_rgb(hx):    hx = hx.lstrip('#')    return tuple(int(hx[i:i + 2], 16) for i in (0, 2, 4))  def luminance(hex_color):    """Perceived brightness: Y = 0.299R + 0.587G + 0.114B."""    r, g, b = hex_to_rgb(hex_color)    return 0.299 * r + 0.587 * g + 0.114 * b  def check_palette(palette, threshold=20.0):    """Return pairs whose luminance gap is too small for colorblind users."""    lums = [luminance(h) for h in palette]    weak_pairs = []    for i in range(len(palette)):        for j in range(i + 1, len(palette)):            gap = abs(lums[i] - lums[j])            if gap < threshold:                weak_pairs.append((palette[i], palette[j], round(gap, 1)))    return weak_pairs  def make_ramp(start, end, steps=9):    """Build a continuous palette by linear RGB interpolation."""    a = hex_to_rgb(start)    b = hex_to_rgb(end)    ramp = []    for t in range(steps):        ratio = t / (steps - 1)        rgb = tuple(round(a[k] + (b[k] - a[k]) * ratio) for k in range(3))        ramp.append('#%02X%02X%02X' % rgb)    return ramp  if __name__ == '__main__':    bad = ['#D00000', '#008000']          # classic red-green trap    safe = ['#E69F00', '#0072B2']         # orange vs blue (Okabe-Ito style)    print('red/green weak pairs:', check_palette(bad))    print('orange/blue weak pairs:', check_palette(safe))    print('continuous ramp:', ' '.join(make_ramp('#818CF8', '#10B981', 5)))

1. return 0.299 * r + 0.587 * g + 0.114 * b复现正文第一条公式：人眼对绿最敏感，所以绿色权重最大。
2. gap = abs(lums[i] - lums[j])红绿色弱人群主要靠明度区分颜色，明度差过小就是“撞色”。
3. if gap < threshold:阈值 20 是经验值，调得越小，对配色越严格。
4. rgb = tuple(round(a[k] + (b[k] - a[k]) * ratio) for k in range(3))线性插值公式 C(t) = (1−t)·C₀ + t·C₁ 的逐通道实现。
5. print('red/green weak pairs:', check_palette(bad))经典的纯红 + 纯绿果然被标记，说明这条规则能抓住真实陷阱。
6. check_palette(safe)换成橙与蓝后明度差距拉开，输出为空列表，安全通过。

常见误区

面试题