最可靠的方式是直接查看 computed 面板中的 rgb() 值，因为浏览器统一将所有颜色计算为 rgb(r, g, b) 或 rgba(r, g, b, a)，而 Styles 面板仅显示原始定义值，不自动转换。
直接看 computed 面板里的 rgb() 值，这是最可靠的方式——浏览器内部统一把所有颜色计算成 rgb(r, g, b) 或 rgba(r, g, b, a)，不会骗你。
为什么 Styles 面板里看不到 RGB？
Styles 面板只显示你写的原始值：可能是 #3498db、blue、hsl(200, 50%, 60%)，甚至 var(--primary)。它不主动展开转换，除非你点开颜色旁的小色块手动切格式。
常见错误是盯着 Styles 面板里那个 #ff6b6b 硬想“R 是多少”，其实没必要猜——getComputedStyle 和 computed 面板底层用的都是同一套解析逻辑，结果就是 rgb(255, 107, 107)。
- 点开 Elements 面板中目标元素，切到右侧的 Computed 标签页
- 在搜索框输入
color或background-color - 找到对应属性，展开后看“Computed value”那一栏，旁边小色块可点击，值本身已是
rgb()格式
点错位置导致取到混合色？
取色器返回的永远是“最终渲染像素值”，不是源码定义值。比如一个 rgba(0, 0, 0, 0.8) 文字叠在 white 背景上，取色器会给你 rgb(51, 51, 51)，而不是原始的透明黑。
立即学习“前端免费学习笔记（深入）”；
- 如果设计稿标的是
#333333，但你从页面取出来是rgb(51, 51, 51)，基本可以确认没混入其他层 - 如果取出来是
rgb(60, 60, 60)，而背景不是纯白或有filter、backdrop-filter，那这个值就不可靠 - 渐变、阴影、SVG 的
fill（尤其内联 SVG）不会出现在 Styles 面板的颜色项里，得去 Elements 面板直接查属性或用截图比对
Chrome/Firefox 取色器格式切换陷阱
长按颜色旁小色块可循环切换 #rrggbb → rgb() → hsl() → hwb()，但 HSL 到 RGB 是非线性映射，hsl(30, 100%, 80%) 转出的 #ffcc99 有四舍五入误差。
- 需要精确复现设计稿时，优先复制原始
#rrggbb或rgb()值，别依赖 HSL 输入反推 - Firefox 需确保
devtools.inspector.colorPicker.enabled在about:config中为true，否则点色块只弹文本框 -
lab()、lch()、color(display-p3 ...)这类新颜色函数，在 Chrome 取色器里会灰显且不可编辑，Firefox 直接不识别
真正难的不是找 RGB 分量，而是判断这个 RGB 是不是你该信的那个——它可能来自混合、滤镜、继承，甚至跨域图片的像素采样限制。多看一眼 Computed 面板，再扫一眼父级背景和 filter 链，比反复点色块更省时间。
