Chrome取色器返回的是渲染后颜色而非原始值，需结合Computed面板查源头、注意透明度混合与色彩空间差异，图片取色须规避跨域限制。
Chrome开发者工具自带的取色器能直接从网页上采样像素并输出#rrggbb格式，但设计稿颜色常因渲染叠加、透明度混合或色彩空间差异而“失真”——你看到的#f0f0f0可能根本不是设计师写的原始值。
点击Styles面板小色块启动取色器
打开DevTools（F12或右键→检查），选中目标元素，在右侧Styles面板找到带颜色的CSS属性（如color、background-color）。颜色值旁那个小方块就是入口：点击它，吸管图标出现，鼠标悬停页面任意位置，实时显示该点像素的hex/rgb()/hsl()值。
注意以下几点：
- 长按小色块可循环切换显示格式，不用反复点开再关闭
- 如果元素用的是
rgba(0, 0, 0, 0.8)叠加在白色背景上，取色器返回的是混合后结果（比如#333333），不是原始定义值 - 渐变、阴影、
filter: brightness()等效果也会导致取色器读到的是最终渲染色，而非源码中的色值
用Computed面板查最终生效颜色
有些颜色没写在当前元素的element.style或显式CSS规则里，而是继承或层叠计算得来。这时Styles面板可能压根不显示颜色项。
立即学习“前端免费学习笔记（深入）”；
切换到Computed面板，搜索color或background-color，展开对应属性，能看到最终计算出的值——旁边的小色块同样可点击进入取色器，支持重新采样或复制。
常见陷阱：
-
Computed里的颜色已是浏览器渲染后的结果，无法反推原始hsl()或变量名 - 深色模式下部分UI色块对比度低，取色器小方块难识别，建议临时切回浅色主题再操作
- 若页面启用了
prefers-color-scheme媒体查询，需确认当前匹配的是哪个分支
图片内精准取色要绕过跨域限制
对<img alt="如何在CSS中快速获取设计稿的16进制颜色值_使用Chrome开发者工具取色器" >或background-image里的颜色取样，不能只靠样式面板——因为图片颜色不在CSS声明中。必须用Canvas API提取像素数据，但前提是图片未跨域。
实操要点：
- 本地开发时，把图片放同源服务器下；线上环境确保服务端加了
Access-Control-Allow-Origin: * - 用
ctx.getImageData(x, y, 1, 1).data拿到[r, g, b, a]数组，再手动转成#rrggbb（注意a是0–1浮点数） - Chrome取色器对图片支持有限：只能点开
background-image声明旁的小色块，再拖动吸管到图片区域；Firefox则允许拖出网页取屏任意位置，更灵活
真正麻烦的不是怎么点开取色器，而是判断你拿到的#xxxxxx到底是不是设计师交付的原始值——它可能被opacity稀释过，被mix-blend-mode搅浑过，甚至只是高斯模糊后的一个平均色。别抄完就走，多看一眼Computed里有没有rgba或hsl源头，再核对设计稿标注。
