在数字产品体验设计中，色彩不仅是品牌识别度（Brand Identity）的核心灵魂，更是引导用户视觉焦点、传达交互状态的最直接媒介。然而，在日常产研协作中，几乎所有 UI/UX 设计师与前端工程师都曾遭遇过这样一种令人崩溃的“视觉背叛”：

设计师在高端 MacBook Pro 或 Studio Display 上反复校准了一款极其通透、充满科技感的鲜亮荧光紫（例如高饱和度的品牌色），在 Figma 画布中展现得惊艳无比；然而一旦导出切图发送到企业微信群，或者由前端工程师直接复制代码中的十六进制 HEX 值（如 #7B2CBF）并在普通 Windows 办公本或安卓手机上打开测试页面时，原本灵动的色彩瞬间变得“灰暗、沉闷、发脏”，仿佛蒙上了一层灰雾。

这种视觉灾难的根源并非屏幕硬件故障，也不是渲染引擎的偶然 Bug，而是数字色彩空间（Color Space）的代际割裂与色彩管理（Color Management）流程的缺失。本文将从底层光学物理原理出发，全面剖析 sRGB 与 Display P3 的本质差异，手把手演练 Figma 的色彩空间架构配置，拆解切图导出色偏排查决策树，并打通面向现代 Web 前端 CSS Color Module Level 4（color(display-p3) 与 oklch()）的无损交付流水线。

广色域革命：sRGB 与 Display P3 的本质物理差异

要彻底治愈“色彩失真发灰”，首先必须理清计算机屏幕显示色彩的数学与光学模型。

人类肉眼可见的光谱范围被 CIE 1931 色度图（Chromaticity Diagram）完整定义。任何数字显示设备与色彩标准，本质上都是在这张马蹄形的可见光谱中划定一个属于自己的三角形子集——这个子集所涵盖的色彩范围，即被称为色域（Color Gamut）。

CIE 1931 可见光谱 (人眼极限)
  └── Display P3 广色域 (涵盖约 45.5% 可见光，绿/红/橙色域大幅拓宽)
        └── sRGB 窄色域 (涵盖约 35.9% 可见光，1996 年传统工业标准)

1. sRGB：诞生于 1996 年的传统工业底线

sRGB 由惠普（HP）与微软（Microsoft）于 1996 年联合制定，最初旨在为当时的 CRT 显像管显示器提供统一的色彩描述标准。由于其问世早、硬件实现门槛低，sRGB 迅速成为了整个万维网（World Wide Web）以及早年数字相机的通用默认空间。

然而，sRGB 仅能覆盖人眼可见色彩的约 35.9%。在当下 OLED、Mini-LED 与量子点技术高度成熟的显示时代，sRGB 狭窄的色域空间已无法展现真实自然界中高纯度的深绿、明黄与鲜艳朱红，逐渐演变为制约数字视觉表现力的“工业天花板”。

2. Display P3：移动设备与现代硬件的广色域标配

Display P3 是由 Apple 基于数字电影倡导联盟（DCI, Digital Cinema Initiatives）的 DCI-P3 电影级色域标准演化而来的屏幕色彩空间。它保留了 DCI-P3 极其宽广的色域范围，同时将白点调整为与 sRGB 一致的 D65（6500K 色温），曲线特性曲线（Gamma）亦与 sRGB 对齐。

Display P3 的可用色彩体积比传统 sRGB 宽广了足足 25%。这额外的 25% 色彩主要集中在人类视觉最为敏感的高饱和度绿色、青色、橙色与红色区域。当你在配备 Retina 视网膜屏的 MacBook、iPhone 或 iPad 上浏览界面时，屏幕物理面板原生即运行在 Display P3 空间之下。

3. 色彩空间映射错位：为什么会发灰？

当设计师在一个声明为 Display P3 的画板中选取了一个极高饱和度的色彩（例如 P3 极限绿色）时，计算机内部记录的不仅是三个通道的比例，更是该色彩在 P3 坐标系下的绝对物理位置。

