颜色与色彩空间

你在设计稿里选了一个漂亮的橙色，做成网页后在同事的电脑上看起来发土，在你手机上又特别艳。谁错了？其实谁都没错——"颜色"从来不是一个绝对的东西，它是一组数字，加上一份"这组数字该怎么解读"的说明书。这一节把这份说明书摊开来看：三个数字怎么变成一种颜色，透明是怎么算出来的，以及为什么同一个色号在不同屏幕上会长得不一样。

RGB：为什么是红绿蓝这三个

屏幕上每一个像素，其实是三个挨得极近的微型灯：红（Red）、绿（Green）、蓝（Blue）。它们各自独立发光，因为距离太近，你的眼睛无法分辨，只会把三束光混合后的结果当成"一个颜色"。

选这三个颜色不是随便定的，而是照着人眼的构造抄的。人的视网膜上有三种视锥细胞，分别对长波（偏红）、中波（偏绿）、短波（偏蓝）最敏感。屏幕要骗过眼睛，最省事的办法就是直接给这三种细胞分别投喂对应的光——只要三种细胞收到的刺激比例和看真实物体时一致，大脑就认为"我看到了同一个颜色"。屏幕不是在复制颜色，是在复制眼睛对颜色的反应。

这句话听着玄，换成大白话就是：屏幕不做菜，它只负责让你的舌头以为吃到了那道菜。好比一杯调好的果味饮料，里面一片真果肉都没有，但香精的配比刚好让你的味蕾收到"这是芒果"的信号——舌头认了，大脑就认了。屏幕干的活儿完全一样：它手上只有红绿蓝三种"香精"，靠调比例让你的三种视锥细胞收到和看真芒果时一样的信号。

因为混合的是光，所以叫加色混合（additive）：加得越多越亮，全加满是白。这和小学美术课上颜料的规律正好相反——颜料是减色混合（subtractive），每加一种颜料就多吸收一部分光，混到最后是脏黑色。打印机用的 CMYK 就是减色体系，这也是"屏幕上鲜艳的荧光绿印出来永远发闷"的根本原因：印刷用的是吸光的墨，压根做不出发光的效果。

加色和减色这一对，用洗衣服的场景能一秒分清。减色好比往一盆清水里滴染料：滴的颜色越多，水越浑越暗，最后是一盆脏灰。加色好比在黑屋子里开灯：开的灯越多，屋子越亮，全开就是大白天。屏幕是后者——它的起点是全黑，你做的每一步都是"往上加光"；颜料和印刷是前者——起点是全白的纸，你做的每一步都是"从光里减掉一部分"。起点相反，方向相反，所以两套体系永远不可能完全对得上。

十六进制：#FF6B35 到底在说什么

三个通道各 0~255，写成 rgb(255, 107, 53) 已经很清楚，但代码里更常见的是 #FF6B35。这两个是同一个东西的两种写法，只是后者把十进制换成了十六进制。

为什么要换一种进制？说白了就是为了写得短、不出错。rgb(255, 107, 53) 有 18 个字符，还带逗号和空格；#FF6B35 只有 7 个，而且长度永远固定。这就相当于电话号码——你不会写成"区号零一零，然后八个数字分别是……"，而是直接写成一串固定长度的数字，好念、好抄、好比对。

十六进制用 0-9 和 A-F 共十六个符号表示一位，好处是：0~255 刚好能用两位十六进制表示完（00 到 FF），不多不少。于是三个通道 = 六个字符，整齐得像身份证号。

"十六进制"这个词本身也值得翻译成人话：就是数到 15 才进位，而不是数到 9 就进位。好比一个鸡蛋托能放 16 个而不是 10 个——满了才换下一托。这样一托刚好装满一个"半字节"的信息量，两托就是一整个字节，也就是 0～255。选十六进制不是为了炫技，而是因为它和计算机的存储单位刚好对齐，一格不多一格不少。

#FF6B35
 └┬┘└┬┘└┬┘
  R  G  B

FF = 15×16 + 15 = 255   → 红：拉满
6B =  6×16 + 11 = 107   → 绿：中等偏低
35 =  3×16 +  5 =  53   → 蓝：很少
结果：一个饱和的橙红色

几个记忆锚点，看到就能秒懂：

• #000000 / #FFFFFF全关是黑，全开是白。这是加色混合最直接的两个端点。
• 三通道数值相等#888888、#CCCCCC——只要 R=G=B，一定是灰色。数值越大越浅。
• 缩写形式#F60 等于 #FF6600，每位自我复制一次。只是省字，能力没变。
• 带 Alpha 的八位写法#FF6B3580 最后两位是透明度，80 ≈ 50%。现代浏览器都支持。

