答案是需统一srgb色彩空间并清除隐式覆盖。figma默认使用unmanaged或display p3，而浏览器仅识别srgb，色域不匹配导致Δe＞6、肉眼可见偏色；须在preferences中设为srgb并刷新验证右下角标识，导出时勾选embed color profile，禁用截图粘贴，改用ctrl+shift+k置入，同时排查css中filter、color-scheme等隐藏覆盖及canvas缩放混色问题。
颜色偏差不是“设计没调准”或“前端写错了”，而是 sRGB 色彩空间未对齐 + 隐式覆盖未清除导致的链路断裂。只要校准源头和导出环节，#1890FF 就真能渲染成 #1890FF。
确认Figma画布是否运行在sRGB色彩空间
Figma默认可能用 Unmanaged 或 Display P3，而浏览器只认 sRGB。数值相同、色域不同，ΔE 轻松超 6 —— 肉眼可见偏灰、偏青或发白。
- 打开
Figma → Preferences → Color profile，强制设为sRGB - 改完后刷新文件，右下角状态栏必须显示
sRGB字样（不是“P3”或空白） - 如果团队共用文件，需每人单独设置；该配置不随文件同步
导出时必须嵌入sRGB配置文件
即使画布是sRGB，导出PNG/JPEG时不嵌入profile，图片就变成“裸值”，被系统按默认空间解释 —— macOS Finder、微信、某些CDN都会二次转码，颜色进一步漂移。
- 选中图层 → 右侧检查器点击
+ Add export - 格式选
PNG或JPEG，务必勾选Embed color profile - 若选项不出现，先安装插件
Export PNG with Color Profile - 避免用截图、复制粘贴方式传图，一律用
Ctrl+Shift+K置入导出图
排查CSS中隐藏的颜色覆盖
开发者看到的 color: #333 不一定是最终生效值。浏览器会叠加 filter、backdrop-filter、color-scheme 补偿、甚至 canvas 缩放抗锯齿，让颜色“看起来不对”。
- 在 DevTools 的
Computed面板里查最终color值，别只看Styles里写的那行 - 检查是否有
filter: brightness(0.95)或backdrop-filter: blur(1px)暗中提亮/压暗 - 深色模式下，
color-scheme: dark可能触发 Chrome 自动调整文字对比度 - Canvas 中用
fillStyle = '#4A90E2'时，确保canvas.width和canvas.style.width一致，否则拉伸会混入灰阶像素
验证设计稿原始HEX值是否“干净”
设计师给的 #000000 很可能来自被混合模式（如 Multiply）干扰的图层，或是取色器从缩放后的预览图里吸的 —— 这些都不是真实输出值。
- 在 Figma 中右键目标色块 →
Copy as CSS，直接获取原始 HEX - 避开截图取色：截图受DPR、缩放、抗锯齿影响，
#000000可能变成#0a0a0a - 检查该图层是否嵌套在有
Opacity或Blend mode的父容器内，这些不参与导出，但影响视觉判断 - 文字颜色要结合背景色验证对比度，
#333在白色背景上是灰黑，不是纯黑
真正难的不是操作步骤，而是所有人——设计师、前端、QA——在同一台设备上用同一套 sRGB 标准校验颜色。一旦有人开着 Display P3 预览、有人关着嵌入 profile 导出、有人靠肉眼比对截图，链路就断了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
