一、先把几个概念理顺

在使用各种设计软件时，你很快就会发现——“颜色”远远不只是点开一个色板这么简单。新建文件的时候，软件会先问你：用 sRGB，还是 Display P3？开始正式调色，又会在面板里看到 HSL、HSB、Lab、LCH 等不同模式。再加上“色域、色彩空间、色彩模型”这一大堆术语一起扑过来，如果没有人帮你系统梳理一遍，很难不被这些名词绕晕。所以在正式讲我们本文的5 个主角之前，我们先用一个比喻把大致框架捋清楚，这样便于理解

sketch软件拾色器面板提供多种模式选项

• 色域 / 色彩空间（sRGB、P3）： 像一张“地图边界”，规定“这个设备最多能显示哪些颜色”。 不同色域的差异，就像不同国家的领土边界大小是不一样的。
• 色彩模型（HSL、Lab、LCH）： 是在这张地图上画坐标的方式： 有的用经纬度（偏理性）、有的用方位和距离（偏直觉）。 同一块土地，你可以用不同坐标系统去描述。
• 色值（具体数字）： 就是“这块土地的经度多少、纬度多少”，比如你在 Figma或PS 里看到的 #FF6B00、HSL(20, 100%, 50%)、Lab(60, 38, 60) 都只是“坐标点”。

理解这一点很重要，因为sRGB 或 P3 解决的是“我能显示到哪儿”， HSL / Lab / LCH 解决的是“我怎么描述同一个颜色”。接下来我们就沿着这条主线，从“地图边界”讲到“坐标系统”，把这 5 个模型串成一个完整故事，而不是孤立的知识点。

二、sRGB：网页世界的通用语言

如果把色彩世界比喻为一个国际性的组织，那么sRGB 就是所有屏幕默认约定的官方语言。简单说，sRGB 是一块普通显示器大致都能覆盖的色域，也是浏览器、操作系统默认使用的色彩空间。你在大多数设计软件中新建一个文档，如果不改任何设置，那么十有八九就是 sRGB。

Photoshop的新建文档面板，默认颜色模式为RGB

1.  关键特征

sRGB有两个关键特征

1.1 兼容性极高

绝大多数 Windows 显示器、便宜笔记本、普通安卓机，都大约在 sRGB 附近徘徊。 浏览器、App 默认都把图片当作 sRGB 来解释。

1.2 色域不是最大，但最安全

sRGB 的“领土”不算大，但好处是 你在里面选的颜色，在绝大多数设备上看起来不会差太多。

所以，对一个做产品设计、网页视觉的设计师来说，有一句很朴素但极实用的话：“除非你非常确定要用 P3，否则先老老实实把文件设为 sRGB。”

2. 对设计决策的影响

在 sRGB 里工作，最直接的几个好处：

1. 跨设备观感更稳定： 如果需求方用的是老显示器、你用的是 MacBook Pro，双方看到的颜色偏差相对可控。
2. 对开发更友好： 前端同学写 #FF4655，基本就是你导出的那个感觉，不会出现“设计稿超艳，上线一片灰”的情况。
3. 对导出更省心： web / 小程序 / 大部分 App 生态，本身就按 sRGB 来渲染。

因此我们可以养成一种习惯，只要设计目标是面向所有人的常规产品界面，优先选择 sRGB 作为文档色彩空间。

接下来，问题来了，既然 sRGB 这么“安全”，那 P3 还存在的意义是什么？

三、P3：高端屏幕的“鲜艳陷阱”

如果将 sRGB 比喻为普通城市的市区范围，那 P3 就像特区扩建版，往特别鲜艳的红、绿方向又长出一圈。

1. 为什么会有 P3

随着 iPhone、iPad、Mac、一些高端安卓机普及，大量设备开始支持宽色域显示。厂商意识到，“既然屏幕本身能显示更多颜色，为什么不让设计师用起来呢？”于是像 Display P3 这样的色域就被推出来，它的特点是：覆盖 sRGB 的同时，在红、橙、黄绿那一侧伸得更远；对照片、插画、渐变等具有更强“艳丽感”和细腻层次。

所以，你会看到这种场景，在 P3 屏幕上预览一张 P3 色域的宣传图，你会惊讶到大喊：“哇，这红太迷人了！”而一旦在普通 sRGB 显示器上打开：你会这样吐槽：“怎么变得灰不拉几的？”同一张文件，因为设备色域不一样，导致视觉感受悬殊很大。

2. 什么时候用 P3

P3 不是不能用，而是要谨慎用，以下是适合用 P3 的场景：

1. 面向高端设备的 App 启动页、引导页、大图横幅
2. Apple 生态为主的产品宣传页、品牌官网
3. 影视、游戏等特别强调视觉冲击力的主视觉

而不适合 P3 的场景是：

1. 大众化产品 UI（金融、工具、政务、教育……任何用户设备相差很大的产品）
2. 强调品牌色统一的系统（色彩一旦在不同设备上飘，品牌感就会坍塌）

3. 如何避免褪色

如果你确实希望想借助 P3 的艳丽，但又担心普通设备上“惨不忍睹”，可以用一个比较实用的策略：

• 文件色彩空间可以设为 P3（用于创作主视觉）
• 但在设计中，尽量把“关键信息色”（按钮主色、品牌主色、文案背景）控制在 sRGB 范围内
• 把“超高饱和的 P3 色”只用在点缀和氛围上，比如背景光晕、强对比插画细节
• 定期用工具或插件检查 Out-of-Gamut（超出 sRGB 色域）颜色，看是否会造成普通屏幕上严重失真

这样做，相当于让最重要的内容待在“通用地图”里，把“惊艳部分”交给宽色域设备加分。

讲完 sRGB 和 P3，我们大致知道了“地图边界”这件事。接下来要解决的是另一个问题：在同一块地图上，我到底用什么方式来描述一个颜色点，才能让“调色”和“配色”更舒服？这就是 HSL、Lab、LCH 要解决的部分。

四、HSL：设计师最顺手的“直觉坐标”

大部分 UI 或网页设计师，第一次接触的非 RGB 模型，十有八九就是 HSL（Hue, Saturation, Lightness）。它的魅力在于：把颜色拆成了三个非常直觉的维度：

• H（色相）：是什么色（红、黄、绿、青、蓝、紫……）
• S（饱和度）：有多纯（灰不灰、钝不钝）
• L（亮度）：有多亮（偏黑还是偏白）

你可以把 HSL 想象成一个“颜色工厂的三根滑杆”：

• 向左或右拉 H，是在换一罐油漆
• 上下拉 S，是在往油漆里加灰
• 上下拉 L，是在往油漆里加黑或加白