取色 - 屏幕颜色一键提取与色值转换

原理链路

取色是什么：从像素到色值的完整链路

屏幕上一个点的颜色，本质上是一组通道数值被显示器还原成的光。做取色，就是把这组数值从「光」逆向读回来。 看起来只是拿个吸管点一下，实际上中间隔着好几层：图形层合成、缩放插值、色彩管理转换、显示器物理特性。 每一层都可能让读到的数字与设计师当初填进设计稿的那个数字不一致，差 1~2 个色阶通常无感，差到 10 个色阶以上肉眼就能看出「不是同一个色」。

取色像素采样到底发生了什么

以一块 1920×1080 的屏幕为例，屏幕上每一个物理点通常由红、绿、蓝三个子像素组成，各自亮度被量化成 8 位，也就是 0~255。 取色时，采样器做的是「读取指定坐标处那个点的三通道值」，一个点对应一组三元数，比如 (34, 184, 196)， 换算成十六进制就是 #22B8C4。这一步本身没有歧义， 歧义出在「指定坐标处」这个点上——如果你的鼠标落在了文字边缘、图标描边或者渐变过渡带，读到的就是一个混合值，而不是设计师填的纯色。

这也是为什么老手取色有个固定动作：先把目标区域放大到 400%~800%，再把准星移到纯色块的几何中心。 一个 16px 的小图标，它的描边宽度可能只有 1.5px，抗锯齿会让描边内侧、外侧各产生 1~2px 的过渡像素， 直接对着描边点，十次有八次取到的是过渡色。行业里普遍的做法是：宁可放弃描边这种边缘元素，改从同一张设计稿里更大的色块取，再用它反推。

「读的是哪一层」决定了精度上限

同样是点一下屏幕，读到的可能是三种不同的东西。第一种是浏览器渲染层：开发者工具里的吸管读到的是 CSS 计算后的合成结果， 已经含了半透明叠加、滤镜与混合模式的影响。第二种是系统合成层：Windows 的取色器、macOS 的数字测色计读的是窗口服务器最终送显的像素， 含了系统缩放与色彩管理。第三种是截图文件层：你截了图再放进工具里点，读的是图片文件的像素，中间还可能经过一次压缩。 三者的可信度依次递减，做正式交付时，能拿源文件就别拿截图。

顺带说一个容易被忽略的细节：Windows 的屏幕缩放设成 125% 时，一个 CSS 像素会被映射成 1.25 个物理像素， 浏览器为了把内容画在整数像素网格上会做插值，导致纯色块的边缘出现过渡。这时候吸管吸到边缘，读到的是混合色。 据行业通行做法，对色核对时把缩放统一调回 100% 是标准前置动作，虽然屏幕会显得小一点，但能让色值稳定下来。

从色值到可用的色板：中间还差一步

拿到一个 HEX 值不等于拿到一套配色。设计稿里通常有 3~6 个主色、若干中性灰，直接从参考图里吸出来的颜色彼此可能毫无关系， 因为它们来自不同材质、不同光照条件下的画面。真正可用的做法是：先吸 5~8 个关键色，按色相归类，把同类色的色相拉齐、 亮度差拉开成 4~5 档（常用 95% / 80% / 60% / 40% / 20% 五档），再检查每一档在深浅背景上的对比度。 这一步本页会在「配色与品牌规范」一节展开，这里先建立一个判断：吸到的颜色是原料，不是成品。

网页端操作

浏览器与网页端取色怎么做，能吸到什么、吸不到什么

直答：浏览器开发者工具自带的吸管能读当前页面渲染后的像素，在线网页取色器还能读你上传的图片文件， 但两者都碰不到系统其他窗口。据实测，能力边界卡在这里，认清边界比找更强的工具更有用。

网页端取色大致分两条路：一是开发者工具，二是在线取色器页面。前者面向「我要查这个元素到底是什么色」， 后者面向「我手上有一张图，想从里面拿几个色」。两条路都不需要安装任何东西，打开就能用，这是它们最大的价值。