如果该图像被导出为**未嵌入色彩配置文件（Untagged）**的 PNG 文件并置入不支持色彩管理的浏览器或 sRGB 屏幕中，系统会粗暴地将 P3 坐标系下的数值直接当作 sRGB 数值进行解释。由于 sRGB 的绿色原点饱和度远低于 P3，原本张力十足的鲜活色彩就会被强行拉扯并挤压至 sRGB 的低饱和区域，从而在视觉上呈现出不可避免的“泛灰与降级”。

Figma 色彩管理三大核心层级与配置机制

针对跨设备与跨平台的色彩一致性难题，Figma 引入了完整的端到端色彩管理体系。要掌控全局色彩，必须深入理解并正确配置其三大核心层级。

1. 软件全局首选项：Canvas Color Space

Figma 桌面客户端（Desktop App）与 Web 浏览器端均支持配置全局画布渲染空间：

• 桌面客户端配置路径：点击左上角主菜单图标 → Preferences → Color Management。
• 配置选项对比：
  • sRGB：强制将 Figma 的所有图层、画板及视口以 sRGB 标准进行色彩解释与显示。适合目标产品绝大多数用户使用传统低端办公显示器、且团队尚未建立 P3 资产交付机制的保守场景。
  • Display P3：充分释放 Apple 硬件与现代广色域显示器的显色潜能，允许在画布中呈现超高饱和度的渐变与质感。

网页端注意事项

如果你在 Google Chrome 或 Safari 等浏览器中使用 Figma Web 版，浏览器的色彩渲染会受到操作系统显卡色彩配置文件的影响。建议在浏览器地址栏访问 chrome://flags/#force-color-profile 并确保其与操作系统的显示器色彩配置文件保持同步。

2. 文件级独立色彩空间：File Color Space

除了客户端全局偏好，Figma 允许针对单个设计文件单独绑定色彩空间属性：

1. 打开目标设计文件，点击顶部文件名下拉箭头或主菜单。
2. 选择 File → Color space。
3. 在弹出的对话框中，你可以明确将当前文件指派为 sRGB 或 Display P3。

关键分水岭：转换时的两个核心策略： 当你在已有图层的文件中切换色彩空间时，Figma 会给出至关重要的选择：

• Convert to profile（保持视觉一致，调整数值）：Figma 会自动微调图层中的 HEX/RGB 数值，确保在新的色彩空间下，人眼肉眼看到的颜色尽可能与原空间保持绝对一致。
• Assign profile（保持数值不变，调整视觉）：严格锁定所有图层的 HEX/RGB 数值不变，但由于坐标系切换，画面的视觉色彩会发生肉眼可见的微小饱和度跳变。

3. 切图导出策略：Color Profile on Export

在右侧属性栏底部的 Export 导出面板中，展开高级设置（点击导出模块的 ... 菜单），可以针对导出的切图资源单独指定色彩策略：

• Same as canvas（跟随画布当前色彩空间）：若文件为 Display P3 则导出 P3 切图，若为 sRGB 则导出 sRGB 切图。
• sRGB：无论当前画板处于何种广色域模式，导出时均通过色彩管理引擎将像素坐标智能映射压缩为标准 sRGB，并在文件头写入 sRGB ICC 配置文件。这是确保切图在全平台客户端不失真、不发灰的最稳健交付策略。
• Display P3：强制在导出文件中嵌入 Display P3 配置文件，供支持广色域的高端 iOS 原生 App 或特定 Web 端加载。

sRGB 与 Display P3 全维度技术对比

在规划团队设计系统基础色板（Palette）前，必须清晰认识到两种标准的优缺点与适用边界：

评估维度	sRGB 色彩空间	Display P3 广色域空间
覆盖人眼光谱	约 35.9%	约 45.5%（多出约 25% 色彩体积）
硬件原生支持度	接近 100%（全平台、所有千元机与老旧办公屏）	Apple 全系设备标配；高端 Android 旗舰；OLED 电视
视觉色彩表现	色彩中规中矩，极高饱和度红/绿表现受限	极具冲击力，霓虹色、高亮渐变极其绚丽通透
切图文件体积	极小（无或微型 ICC 标签）	略大（通常需要嵌入额外 P3 ICC 配置文件）
传统 CSS 支持度	#RRGGBB、rgb(r, g, b) 原生默认映射	需现代 CSS4 color(display-p3 r g b) 或 oklch()
失真风险	零风险（最低通用公分母）	若目标设备不支持且无降级配置，易出现灰暗降级
推荐适用场景	传统 B 端企业中后台、政企系统、广谱 Web 应用	消费级出海 App、潮流电商、影音游戏娱乐、Apple 生态专属产品

