在线取色器使用指南：屏幕取色与配色技巧
取色器把屏幕上的一个像素变成可以复制的色值，但拿到 #FF6B35 之后，真正决定成败的是另外三件事：用哪种模型描述它、把它放在什么背景上、暗色模式下又该换成哪个值。同一段代码在设计师的广色域屏幕上和在用户的普通显示器上，完全可能看起来不是同一个颜色。
本文不复述工具的操作步骤，而是把颜色的表示方式与选型讲清楚：六种颜色模型各自描述什么、HEX 有哪几种写法、HSL 为什么比 RGB 更适合调色、对比度是怎么一步步算出来的、设计系统里的颜色该如何命名与换肤。文中的每一个数字都给出了可复算的过程，可以对照站内工具验证。
一、颜色模型的谱系：六种表示法各自描述什么
所有颜色模型都在回答同一个问题——这个颜色怎么用数字写出来——但它们的坐标系完全不同，混用就是大多数配色事故的起点。
RGB 是设备坐标系。它把颜色拆成红、绿、蓝三个发光通道，取值 0 到 255。屏幕用加色法：三个通道拉满得到白色，全部归零得到黑色。rgb(255,107,53) 是一个典型的橙红色。RGB 的问题是与人的直觉脱节：想让这个橙色"再亮一点"，三个数字都得改，改多少只能靠试。
HEX 不是独立的模型，只是 RGB 的十六进制写法。把三个 0 到 255 的数字各写成两位十六进制，就得到 #FF6B35——它与 rgb(255,107,53) 是同一个颜色。网页与设计稿普遍使用它，因为它短、便于复制，也不会出现空格与括号的转义问题。
HSL 是人的坐标系。色相回答"是什么颜色"，饱和度回答"有多鲜艳"，亮度回答"有多亮"。调色时只需要动一个数字，就能得到同色系的深浅变化，这是 RGB 做不到的。
HSV（也叫 HSB）是 HSL 的变体。两者的色相定义相同，区别在"亮"的含义：HSL 的亮度 100% 是纯白，HSV 的明度 100% 是饱和色本身。Photoshop 的拾色器用的是 HSV，所以在 PS 里把明度拉到顶得到的是鲜艳的颜色，而在 CSS 里把 HSL 的亮度拉到 100% 得到的是白色——这是跨工具协作时最常见的困惑之一。
CMYK 是印刷坐标系。它属于减色法：油墨叠得越多，反射回来的光越少。它描述的是一组油墨配比，与屏幕发光之间没有一一对应关系。屏幕能显示的鲜艳青绿与荧光橙，四色印刷印不出来；反过来，印刷用的某些专色，屏幕也无法准确模拟。
Lab 与 OKLab / OKLCH 是感知坐标系。它们的设计目标是让数值上的等距接近视觉上的等距。在 sRGB 里，三个通道对亮度的贡献差异极大：同样取满值，绿色的相对亮度是 0.7152，蓝色只有 0.0722，两者相差近 10 倍。所以直接在 RGB 里插值或等量调亮，结果往往偏色。Lab 系列通过数学变换把这个不均匀的感知空间拉直，代价是计算复杂、不适合心算。
二、HEX 远不止 #RRGGBB 一种写法
HEX 的每种写法都有明确的解析规则，写错一位不会报错，只会静默变成另一个颜色。下表是 CSS 支持的四种写法：
| 写法 | 含义 | 示例 | 展开后的等价写法 |
|---|---|---|---|
| #RGB | 三位简写，每一位重复一次 | #F53 | #FF5533，即 rgb(255,85,51) |
| #RRGGBB | 标准六位写法 | #FF6B35 | rgb(255,107,53) |
| #RGBA | 四位简写，第四位是透明度 | #F538 | #FF553388 |
| #RRGGBBAA | 八位写法，末两位是透明度 | #FF6B3580 | rgba(255,107,53,0.502) |
三条最容易踩的规则。第一，只有各位重复的六位写法才能简写。#FF5533 可以写成 #F53，但 #FF6B35 的第二组是 6B，硬要简写会得到 #F63，也就是 #FF6633，是另一个颜色，所以浏览器判定这类简写非法，整条声明会失效。
第二，八位 HEX 的末两位是透明度，不是"更精确的两位"。在 #FF6B3580 里，80 是十六进制的 128，对应不透明度 128 ÷ 255 ≈ 50.2%。把这个半透明色叠在白底上，最终呈现的是 #FFB59A；叠在黑底上则是 #80361B。同一个色值，两种背景给出两种观感——这正是"取到的颜色放进自己的项目就不对了"的最常见原因。
第三，六位与八位写法对大小写不敏感，#ff6b35 与 #FF6B35 完全等价。真正需要提防的是把字母 O 看成数字 0、把字母 l 看成数字 1——在批量替换与人工抄写色值时，这类误读比格式错误更常见。要批量校验一段代码里的色值是否合法，可以用正则测试工具配合形如 ^#([0-9a-fA-F]{3,4}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$ 的表达式逐条过滤。
三、HSL 为什么更适合调色，以及它的两个短板
HSL 的价值在于"改一个数只影响一件事"。把亮度从 60% 降到 45%，色相与饱和度不动，得到的仍是同一族的颜色，只是更沉稳：hsl(16,100%,60%) 对应 #FF6933，降到 45% 是 #E63D00，再降到 30% 是 #992900。一套深浅一致的品牌色可以这样成组产生，而用 RGB 手动逼近，很难保证色相不漂移。
但它有两个常被忽视的短板。短板一：亮度不是感知亮度。同样是亮度 50%，黄色看起来比蓝色亮得多。按 HSL 明度等差排出的一串"色阶"，视觉上的明暗间隔并不均匀，越靠近两端越显得挤在一起。
短板二：HSL 插值会走色相环的短路径，可能穿过完全无关的色相。从红色 #FF0000 渐变到蓝色 #0000FF：在 RGB 空间直接取中点得到 #800080，是偏暗的紫色，亮度约 0.0615；在 HSL 空间取中点得到 hsl(300,100%,50%)，即 #FF00FF，是极亮的洋红，亮度约 0.2848。原因是色相环上从 0° 到 240° 的短路径是往回走 120°，中点是 300°。两个中点的亮度差了四倍以上，与"红蓝各半"的直觉都不吻合。现代浏览器已经开始支持在 OKLab / OKLCH 空间做渐变插值，能得到感知更均匀的过渡，是否可用取决于你的目标浏览器范围。
四、六种模型的适用场景与常见误用
| 模型 | 描述什么 | 典型使用场景 | 常见误用 |
|---|---|---|---|
| HEX | RGB 的十六进制写法 | CSS 声明、设计稿标注、设计令牌 | 把八位写法当成"更精确的六位"，忽略末两位其实是透明度 |
| RGB / rgba | 设备发光三通道加透明度 | Canvas 与图形接口、需要逐通道计算时 | 给三个通道等量加减来实现"变亮"，导致色相偏移 |
| HSL | 色相、饱和度、亮度 | 生成同色系深浅阶、调整主题色 | 把 HSL 亮度当成感知亮度，排出的梯度看起来不均匀 |
| HSV / HSB | 色相、饱和度、明度 | Photoshop 拾色器、色板选色 | 把 HSV 的明度与 CSS 的亮度混为一谈，直接照抄数值 |
| CMYK | 印刷油墨配比 | 印刷品、包装、需要约定纸张与油墨时 | 把屏幕色值直接交给印厂，不指定色彩配置与色域 |
| Lab / OKLCH | 感知均匀的颜色空间 | 配色算法、渐变插值、无障碍色阶 | 把 L 的数值当成百分比写进 hsl()，两套语法并不通用 |
选型可以压缩成三句话：交付给浏览器与设计稿的静态值用 HEX；需要程序化生成深浅变化用 HSL；需要跨设备、跨介质保持一致时，先确认色彩空间是 sRGB 还是 Display P3、素材有没有 ICC 配置，再谈具体色值。
五、三个可以复算的算例
算例一：把屏幕上的一个橙色写成四种形式。取色得到 #FF6B35，拆成 FF、6B、35 三段，分别转十进制得 255、107、53，所以 RGB 写法是 rgb(255,107,53)。按 HSL 换算：最大通道与最小通道之和 (255+53) ÷ 2 ÷ 255 ≈ 60.4%，是亮度；色相落在 16° 附近，饱和度 100%，即 hsl(16,100%,60%)。如果要让它半透明，加上 alpha 得到 #FF6B3580。四种写法描述的是同一个颜色，不存在哪种更准。
算例二：同一个橙色在白底和黑底上能不能当正文色。按 WCAG 的相对亮度公式，#FF6B35 的亮度约为 0.3203。与白色（亮度为 1）相比，对比度 = (1+0.05) ÷ (0.3203+0.05) ≈ 2.84:1；与黑色相比 = (0.3203+0.05) ÷ (0+0.05) ≈ 7.41:1。结论很明确：这个橙在白底上连 4.5:1 的一半都不到，只能用于大号标题或图形；换到深色背景上则轻松达标。同一个色值，合规性完全由背景决定。
算例三：把品牌蓝压到合规区间。选中 #4A90D9 做主按钮色，它在白底上的对比度只有 3.34:1，正文压上去不达标。保持色相不变、只降明度：压到 #3576B8 时对比度升到 4.74:1，继续压到 #2F6FB0 是 5.22:1。前者刚好跨过 4.5:1 的门槛，后者留出了余量，两个都是可以写进设计令牌的候选值。这些数字都可以用颜色对比度检查器直接复核。
六、对比度是怎么算出来的：从色值到 WCAG 阈值
WCAG 的对比度不是"看起来差多少"，而是一个可以复算的比值：先把 sRGB 的三个通道做线性化处理，再按 0.2126、0.7152、0.0722 的权重加权，得到相对亮度；最后代入 (L1+0.05) ÷ (L2+0.05)，其中 L1 取较亮的一方。因为是比值，它的上限是 21:1（纯白对纯黑），下限是 1:1（同色）。
阈值方面，正文文本要求 4.5:1，大号文本（约 24px 常规，或 18.66px 加粗以上）与界面图形元素要求 3:1。下表是几个中性灰的实测值：
| 颜色 | 相对亮度 | 白底对比度 | 黑底对比度 | 结论 |
|---|---|---|---|---|
| #000000 | 0.0000 | 21.00:1 | 1.00:1 | 白底对比度的理论上限，黑底上不可见 |
| #757575 | 0.1779 | 4.61:1 | 4.56:1 | 少见的两种背景都能过 4.5:1 的灰 |
| #777777 | 0.1845 | 4.48:1 | 4.69:1 | 白底差一点点，正式文本不合格 |
| #949494 | 0.2961 | 3.03:1 | 6.92:1 | 只能用于大号文本、图标与装饰元素 |
这张表解释了为什么"浅灰字"是最常见的无障碍问题：从 #757575 往浅走一步到 #777777，比值就从 4.61 掉到 4.48，肉眼几乎看不出差别，合规结论却已经翻转。更危险的是占位符、说明文字、禁用态这类"看起来次要"的文本，它们往往正是用 3:1 上下的灰写成的。定稿时把这类灰固定在 #757575 或更深的位置，比在临界点附近反复微调要省事得多。
七、设计令牌、语义命名与暗色模式
把色值直接写进组件，短期最快，长期一定会失控：同一个蓝色在十几个文件里有四种写法，换品牌色时只能全局搜索替换。更稳的做法是两层命名——原始色板（--blue-500、--orange-600）与语义令牌（--color-primary、--color-success、--color-danger、--color-text-muted）。组件只引用语义令牌，换肤与主题切换都只改一层映射关系。
暗色模式最容易做错的一步是"把颜色取反"。取反得到的是补色，色相已经变了，不是暗色主题。正确做法是按角色重新取值，让每个语义令牌在两种主题下各有一组色值，并逐个验证对比度。
| 语义令牌 | 亮色取值 | 暗色取值 | 照搬会怎样 |
|---|---|---|---|
| 主色 / 链接（蓝） | #1D4ED8，白底 6.70:1 | #0A84FF，在 #121212 上 5.14:1 | 把 #1D4ED8 搬进暗色主题，对比度只剩 2.80:1 |
| 危险色（错误提示） | #B91C1C，白底 6.47:1 | #FF453A，在 #121212 上 5.50:1 | 深红在深灰背景上糊成一片，只剩 2.90:1 |
| 分隔线 / 遮罩 | #0000001A 叠白底得 #E5E5E5 | #FFFFFF1F 叠 #121212 得 #2F2F2F | 沿用同一个透明度，深色底上的分隔线会显得又亮又脏 |
第三行值得单独说：半透明遮罩的观感取决于底色，所以透明度值必须跟着主题换。把 #0000001A（alpha 约 10.2%）从亮色主题照搬到暗色主题，得到的是一条比背景亮得多的线，看上去像一块污渍，而不像分隔线。
八、设计稿与实现不一致的五种成因
取到的色值和设计稿标注完全一致，上线后却总觉得"不对"。以下五种成因覆盖了绝大多数情况，按出现频率排列。
成因一：色彩配置文件不同。同一张图，带 Display P3 配置导出的版本会比 sRGB 版本更鲜艳；浏览器读到配置就做色彩管理，读不到就按 sRGB 硬解。标注值是准的，代码也是对的，但颜色确实被"放大"了。
成因二：截图工具做了一次色彩转换。从广色域屏幕截图时，有的工具按显示配置输出，有的会转回 sRGB。这就是"我从设计稿截图取色，取到的值和标注值不一样"的原因——不是取色器不准，而是截图这一环节已经改过颜色。
成因三：有损格式带来的色偏。JPEG 在高对比边缘与渐变色带上会引入噪点，从一张 JPEG 上取到的色值可能比原图偏出一两个色阶。要取标准色，优先从 PNG 或 WebP 原图取样，格式取舍可以对照图片格式转换指南。
成因四：alpha 合成。把 50% 透明的前景色叠在卡片背景上，最终颜色由两层共同决定。如果背景本身是渐变，同一个按钮在不同位置的颜色都不一样——这时应该把按钮改成不透明色，或者把背景收敛为纯色。
成因五：显示器本身的偏差。未校色的屏幕在色温与伽马上偏差明显，同一份代码在两台机器上能差出好几个色阶。这不是代码问题，却足以让"对色"变成鸡同鸭讲。涉及品牌交付时，应当以校色后的屏幕或印刷打样为准。
九、常见问题（FAQ）
- 同一个颜色，为什么我记录的色值和设计师给的不一样？
- 先确认是不是八位写法：
#FF6B35与#FF6B3580在屏幕上就是两种观感，后者叠白底约等于#FFB59A。如果两者都是六位，再分辨来源是设计稿标注值还是截图取色值——广色域屏幕上的截图常被工具做过一次色彩转换。 - HSL 的亮度和 HSV 的明度为什么不一样？
- 因为定义不同。HSL 的亮度 100% 是纯白、0% 是纯黑，饱和色大致落在 50% 附近；HSV 的明度 100% 就是饱和色本身，往下降才变暗。所以 Photoshop 拾色器里"最亮最艳"的颜色，写成 HSL 大约在亮度 50% 左右。
- 在 RGB 里给三个通道同时加 20，为什么颜色会偏？
- 因为三个通道对感知亮度的权重并不相等：绿色 0.7152、红色 0.2126、蓝色 0.0722，绿色是蓝色的近 10 倍。等量加值对蓝色的提亮效果远不如绿色，整体色相就会朝黄绿方向漂移。要保着色相变亮，改用 HSL 调亮度，或在 OKLCH 里只动 L。
- 暗色模式可以直接把颜色取反吗？
- 不可以。取反得到的是补色，色相已经改变。正确做法是给每个语义令牌准备暗色取值并逐项验证对比度：亮色主题下的
#1D4ED8在白底是 6.70:1，直接搬到#121212上只剩 2.80:1，必须换成更亮的蓝。 - 为什么 4.5:1 这个门槛总是"差一点点"过不去？
- 因为对比度在中灰附近变化最快。
#757575在白底是 4.61:1，往浅一点到#777777就掉到 4.48:1，两个颜色的视觉差异几乎看不出来，合规结论却相反。把这类灰固定在#757575或更深，比在临界点附近反复试探更可靠。
十、四个常见误区
误区一：色值相同，颜色就相同。色值只描述数值，还要看色彩空间与色彩配置。带 Display P3 配置的图与不带配置的同一组数值，在支持色彩管理的浏览器里会被渲染成两种颜色。
误区二：取色器取到的就是"设计稿的真实颜色"。取色器取的是当前这一帧像素的数值，而这一帧可能已经过系统色彩管理、截图工具转换，甚至屏幕缩放插值。要复刻品牌色，最可靠的做法始终是拿到官方色值，取色只用来核对。
误区三：颜色越多越专业。一套界面配色通常一个主色、一个辅助色加一组中性灰就够用。每多一个未经令牌化的色值，就多一处换肤时的漏网之鱼。
误区四：对比度达标就等于好看。4.5:1 是可读性的底线，不是美学的上限。刚好卡线的配色往往显得生硬，把正文色压到 7:1 以上、把浅色留给装饰性元素，通常既安全又耐看。