color(srgb)是目前唯一能稳定跨设备控制颜色解释路径的方式，需将#FF6B6B换算为color(srgb 1 0.4196 0.4196)并前置fallback：color: #FF6B6B; color: color(srgb 1 0.4196 0.4196);设计稿导出必须勾选“转换为sRGB”且嵌入配置文件。
color(srgb) 是目前唯一能稳定跨设备控制颜色解释路径的方式，其他写法（rgb()、#RRGGBB、hsl()）全部隐式绑定 sRGB，但实际是否按 sRGB 渲染，取决于浏览器和系统是否尊重该隐式约定。macOS + Safari 默认把未声明空间的颜色当 display-p3 处理，Windows + Chrome 多数走 sRGB —— 这不是 bug，是规范留白下的行为分歧。
为什么 color(display-p3) 不能用来“适配”广色域屏
它会让 sRGB 屏幕过饱和，且无法优雅降级：color(display-p3 1 0.42 0.22) 在 Dell 或旧 iPad 上会被各浏览器以不同方式近似为 sRGB，结果不可控；Safari 可能渲染得粉艳，Chrome 却可能直接截断或映射失真。
- 必须用
@supports (color: color(display-p3 0 0 0))包裹，且内部提供显式 fallback，例如color: #FF6B6B -
background-color属性对color(display-p3)支持最差，iOS 和部分 Android WebView 会静默降级为 sRGB 输出 - 真要用广色域，优先考虑
background-image: linear-gradient(...)单色渐变，比纯色背景更稳定
如何正确写出可落地的 sRGB 显式声明
关键不是换数值，而是让浏览器明确知道“这个颜色必须在 sRGB 空间里解释”：
- 把十六进制值换算成归一化小数：例如
#FF6B6B→color(srgb 1 0.4196 0.4196)（0xFF / 255 = 1，0x6B / 255 ≈ 0.4196） - 必须前置 fallback：
color: #FF6B6B; color: color(srgb 1 0.4196 0.4196);—— 旧版浏览器忽略第二行，新版优先采用显式声明 - 不要写
color-profile或icc-color：这些不是标准 CSS 属性，所有浏览器都无视
设计与构建环节最容易脱节的三个点
再精准的 color(srgb) 声明，也救不了源头就错的资产。设计师导出切图那一刻，就是色差埋雷的高发时刻：
- Figma / Sketch 导出 PNG/JPEG 时，必须勾选「转换为 sRGB」和「嵌入色彩配置文件」
- Photoshop 文档色彩配置必须设为
sRGB IEC61966-2.1（不是 Display P3，也不是 Adobe RGB） - 用命令行工具验证：
pngcheck -v image.png查看输出中是否有sRGBchunk；不含的话，浏览器可能按默认色域瞎猜
color(srgb) 就成了纸上谈兵。 