常见色彩失真痛点排查与实战解决方案

在设计系统落地和组件交接过程中，团队经常遇到以下高频疑难杂症：

色彩色偏排查决策树：
发现色彩发灰 / 色差巨大？
  ├─ 是否仅在切图导出后出现？
  │    ├─ YES → 检查 Export 属性中的 Color Profile 是否错选了 Display P3 导致老旧设备未正确解码
  │    │         └─ 解决方案：在导出面板强制指定为 sRGB 导出，规避无色彩管理环境的粗暴解析
  │    └─ NO  → 检查 Figma 全局 Preferences 是否与同事电脑配置不一致
  └─ 是否为前端代码与设计稿取色不一致？
       ├─ YES → 检查 Figma 文件属性是否为 Display P3 但前端直接复制了 sRGB HEX 颜色值
       │         └─ 解决方案：建立带 CSS 广色域媒体查询的 Design Tokens 映射体系
       └─ NO  → 检查测试屏幕本身的色域覆盖率（如低色域 45% NTSC 屏物理无法显示标准 sRGB）

痛点 1：导出 PNG 切图在社交软件或网页展示时严重发灰

• 根因剖析：当前文件运行在 Display P3 色彩空间，设计师导出 PNG 时默认勾选了“Same as canvas”，生成的 PNG 文件内嵌了 P3 色彩标签。许多国内即时通讯软件或图片 CDN 服务在进行无损压缩或生成缩略图时，会野蛮剥离图片头部的 ICC 色彩元数据（Strip Metadata）。一旦丢失 P3 标签，受害图片就会被视作 sRGB 解析，从而引发严重的饱和度丢失。
• 解决实操：
  1. 选中待导出的 Frame 或切图切片。
  2. 在右侧 Export 栏目中，确保格式为 PNG。
  3. 点击高级设置菜单，将 Color profile on export 从默认选项手动覆写为 sRGB。
  4. 重新导出切图，此操作会由 Figma 内置色彩引擎执行高质量色域感知压缩（Perceptual Mapping），在剥离元数据后依然呈现精准色彩。

痛点 2：在 Figma 复制 HEX 颜色给前端，在浏览器渲染出现明显色偏

• 根因剖析：Figma 文件若设置为 Display P3，右侧属性面板中展示的 HEX 值本质上是该颜色在 P3 空间下的分量编码。而传统 CSS 中的 #FF4500 在现代浏览器规范中默认被强制映射在 sRGB 坐标系下。因此前端工程师直接把该 HEX 写进样式表中，实际上是在用 sRGB 显示一个原本为 P3 定义的颜色，造成肉眼可见的色彩偏差。
• 解决实操：
  • 若团队决定全面采用标准 sRGB：直接在 Figma 主菜单中执行 File → Color space → sRGB，并在弹窗中选择 Convert to profile，使数值自动换算为标准的 sRGB HEX。
  • 若团队希望拥抱现代广色域：采用下文详述的 CSS Color 4 标准交付工程化代码。

痛点 3：SVG 矢量导出中的透明度与渐变色在跨浏览器失真

• 根因剖析：SVG 1.1 标准规范对 ICC 颜色配置文件的支持非常薄弱，主流浏览器对 SVG 内部的 P3 标签解析行为极不一致。
• 解决实操：
  • 交付矢量图标与插画时，始终确保图标母库（Icon Library）所在文件的 Color Space 被锁定在 sRGB。
  • 遇到故障可参考 Figma 常见报错与疑难故障诊断手册 中的矢量渲染与内存异常处理章节进行排查。

现代前端工程交付：从 Figma 变量到 CSS Color 4 与 OKLCH