HSL：更符合人脑的调色方式

RGB 对机器友好，对人非常不友好。请回答：把 #FF6B35 变浅一点，该怎么改？你得同时提高三个通道，还得维持它们的比例，才不会连色相一起改掉。这在实际工作中几乎无法手算。

这个别扭之处，打个比方就懂了：用 RGB 调色相当于在厨房里靠"分别加多少克盐、多少克糖、多少克醋"来控制一道菜的口味。你想让菜"淡一点"，不能只减盐——三样得按比例一起减，不然味道就跑偏了。而 HSL 相当于给你三个直接的旋钮：什么味道、多浓、多淡。想淡一点，只拧"多淡"那一个就行。RGB 是配料表，HSL 是口味旋钮，描述的是同一道菜。

于是有了 HSL，它把颜色拆成三个人类真正会用的维度：

• H · 色相 Hue0~360 度，是"哪一种颜色"。想象一个圆盘：0° 红、60° 黄、120° 绿、180° 青、240° 蓝、300° 品红，转一圈回到红。
• S · 饱和度 Saturation0%~100%，是"颜色有多浓"。100% 是最纯的原色，0% 变成灰——相当于给颜色兑多少水。
• L · 亮度 Lightness0%~100%，是"加了多少白或黑"。0% 一律是黑，100% 一律是白，50% 是这个色相最饱满的状态。

有了这套坐标，设计系统里那些"同色系深浅梯度"就变成了小学算术——只动 L，色相和浓度自动保持一致。这一步的价值相当于把一整柜衣服按同一个色系配好，深浅五档一次到位；而用 RGB 手调，等于每一档都要重新对着镜子试一次。

/* 一整套按钮配色，只改亮度 L */
--brand-100: hsl(24 92% 92%);   /* 极浅底色 */
--brand-300: hsl(24 92% 72%);   /* 浅色边框 */
--brand-500: hsl(24 92% 52%);   /* 主色 */
--brand-700: hsl(24 92% 36%);   /* hover 加深 */
--brand-900: hsl(24 92% 20%);   /* 深色文字 */

/* 想换整站主色调？只改这一个数 */
/* 把 24 改成 210，全套变成蓝色系 */

注意 HSL 和 RGB 描述的是同一批颜色，只是换了坐标系——就像"经纬度"和"街道门牌号"都能定位同一栋楼。浏览器内部会把 HSL 换算回 RGB 再点亮那三盏灯。

这个"换坐标系"的说法值得再落实一下。你跟快递员说"朝阳区某某路 12 号 3 单元 501"，跟导航软件说"北纬 39.98，东经 116.42"，指的是同一个门。门牌号方便人念、方便找楼栋；经纬度方便机器算距离。HSL 是门牌号，RGB 是经纬度——写代码时用哪个看谁方便，最后进屏幕的一律换成经纬度。

顺便提一个实际工作里非常省事的推论：因为 HSL 的 H 是一个转一圈的角度，所以"配一组互补色"就变成了一道加减法。主色 H 加 180 度就是它的对面色，加 120 度和 240 度就是等距的三色搭配。这相当于洗衣服时按色卡分堆——你不用凭感觉判断"这件配那件好不好看"，直接按角度数着来就行。

Alpha 通道：透明是怎么被"算"出来的

屏幕上没有"半透明的灯"这种硬件。像素只能发出一个确定的颜色，不存在"发一半"。所以透明不是一种颜色，而是一次运算——系统把上层颜色和下层颜色按比例混合，算出一个新颜色，然后把这个新颜色点上去。

这一点特别反直觉，所以要说透。你以为"半透明"是像一层薄纱盖在下面的东西上，其实屏幕根本没有"薄纱"这个东西。它做的是：先看一眼下面是什么颜色，再看一眼上面是什么颜色，然后在心里兑出一个中间色，最后只画那一个中间色。屏幕上从来没有两层，永远只有一层，只是那一层的颜色是算出来的。

用调料打个比方：这不是"往汤上浮一层油"，而是直接按比例兑好一勺新的酱汁，一次淋上去。所以同一勺"半透明的红"，兑在白汤里是粉色，兑在酱油汤里就是暗红——不是那勺红变了，是被兑的东西不同。

这个运算叫 Alpha 混合（alpha blending），公式朴素得让人安心：

结果 = 前景色 × α + 背景色 × (1 − α)

