配色与色彩空间入门：从HEX/RGB到Lab、P3与OKLab

“为什么我这台电脑看起来更偏蓝？”、“导出到网页后颜色变了？”——这些问题背后往往是色彩空间与色域管理。下面用我自己的工作流把关键点梳理清楚。

颜色表示与透明度

• 最常用：HEX（#RRGGBB / #RRGGBBAA）与 RGB(A)。
• 透明度：HEX8 的 AA 在末尾；CSS 中可用 rgba() / hsla()；
• 颜色名称：CSS 标准色名方便临时对齐，但不要在最终稿里依赖名字。

工具：

• CSS颜色转换

HSL/HSV/HWB：更贴近“人脑”的调色

• HSL 与 HSV 常用于 UI 调色，便于描述“色相/饱和度/亮度”。
• 但它们不是感知均匀空间，等距变化不一定等感知。

Lab/LCh/OKLab/OKLCh：更接近人眼的感知

• Lab 与 LCh 更适合做“等感知差”的运算，比如生成一组等差的色板；
• OKLab/OKLCh 是较新的感知均匀空间，在现代浏览器支持度越来越好。

设备与色域：sRGB、Display P3、Rec.2020

• 大多数网页默认 sRGB；移动设备与新显示器支持宽色域（P3）。
• 如果你的来源素材在 P3，但输出到仅支持 sRGB 的环境，未做转换就会“掉色”。

导出落地：从设计到网页

• 设计软件中，先确认文档色彩空间（sRGB/P3），导出时目标空间要匹配网页显示；
• 网页端尽量使用 CSS Color Level 4 的新语法（如 color(display-p3 ...)）时，要考虑回退方案；
• 不同浏览器的管理策略有差异，关键页面要做多设备验收。

工具：

• 免费在线PS

我的配色工作流

1. 在颜色转换工具里把设计稿的色值统一到一个基准空间（通常 sRGB）；
2. 建一组基础色板（主色、互补、告警、成功、信息），用 HSL 调整，再用 Lab/OKLab 校验对比度；
3. 在组件库里以 CSS 变量维护色板，暗色/亮色主题共用变量名；
4. 关键页面在 P3 设备上验色，如有差异，提供 P3 版色值并添加回退。

名词卡

• sRGB：标准红绿蓝，网页默认色域；
• Display P3：更宽的色域，红更红、绿更绿；
• Lab/OKLab：接近人眼感知的颜色空间，适合做算法与自动化调色；
• 伽马校正：显示器与色彩系统非线性响应的补偿方法。

只要把“表示法、空间、设备、导出”四件事理顺，配色协作就不再是“看缘分”，而是可复用的流程。

🔗 相关工具

• CSS颜色转换
• 免费在线PS