RGB色差源于色彩空间不一致：设计稿未设sRGB、截图取色保留原始空间、隐式语法（如#RRGGBB或rgb()）被浏览器按不同策略解析，导致同一数值在Safari（P3）、Chrome（sRGB）等环境呈现不同物理色。
RGB颜色复制后出现色差，不是复制动作本身出错，而是复制来源的数值被不同环境按不同色彩空间解释所致——rgb(255, 99, 71)在Safari里可能走Display P3，在Chrome里守sRGB，结果根本不是同一个物理色。
复制来源是否携带色彩空间元数据？
设计稿（如Figma）若未设为sRGB工作空间，导出的#FF6347实际可能隐含Display P3元数据；截图取色、浏览器开发者工具“复制颜色”时，部分工具会保留原始上下文空间信息，粘贴到CSS后仍被浏览器按原空间解析。这种“干净复制”反而埋下色差隐患。
- Figma中务必进入 Preferences → Color profile → 设为 sRGB，右下角显示
sRGB才生效 - 禁用截图取色：用右键色块 →
Copy as CSS，而非吸管工具截屏后取 - DevTools里复制的颜色值（如
rgb(255, 99, 71)）是计算后值，但不保证空间一致；它可能来自P3图层叠加后的sRGB转换结果
粘贴后是否用了隐式语法？
把#FF6B6B直接粘进CSS，等于交由浏览器“猜”空间——这是色差最大源头。现代浏览器对十六进制和rgb()函数的默认解释策略已分化：Chrome倾向sRGB，Safari（尤其macOS）倾向P3映射，Firefox插值gamma略有差异。
- ✅ 正确做法：粘贴后立刻转成显式sRGB声明：
color: #FF6B6B; color: color(srgb 1 0.4196 0.4196); - ⚠️ 避免只写
rgb(255, 99, 71)：虽语法合法，但仍是隐式sRGB，不强制渲染管线 - ❌ 别用
hsl(12, 100%, 64%)替代：HSL在Chrome/Firefox插值路径不同，hsl(359.9, 100%, 50%)在Chrome里可能直接截断为纯红
复制链路中是否混入了透明度或滤镜？
看似复制的是文字颜色，实际可能是半透背景叠加后的合成色；或是父元素有filter: brightness(0.95)，导致DevTools显示的rgb()值已是处理后结果。复制这个值再用，等于把“视觉效果”当“原始定义”。
立即学习“前端免费学习笔记（深入）”；
- 在DevTools的 Computed 面板查
color最终值，同时展开filter、backdrop-filter、opacity确认是否参与计算 - 检查是否有
color-scheme: dark触发浏览器自动对比度补偿（Chrome对深色模式下文字会微调亮度） - Canvas绘图中复制
ctx.fillStyle值需注意：canvas.width与canvas.style.width不一致时，缩放抗锯齿会混入灰阶，#4A90E2可能变成#4c92e4
真正可控的只有源头声明：设计稿锁定sRGB、导出嵌入profile、CSS用color(srgb)显式锚定、降级用#RRGGBB兜底。其余环节——系统夜览模式、显示器固件、OLED像素老化——没法靠CSS修复，只能接受它们存在。