举个具体的：
  前景 红色 rgb(255, 0, 0)，α = 0.5
  背景 白色 rgb(255, 255, 255)

R = 255 × 0.5 + 255 × 0.5 = 255
G =   0 × 0.5 + 255 × 0.5 = 128
B =   0 × 0.5 + 255 × 0.5 = 128

结果 = rgb(255, 128, 128) —— 粉色

同样这个半透明红色，压在黑色背景上：
R = 255 × 0.5 +   0 × 0.5 = 128
G =   0 × 0.5 +   0 × 0.5 =   0
结果 = rgb(128, 0, 0) —— 暗红

这就解释了一个常见困惑：同一个半透明色，放在不同背景上看起来完全是两种颜色。因为它压根不是一个颜色，而是一个"和背景做加权平均"的指令。也因此，半透明的 UI 元素在深色模式下往往需要重新调整 α 值，否则会显得过重或过淡。

公式里的"加权平均"翻译成人话就是"按几成几成兑"：α = 0.5 就是一半一半，α = 0.8 就是自己占八成、背景占两成。这跟你在厨房兑一杯蜂蜜水完全是同一件事——同样一勺蜂蜜，兑在一杯清水里是淡甜，兑在半杯清水里就浓得多。α 说的是"这勺蜂蜜的分量占几成"，最终甜不甜还得看被兑的那杯水本来是什么。

顺带说清三个容易混淆的透明相关属性：

踩坑提示：给容器加 opacity 会把里面的文字一起变淡，而且会让这个元素成为一个新的合成层——这一点在下一节讲 GPU 时会再遇到。想只让背景透明、文字清晰，请用 background: rgba(...)。

这两者的差别值得再点一句，因为它是新手最常踩的坑之一。rgba() 相当于只把墙漆调淡，屋里的家具照旧；opacity 相当于给整个房间蒙一层薄膜，连家具一起变淡。你想要的通常是前者——半透明的卡片背景配上清晰可读的黑字；而写了 opacity: 0.5 的结果是整张卡片包括文字全都发灰，看着像坏了。记住这一条：改背景用 rgba，整块淡出才用 opacity。

色彩空间：同一组数字，不同的"说明书"

现在到了最容易被忽略、也最能解释"为什么颜色不一致"的地方。rgb(255, 0, 0) 说的是"把红灯开到最大"——但最大到底有多红？不同屏幕的红灯本身就不一样红。这台设备的"最红"可能只是那台设备的"八成红"。

为了让颜色能跨设备沟通，就需要一份约定：色彩空间（color space）。它规定了 R、G、B 三个"原色"到底指物理世界里哪三束光，以及数值和亮度之间的换算曲线。同一组数字配不同说明书，出来的颜色就不同。

"色彩空间"这个词听着抽象，换成大白话就是一份"这几个数字该怎么念"的说明书。好比菜谱上写"盐一勺"——如果没说清"一勺"是茶匙还是汤勺，两个厨师做出来的咸淡能差三倍。RGB 数值就是"一勺"，色彩空间就是那句"这里的一勺指的是 5 毫升"。数值本身不含任何绝对信息，必须配上说明书才有确定含义。

这里有两个词要分清：色彩空间是那份说明书（包含原色定义、白点、传递曲线），色域（gamut）是这份说明书能表达的颜色范围。P3 的色域比 sRGB 大，意味着它能表达一些 sRGB 里根本"写不出来"的鲜艳红和翠绿。

两个词的关系，简单说就是"菜单"和"这家店能做的菜"：说明书是那本菜单（规定了每个菜名怎么念），色域是厨房实际能做出来的那些菜。菜单更宽的店，能点到一些别家压根没有的菜。色彩空间是说法，色域是能力范围。

色彩管理：让颜色在设备间正确翻译

色彩管理的核心工作只有一件：把"在 A 空间里的这个数值"翻译成"在 B 空间里看起来一样的那个数值"。当一张标注了 Adobe RGB 的照片显示在 sRGB 屏幕上，系统会做一次换算，尽量让观感接近；如果原图颜色超出了目标屏幕能力，就只能压回边界内（这叫 gamut clipping，通常表现为鲜艳区域细节变平）。

这活儿本质上就是翻译，而且是那种"要照顾对方词汇量"的翻译。好比把一句用了大量方言的话翻给一个只懂普通话的人听：意思要尽量保住，实在没有对应词的就只能找个最接近的说法顶上。gamut clipping 说白了就是"对方词汇量不够，只能拿最接近的那个词凑"——原文里三种不同层次的"艳红"，翻过去全变成同一个"红"，于是那一片就失去了层次感，看着像被涂平了。