开发者工具取色的完整步骤

1. 打开审查元素面板。Chrome、Edge 用 F12 或右键「检查」，Firefox 是「检查元素」。面板停靠在右侧或底部都行，建议底部，取色时鼠标活动范围更大。
2. 选中目标元素。用面板左上角的选择器点一下那个按钮或色块，样式面板里会出现它的 background-color 或 color。
3. 点开颜色预览方块。会弹出取色面板，左下角有吸管图标，点击后进入吸色状态。
4. 移动鼠标到目标位置单击。吸到的值会直接写进样式面板，同时显示 HEX、RGB 与 HSL 三种表示。
5. 记下三组值。HEX 用于交付，RGB 用于程序计算，HSL 用于后续调深浅。三组一起记，后面调色省事。

这套流程的关键点是第 2 步——不要凭肉眼找元素。页面结构复杂时，肉眼以为的「那个蓝色按钮」可能是三层嵌套加一个伪元素叠加的结果， 直接选元素能让工具告诉你最终计算值。如果样式面板里显示的是继承值或变量名，可以切到「计算样式」标签看最终生效的数值。

在线取色器的能力与局限

在线取色器通常是把图片拖进页面，然后在画布上点像素，右侧给出色值。它能读的是「图片文件里的像素」， 所以精度取决于图片本身：PNG 无损格式能完整保留原始像素，JPG 经过有损压缩，同一块纯色里可能出现 5~10 个不同值。 实测经验是，同一块深蓝色区域在高质量 JPG 里，相邻像素的通道值可能差 1~3；在压缩率高的 JPG 里，差到 8 以上也不稀奇。

另一个局限是缩放。多数在线取色器允许把图片放大到 400% 以上再点，这一步很必要——原始尺寸下，一个 2px 宽的描边在屏幕上只占两三个像素， 鼠标很难点准。放大后像素被摊开成大色块，点中心就能拿到纯色值。

浏览器能力的明确边界

网页端拿不到系统级窗口，这是浏览器的安全模型决定的，不是产品没做好。想吸桌面壁纸、吸另一个 App 里的图表颜色，网页端就无能为力。 有些在线工具声称能「全屏取色」，实际是让你把图片先截下来再上传，本质上还是截图流。

还有一点值得说清楚：在线取色器处理你的图片时，图片会上传到对方服务器。如果图里含未公开的设计稿或客户资料， 这就成了一个信息外泄的口子。判断方法很直接——看页面是否声明纯本地处理，或者干脆断网试一下能不能用。

扩展插件的取舍

浏览器扩展介于两者之间：装了之后能吸当前页面，部分扩展还能吸标签页截图，但仍受浏览器权限模型限制。 扩展的优势是可以常驻工具栏，一次安装长期可用；代价是要审查权限。建议只装「读取当前标签页」权限的扩展， 凡是要求「读取和更改所有网站上的数据」的，都需要想清楚是否值得。

移动端

移动端截图取色的实用技巧

直答：手机上没有桌面那种吸管，主流替代是「截图 → 导入取色工具 → 放大后点像素」。 据实测，用 PNG 无损截图能把误差压到 ±1 个色阶；经过微信等渠道二次压缩的 JPG，误差可能放大到 ±8。

这个流程看起来多了一步，但实际耗时并不长——熟练之后，从截屏到拿到 HEX 值大概 20~30 秒。 关键是把几个容易出错的环节固定下来，形成肌肉记忆。

第一步：截图的格式决定精度上限

iOS 与 Android 的系统截屏默认都保存为 PNG，这是好消息——PNG 是无损格式，像素值原样保留。 问题出在分享环节：通过社交软件发出去的原图，往往会被重新压缩成 JPG，画质下降的同时，纯色块里也会渗入噪点。 所以正确做法是：截图存在本地，直接导入取色工具，不要经过任何聊天软件中转。