伴随现代浏览器（Chrome 111+、Safari 15+、Firefox 113+）对 CSS Color Module Level 4 的全面支持，产研团队不再需要被迫阉割设计表现力。我们可以利用现代 CSS 技术实现设计资产的无损工程化落地。

1. CSS4 color(display-p3) 原生语法

现代浏览器允许直接声明基于 Display P3 色彩空间的颜色值，其语法采用 0 到 1 之间的浮点数标定：

/* 传统的 sRGB 红色 (受限于狭窄色域) */
.brand-button-legacy {
  background-color: rgb(255, 0, 0);
}

/* 突破色域极限的 Display P3 鲜活高亮红 */
.brand-button-modern {
  background-color: color(display-p3 1 0 0);
}

2. OKLCH：面向未来的感知均匀色彩模型

在构建企业级 Design Tokens 标准规范 时，传统 HSL 模型因存在严重的感知亮度不均匀缺陷（例如在纯黄色与纯蓝色饱和度均为 100% 时，人眼感知到的黄色亮度远高于蓝色）而广受诟病。

OKLCH（Lightness 亮度, Chroma 彩度, Hue 色相） 是目前 Web 领域公认最先进的感知均匀色彩空间，它完美包容了 Display P3 与 Rec.2020 广色域：

:root {
  /* OKLCH 能够无缝表达超出现有 sRGB 范围的高饱和色彩 */
  --color-primary-p3: oklch(0.65 0.28 145);
  --color-primary-fallback: #00c853;
}

3. @media (color-gamut: p3) 优雅渐进增强

在实际生产项目中，工程团队应当兼顾高端广色域屏幕的极致体验与普通办公显示器的稳健兼容：

/* 基础兜底方案：面向全量普通设备的 sRGB 颜色 */
:root {
  --color-brand: #ff3366;
}

/* 渐进增强：仅在检测到当前硬件具备 Display P3 广色域显示能力时激活 */
@media (color-gamut: p3) {
  :root {
    --color-brand: color(display-p3 1 0.18 0.42);
  }
}

.brand-card {
  background-color: var(--color-brand);
  transition: background-color 0.3s ease;
}

在 Figma 研发模式中，工程师可以通过 Figma Dev Mode 深度指南 检视组件的绝对尺寸与样式属性，配合团队封装的 Design Tokens 插件直接导出带广色域媒体查询的声明代码。

企业级色彩管理规范 SOP 与避坑清单

为了杜绝团队因设备差异导致的色彩纷争，建议在团队设计体系中落实以下标准作业程序（SOP）：

1. 源头统领：在设计系统组件库主文件（Design System Main Library）创建之初，团队负责人必须召开产研对齐会，在 创建与管理团队协作规范 中明确界定整套系统的基础 Color Space。对于多数跨端通用业务，建议主库锁定为 sRGB；对于主打高端影音、出海 iOS 原生产品的团队，可选择 Display P3 并配备完备的降级机制。
2. 切图统一规范：所有面向运营渠道、营销邮件与第三方平台的导出资产，在右侧面板一律强制指定 sRGB 导出，杜绝因为平台元数据剥离导致的灰暗色偏。更多移动端和多端交付标准可查阅 UI 设计规范与主流设备尺寸速查表。
3. 禁止口头沟通数值：严禁通过聊天软件直接发送未经上下文绑定的 6 位 HEX 代码。必须通过标准化的组件属性与变量模式进行交付，关于组件变体的系统化架构建议参考 组件与变体高阶指南。
4. 硬件显示器校准：对于涉及印刷品输出或对色彩还原有严苛要求的场景，团队应当定期统一使用专业校色仪对设计师的外部显示器进行 D65 白点与 120 cd/m² 亮度的硬件级校准，从物理层面消除视觉主观分歧。

通过在 Figma 中建立严谨的色彩管理体系，团队不仅能够彻底化解跨端色彩失真的顽疾，更能从容拥抱现代 Web 广色域标准，让产品的每一抹色彩都能在各端用户眼前绽放出生动、精准与鲜活的生命力。