Chrome开发者工具中点击Styles面板颜色旁小色块启用取色器，悬停页面实时显示hex/rgb/hsl值，长按可循环切换格式；rgba透明度和色彩空间差异会导致与设计稿不一致。
Chrome开发者工具里怎么直接取网页上某个颜色的十六进制值
点开 DevTools（F12 或右键 → 检查），选中目标元素，Styles 面板里找到带颜色的属性（比如 color、background-color），颜色值旁边有个小色块——点击它就能弹出取色器。这时候鼠标悬停在页面任意位置，实时显示该像素的 rgb() 或 hex 值；点击确认后，颜色值会自动替换到 CSS 属性中。
注意：如果颜色是渐变、阴影或通过 filter 叠加出来的，取色器读到的是最终渲染结果，不是原始定义值。此时看到的 #f0f0f0 可能实际来自 rgba(240, 240, 240, 0.9) + 白色背景混合，不能直接抄。
- 取色器默认显示
hex，但长按色块可循环切换为rgb()、hsl()、hwb() - 深色模式下部分 UI 色块对比度低，建议临时切回浅色主题再取
- 某些内联 SVG 的
fill值不会出现在Styles面板，得去Elements面板直接看属性
CSS颜色值复制出来是rgb()或hsl()，怎么一键转成#RRGGBB格式
Chrome 和 Edge 的取色器支持原地转换：点击颜色值旁的小色块，在弹出面板里长按颜色预览区域，就会依次切换格式。松手时停在哪种格式，就以那种格式写入 CSS —— 不用手动计算或查表。
但要注意，rgb(255, 204, 153) 转 #ffcc99 是精确的；而 hsl(30, 100%, 80%) 转成 hex 会有四舍五入误差，因为 HSL 到 RGB 是非线性映射。如果你需要严格复现设计稿标注的 #ffcc99，别依赖 HSL 输入反推，优先用 hex 或 rgb 原始值。
立即学习“前端免费学习笔记（深入）”；
- Firefox 的取色器不支持长按切换，只能手动改写 CSS 值，建议换 Chrome/Edge 处理
-
rgba()中的 alpha 小于 1 时，转 hex 会丢失透明度信息，#ffcc99本质是rgba(255, 204, 153, 1)，无法表达半透 - 如果目标是导出给设计师用的标准色卡，建议复制前先确认是否启用了“显示所有颜色格式”选项（设置 → Preferences → Elements → Show all color formats）
为什么用取色器拿到的颜色和设计稿标注对不上
常见原因是颜色空间不一致：网页默认用 sRGB，而 Sketch/Figma 默认可能设为 Display P3（尤其 macOS 上）。同一个 #ffcc99 在不同色彩配置文件下渲染效果不同，取色器读到的是屏幕实际输出值，不是设计软件里的原始定义值。
另一个干扰项是系统级色彩管理或浏览器缩放。比如 Windows 上开启“增强对比度”辅助功能，或 Chrome 缩放比例不是 100%，都会导致像素采样偏移。
- 验证方式：在无任何缩放（Ctrl+0）、关闭所有系统级色彩滤镜的前提下，用同一张 PNG 设计稿铺满页面，再取色比对
- 若仍不一致，检查网页是否启用了
color-scheme: dark或 CSS 自定义属性动态换肤，此时取色器读的是运行时计算结果，不是源码值 - 高刷屏或 OLED 屏幕存在子像素渲染差异，取色器单点采样可能落在子像素边界，建议放大 200% 后取中心区域多次平均
真正麻烦的不是怎么取，而是搞清你到底要哪个“标准”——是开发实现时该用的原始声明值？还是用户屏幕上真实看到的混合后颜色？这两个答案常常不一样，得先分清场景再动手。