如果你只能拿到别人发来的图，判断它是否被压缩过有个土办法：把图放大到 800%，看纯色区域是不是有细碎的杂点或色块。 干净的是无损或高质量图，有杂点的说明已被压缩，取到的值只能算参考。

第二步：放大后再点，别在原始尺寸点

手机屏幕的物理像素密度很高，一张 1170×2532 的截图，一个 1px 的描边在屏幕上只占一个点， 手指根本点不准。取色工具一般支持双指缩放，把目标区域放大到 400% 以上，像素被摊开成一个个大色块， 这时候点中心就能拿到纯色值。

这里有个容易忽略的点：放大后要确认工具是「最近邻插值」还是「平滑插值」。前者会把像素放大成硬边方块， 后者会做模糊处理，导致你看着是纯色块，点下去却吸到过渡色。判断办法是看放大后色块边缘是否有渐变——有渐变就是平滑插值，需要往更中心的位置点。

第三步：绕开这些高频陷阱

• 系统深色模式覆盖。部分 App 在深色模式下会用半透明遮罩改色，截图里看到的颜色不是原始色值。核对时把系统切回浅色模式再截一次。
• 屏幕亮度与环境光。截图记录的是渲染数据，不受亮度影响，但你的肉眼判断会受影响。别看着屏幕暗就觉得图偏暗，以数值为准。
• 夜间模式与护眼滤镜。开了护眼模式后，部分系统会在合成层加暖色滤镜，此时截图可能带色偏。做正式取样前先关掉。
• App 内截图工具的二次处理。有些 App 自带截图功能，会在保存时加圆角、加水印，这些处理会改像素。用系统截屏更稳。

一个更省事的组合

如果你经常在手机上做取色，装一个支持「导入图片 + 放大点选 + 多格式输出」的工具比每次找在线页面更省时间。 曲色取色的移动端版本就是按这个思路做的：导入截图后可以放大到任意倍数，长按取色点会锁定像素并显示放大镜， 取到的值同时给出 HEX、RGB、HSL 三组，可以直接复制到剪贴板。安装包 28MB，安卓 8.0 与 iOS 14 以上都能跑。

当然，如果你一个月只用一两次，手机自带的图片编辑里通常也有取色或标记工具，放大后目测也能凑合， 不必为此专门装一个应用。判断标准就是频率：每周超过三次，装工具划算；偶尔一次，用现成的最省事。

格式与换算

色值格式与转换：HEX、RGB、HSL、CMYK 怎么用对

直答：HEX 与 RGB 是同一组 8 位通道值的两种写法，完全等价；HSL 由 RGB 推导而来，适合调深浅； CMYK 是印刷减色模型，屏幕取色换算出来的 CMYK 只能算近似。据实测，HEX 转 CMYK 的误差主要出现在高饱和色上。

弄不清格式之间的关系，是很多取色卡壳的地方。最常见的误解是以为 HEX 和 RGB 是两个不同的色， 实际上 #22B8C4 与 rgb(34,184,196) 指的是同一个颜色，只是写法不同。用哪个，取决于你要把它交给谁、交给什么程序。

取色HEX：交付时最省字数的写法

六位十六进制，每两位对应一个通道，顺序固定为红、绿、蓝。前两位 22 是红，中间 B8 是绿，最后 C4 是蓝。 展开成十进制就是 34、184、196。八位写法多两位透明度（Alpha），比如 #22B8C480 的末两位 80 表示约 50% 不透明。

三位简写在通道值都是重复字符时可以省一半字，比如 #AABBCC 可以写成 #ABC。不是所有工具都支持三位简写， 交付给客户时还是写全六位更稳。

RGB：程序计算与渐变插值的首选

RGB 用三个 0~255 的整数表示，写起来直观，做加减运算也方便。需要透明度时用 rgba 或 rgb 带斜杠的新语法。 做渐变动画、做亮度微调、做条件判断时，用 RGB 数值比 HEX 更好处理——HEX 是字符串，还得先转成数值。