如果这份声明丢了会怎样？系统只能猜，通常默认按 sRGB 解读。一张实际是 P3 的图被当成 sRGB 显示，颜色就会整体偏淡、发灰；反过来一张 sRGB 图被当 P3 解读，就会过饱和、发荧光。这就是"为什么我导出的图颜色变了"最常见的原因——不是画质丢了，是说明书丢了。

这个"丢说明书"的后果，用一个很日常的场景就能想象：快递包裹上的标签掉了，快递员只能按默认规则猜个地址送过去。包裹本身完好无损，东西一件不少，但送错了门。图片的颜色偏差绝大多数不是"画质损失"，而是"标签掉了、被猜错了"。所以排查这类问题的第一步永远不是重新调色，而是先确认"这张图有没有嵌入色彩配置文件"。

在 CSS 里，你可以显式声明用宽色域，并给不支持的设备留好退路：

.hero {
  /* 第一行：所有设备都能理解的 sRGB 兜底 */
  background: #ff3b30;
  /* 第二行：支持宽色域的设备会覆盖上面那行 */
  background: color(display-p3 1 0.18 0.13);
}

/* 也可以显式检测能力 */
@media (color-gamut: p3) {
  .hero { background: color(display-p3 1 0.18 0.13); }
}

实用建议：网页交付一律以 sRGB 为基准，需要惊艳效果的品牌色再叠加 P3 增强。设计软件里请把工作空间设成 sRGB，导出时勾选"嵌入色彩配置文件"，这两步能挡掉九成的"颜色对不上"问题。

这一段代码的写法和上一节 <picture> 的思路完全一样，都是"先说一个人人都懂的，再补一个懂行的才听得出的"。相当于在餐厅点菜时说"来个招牌汤，如果今天有海鲜高汤就换成海鲜的"——不懂行的服务员按第一句执行，懂行的按第二句升级，两边都不会空手。

对比度：颜色好不好看之外，还得看得清

配色最容易被忽略的一半是可读性。浅灰字配白底，在你的高亮度屏幕上看着很高级，用户在阳光下的手机上可能完全读不到。这不是审美问题，是功能失效。

这件事最要命的地方在于做的人永远看不到问题。你在办公室里、在一台校准过的好屏幕上、屋里光线柔和，那行浅灰字美得不行；而用户是在中午的公交车上、屏幕亮度自动调低、还有一层反光——同一行字直接消失。对比度不是审美偏好，而是一条必须靠数字守住的底线，因为你的眼睛在这件事上完全不可靠。

行业有一套量化标准：WCAG 对比度。它根据前景色和背景色的相对亮度算出一个比值，最低 1:1（完全同色，不可读），最高 21:1（纯黑配纯白）。要求是：

"对比度 4.5:1"这个说法听着抽象，简单说就是"这两个颜色的明暗差得够不够远"。1:1 相当于白纸上用白笔写字，什么都看不见；21:1 相当于白纸黑字的印刷书，这是能做到的极限。而 4.5:1 大约是白底配上 #767676 这种中灰——刚好卡在"绝大多数人在绝大多数环境下都能读清"的那条线上。

• 4.5:1正文文字的合格线（AA 级）。这是最该记住的一个数字——绝大多数设计评审卡的就是它。
• 3:1大号文字（约 18pt 以上，或 14pt 加粗）的合格线，以及图标、输入框边框等非文字元素的最低要求。
• 7:1更严格的 AAA 级正文标准。政务、医疗、金融、教育类产品常被要求达到。
• 注意亮度而非色相对比度算的是明暗差。红字配绿底色相反差极大，但两者亮度接近，对比度可能低到 1.5:1，实际非常难读。

几条能立刻落地的做法：正文别用低于 #767676 的灰配白底（这大约刚好卡在 4.5:1）；禁用态可以放宽，但不要让"占位提示文字"也变得读不清；深色模式下不要直接把颜色取反，纯白字配纯黑底会产生光晕感（halation），通常用 #e8e8e8 配 #1a1a1a 更舒服；最后，永远别只用颜色传达信息——红绿色觉障碍人群约占男性 8%，"红色表示错误"必须同时配上图标或文字。

红绿色觉与色觉障碍：颜色不能当唯一的信息载体

