一、先把几个概念理顺
在使用各种设计软件时，你很快就会发现——“颜色”远远不只是点开一个色板这么简单。新建文件的时候，软件会先问你：用 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 里工作，最直接的几个好处：
- 跨设备观感更稳定： 如果需求方用的是老显示器、你用的是 MacBook Pro，双方看到的颜色偏差相对可控。
- 对开发更友好： 前端同学写 #FF4655，基本就是你导出的那个感觉，不会出现“设计稿超艳，上线一片灰”的情况。
- 对导出更省心： web / 小程序 / 大部分 App 生态，本身就按 sRGB 来渲染。
因此我们可以养成一种习惯，只要设计目标是面向所有人的常规产品界面，优先选择 sRGB 作为文档色彩空间。
接下来，问题来了，既然 sRGB 这么“安全”，那 P3 还存在的意义是什么？
三、P3：高端屏幕的“鲜艳陷阱”
如果将 sRGB 比喻为普通城市的市区范围，那 P3 就像特区扩建版，往特别鲜艳的红、绿方向又长出一圈。
1. 为什么会有 P3
随着 iPhone、iPad、Mac、一些高端安卓机普及，大量设备开始支持宽色域显示。厂商意识到，“既然屏幕本身能显示更多颜色，为什么不让设计师用起来呢？”于是像 Display P3 这样的色域就被推出来，它的特点是：覆盖 sRGB 的同时，在红、橙、黄绿那一侧伸得更远；对照片、插画、渐变等具有更强“艳丽感”和细腻层次。