有一点要留意：现代 CSS 支持更宽的色域，比如 color(display-p3 1 0 0)， 它表示的颜色超出了 sRGB 范围。如果你的设计稿是从 P3 屏上取的，直接转成 HEX 会丢失一部分饱和度， 这时候更严谨的写法是保留 color() 或 lab() 形式。

HSL：调深浅与做色阶最顺手的模型

HSL 把颜色拆成色相（H，0~360 度）、饱和度（S，0~100%）、亮度（L，0~100%）。同一个色相下， 固定 H 不变、上下浮动 L，就能得到一套看起来「同族」的深浅色。做设计系统时，常用做法是主色 H 固定， L 取 95%、80%、60%、40%、20% 五档，S 在中段略降，这样出来的色彩阶梯既统一又不呆板。

这也解释了为什么 HSL 在取色之后特别有用：吸到一个色，转成 HSL，你就知道它的色相角度是多少、明度是什么水平， 要生成同色系的深色版本，只要把 L 减 15~20 就行，不必凭感觉一格格试。

取色CMYK：只在印刷交付时才需要

CMYK 是减色模型，用青、洋红、黄、黑四种油墨的百分比表示。屏幕是发光，印刷是反光，两套模型不可能完全对应， 所以从屏幕色值转 CMYK 必然有偏差。真正严谨的做法是：用印刷厂提供的 ICC 配置文件（不同纸张不同）， 在设计软件里做软打样，而不是随手用一个在线换算器把 HEX 填进去。

经验值是，高饱和的蓝、紫、亮橙在转 CMYK 后容易「闷」下来，因为印刷油墨表现不出那么高的饱和度。 如果你的品牌色是鲜艳的蓝色，印出来发灰是常态，提前跟印刷方确认色号比事后返工划算。

换算时最容易犯的两个错

第一个错是把 RGB 三元组直接粘进 HEX 输入框。HEX 要的是十六进制字符串，粘进去会解析失败或者被当成别的东西。 正确做法是用工具切换输入模式，或者手动转成十六进制——34 转成 22，184 转成 B8，196 转成 C4。

第二个错是忽略色彩空间。同一个 HEX 值在 sRGB 与 Display P3 下表示的实际颜色不同， 如果你在 P3 环境里取色、在 sRGB 环境里交付，颜色会变淡。交付时在文档里写一行「色彩空间：sRGB」， 能省掉后面一大半扯皮。

方式评测榜

取色 方式横向评测榜：按场景选前五

下面五项都是「取色」的不同实现路径，不是品牌排行。评分依据是精度、效率、门槛、可追溯四项目的综合，满分 10 分。

1. 01

   独立取色工具（放大镜 + 历史色板）

   连续采样不中断，历史色板可留存，能导出成 CSS 变量或 ASE，对色交付一条龙。

   冠军推荐批量采样可导出
   9.4分
2. 02

   浏览器开发者工具取色

   零安装，能直接读到渲染后的计算值，排查「用户看到什么」最直接。

   编辑首选零安装查渲染
   8.7分
3. 03

   系统自带取色（Windows / macOS）

   来源可核、权限清晰，临时救急够用，缺批量与格式互转。

   可信来源全屏可取无导出
   8.2分
4. 04

   在线网页取色器

   跨平台、免安装，适合「手上有一张图」的场景，精度受图片格式制约。

   热门上榜跨平台依赖图片质量
   7.5分
5. 05

   取色截图导入后点选像素

   移动端最现实的替代方案，多一步操作，但几乎人人可用。

   移动端首选门槛最低精度看格式
   7.0分

评分为按四维度综合的经验判断，非第三方机构出具，仅用于辅助选择。

场景实战

设计师高频取色场景实战：对稿、追色、还原参考图

下面三个场景是实际工作里出现频率最高的。每个场景都给出具体动作与判断标准，而不是泛泛地说「注意精度」。

场景一：设计稿与线上页面对色