最后那条格外重要，值得单独展开。"只靠颜色传达信息"这个错误，相当于地铁站里所有指示牌都只用颜色区分方向，不写字也不画箭头。对绝大多数人来说没问题，但对色觉障碍的人来说，整个站台的信息瞬间归零。红绿色觉障碍在男性中的比例大约是 8%——意味着一个一千人的用户群里，有四十来个人看不出你那个红色的错误提示和绿色的成功提示有什么区别。解决办法极简单：红色旁边加一个叉号，绿色旁边加一个对勾，或者直接写上"失败""成功"两个字。颜色只能当强化，绝不能当唯一的信息载体。

还有一个特别容易被忽略的坑：对比度算的是明暗差，不是色相差。红字配绿底，两种颜色看起来反差极大，但它们的亮度非常接近，对比度可能低到 1.5:1，实际读起来极其费劲，还会产生视觉上的抖动感。这就好比在一间光线昏暗的屋子里，穿深蓝和穿深棕的两个人站在一起——颜色明明不同，你还是分不清谁是谁，因为明暗一样。判断能不能读，唯一可靠的办法是把配色截图转成黑白，如果转灰之后看不清，那就是真的不清。

五个真实场景的排查思路

这一节的知识点真正兑现价值的时刻，是你遇到"颜色不对"的时候。下面五个场景几乎覆盖了实际工作里的全部情况，每一个都对应上面某一道关。

场景一 · "设计稿上的橙色，做出来发土。"先问一句：设计稿是在什么色彩空间下做的？如果设计师的工作空间是 Display P3 而你的网页按 sRGB 输出，那个"最艳的橙"在 sRGB 里压根写不出来，只能被压回边界。这不是你实现错了，是配方要求的香料这间厨房没有。解决办法是让设计师在 sRGB 下工作，或者用 color(display-p3 ...) 给支持的设备做增强。

场景二 · "同一个色号，在 Chrome 和微信里不一样。"这几乎一定是色彩管理的差异——某一方读取了图片里的 ICC 配置文件，另一方忽略了。相当于同一个包裹，一个快递员按标签送，另一个按默认规则猜着送。排查方法是把图片重新导出并显式嵌入 sRGB 配置文件，九成情况立刻一致。

场景三 · "半透明的卡片，在深色模式下几乎看不见了。"回到 alpha 公式：结果 = 前景 × α + 背景 × (1−α)。你当初调的 α 是配着白底试出来的，换成黑底之后，兑出来的那个颜色完全变了。这就像同一勺蜂蜜，兑在清水里刚好，兑进浓咖啡里就完全喝不出来。解法是深浅两套模式各调一组 α 值，而不是共用一个。

场景四 · "禁用态的按钮文字，用户反馈看不清。"这是对比度问题，而且是最常被"设计上有意为之"当借口放过去的一个。禁用态确实可以放宽，但下限是用户至少要能读出这个按钮上写的是什么，否则他压根不知道自己被禁用了什么功能。这好比银行窗口挂了一块牌子说明暂停办理，字却小到看不见——用户只会一直排队，然后发火。

场景五 · "打印出来的颜色和屏幕上完全不一样。"这一条从原理上就无解，只能减小差距。因为屏幕是加色（在黑屋子里开灯），印刷是减色（往白纸上刷墨），两者起点相反、方向相反。屏幕上那种发光的荧光绿，印刷用吸光的墨永远做不出来。遇到这类需求，正确做法是提前用打样确认，而不是在屏幕上反复调到"看着一样"——因为屏幕上永远调不出纸的质感。

把五个场景的排查顺序总结成一条口诀：先看说明书在不在（色彩空间与配置文件），再看是不是被兑过（alpha 与背景），最后看明暗差够不够（对比度）。三步走完，绝大多数颜色问题都能定位到具体那一环。

把这一节串起来看

一个颜色从你手里走到用户眼里，要过四道关：第一关，你用某种坐标系（RGB / HSL）写下三个数字；第二关，这些数字要配上一份说明书（sRGB / P3）才有确定含义；第三关，如果涉及透明，系统会用 alpha 公式把它和背景混合成一个实际颜色；第四关，屏幕按自己的能力把它点亮，色彩管理负责在中间做翻译，超出能力的部分被压回边界。任何一关的信息丢失或误解，都会表现为"颜色变了"。

这四道关串起来，本质上就是一次从厨房到餐桌的完整流程：写配方、说清计量单位、按比例兑好、最后由这间厨房的实际原料水平端上桌。"颜色变了"这句抱怨，十次里有九次不是画质问题，而是这条链上某一环的信息没传到位。把这四关记住，你就有了一张排查地图，而不是只能靠反复微调去碰运气。