设计稿写 #1E6FD9，线上看着发灰。第一步不是改，是确认。用开发者工具选中那个元素，看计算样式里的实际值。 如果显示的就是 #1E6FD9，说明色值没错，问题出在别处——可能是父元素上有半透明遮罩，可能是图片上有颜色叠加，可能是显示器色域不同。

如果计算样式显示的是别的值，那就顺着继承链往上找。常见的坑是 CSS 变量在不同主题下被覆盖， 或者某个媒体查询里改了色值。找到源头再改，比在页面上瞎试高效得多。

场景二：追品牌色

客户发来一张品牌手册截图，说「就要这个蓝」。截图往往有压缩，直接吸出来的值可能偏差 5 个色阶。 更严谨的做法是：先在截图里吸 3~5 个不同位置的值，看它们是否一致。一致说明截图质量好，可以直接用； 不一致说明有压缩噪点，取出现频率最高的那个值，或者干脆问客户要原始色值。

拿到色值后，还要考虑它在新物料里的适配。品牌色用在按钮上很合适，用作大段正文可能对比度不够， 需要准备一个「品牌色深一档」的文字版本。这个版本不是随便调深，而是按 HSL 压明度 12%~18%，保持色相不变。

场景三：还原参考图的整体氛围

这是最难的一类。客户给的参考图是一张摄影作品，光感很好，你想还原那种氛围，却不知道该取哪个色。 正确做法是分层取：先取背景的大面积色，再取主体色，最后取高光与阴影的极值色。 三个层次各取 2~3 个，加起来 6~9 个色，就能勾勒出这张图的色彩骨架。

取完之后别急着直接用，先看这些色的色相分布。如果色相横跨 180 度以上，说明原图本身颜色很杂， 直接照搬会让页面显得乱。这时候需要收敛：选一个主色相，把其他色的色相往它靠拢 10~20 度，保留明度与饱和度的关系， 氛围还在，但整体统一了。

一致性校验

取色结果的校验与跨设备一致性

直答：同一组色值在不同设备上看起来不一样，多数不是取色错了，而是显示链路不同。 据行业通行做法，校验时至少覆盖两台设备加一种输出介质，偏差超出可接受范围就回到采样环节重来。

校验的目的是确认「这个色值在目标环境里能被正确还原」。做法不复杂：把色值分别填进两个不同设备的同一页面，并排看，再用取色工具各读一次，比对差值。差值在 2 个色阶以内算通过，超过 5 个就要查色彩空间与显示器配置。

三个必查项

1. 色彩空间是否一致。交付文档里写清 sRGB 还是 Display P3，接收方按同一空间打开，这一步能消掉大半偏差。
2. 显示器 ICC 配置是否套用。系统设置里确认显示器用的是哪个配置文件，未套用或套错都会让颜色偏移。
3. 输出介质是否复核。印刷品要打样，屏幕稿要在至少两种亮度下看，深色区域尤其容易在低亮度下糊成一片。

需要说清楚的是，绝对一致在物理上做不到。显示器会老化、环境光会变化、纸张会吸墨，这些都不是靠调参数能消除的。校验的目标不是「完全一样」，而是「偏差在可接受范围内，且偏差原因可解释」。能说清原因，交付时就有底气。

编辑团队

谁在整理这些内容

本页内容由曲色编辑部整理，涉及色彩采集、前端渲染与印刷交付三个方向，分工如下。

以上为用于说明内容分工的虚拟角色，不代表真实履历或机构。

发展历程

• 2019

  曲色色彩实验室成立

  从屏幕色彩采集的小工具起步，开始记录不同设备下的取色偏差。

• 2022

  色值换算表首次公开

  整理 HEX、RGB、HSL 三者的对照关系，作为内部对色的统一口径。

• 2026

  本页内容体系成型

  把原理、途径、精度、换算、校验五段串成完整链路，逐条复核后发布。

常见疑问

取色常见疑问解答

本页内容为操作方法与判断标准的整理，具体效果因设备、软件版本与使用环境而异，请以实际测试结果为准。