status
type
category
tags
slug
date
summary
icon
色彩模型
在现实世界里，我们眼睛看到的颜色，是无数种不同波长的光混合在一起的结果。但在计算机的世界里，颜色是需要用数字来表示的。于是，人们发明了多种不同的 “描述方式” —— 它们就像不同的语言，都能说清楚颜色，只是侧重点不同。
RGB / HEX
RGB 为一种 “加色模型”，通过红（Red）、绿（Green）、蓝（Blue）三原色的叠加生成颜色，这正好对应了显示器等发光设备的工作方式：通过调节三种颜色光的强度来生成各种颜色。
HEX 是 RGB 颜色的另一种表达方式，它把三个 0~255 的数字转成了更简洁的 16 进制形式。
一个完整的色彩空间还需要依赖下面的属性进行定义
色域
Gamut，描述显示设备能够再现的颜色范围。
它通常在色度图上，通过由三原色坐标点连接构成的三角形来表示。色域覆盖面积越大，能显示的颜色就越丰富。为了让显示器达到更广的色域，让三原色的坐标越靠外越好。
但并非无限制地拉到最大范围：
- 技术限制：光源和材料的特性决定了它们能再现的颜色范围
- 物理限制：整个可见光范围内，任何选择的三原色坐标点都无法覆盖人眼能够看到的所有颜色
为了适应不同的应用场景和技术需求，有了下面不同的色域标准：
- sRGB（标准 RGB）：广泛用于互联网、网页设计和消费电子设备，目的是确保大多数设备上的色彩一致性。它覆盖了大多数显示器的常见颜色范围。
- Adobe RGB：适用于专业摄影和印刷，尤其是需要精细色彩控制的场合。它覆盖了比 sRGB 更广的色域，能够显示更多的色彩细节。
- Rec. 709：高清电视（HD）标准，确保电视、电影、视频制作和播放设备之间的色彩一致性。
- Rec. 2020：4K、8K 视频标准的色域，设计时考虑到超高分辨率要求。它比 Rec. 709 更广，但目前只有少数高端显示设备能够实现完整的该色域。
白点
White Point，色域三原色的交汇点，确定了这个色域中的白色是什么样的白。
如果显示器的白偏 “黄”，那么显示出来的所有颜色都会偏 “黄”。如果显示器的白偏 “蓝”，那么显示出来的所有颜色都会偏 “蓝”。只要显示器的「白色不白」，等于所有颜色都没有正确显示出来。
白点的色温（Color Temperature）通常用开尔文（K）来衡量，常见的色温值包括：
- D65（6500K）：最常见的白点，通常称为 “日光白”，它模拟了在中午自然阳光下白色的外观，大多数显示设备的标准都是用它。
伽马值
Gamma，描述显示设备亮度的非线性处理。
人眼对亮度变化的感知并不是均匀的，我们对暗部的细节分辨能力远高于亮部。
- “视觉上感受到的 50% 中灰” 的亮度在 “物理灰阶” 的 18%～21% 位置，即 “物理上的 50% 中灰” 亮于 “视觉感受到的 50% 中灰”。
因此，如果显示器采用线性亮度，暗部的细节就会被压缩，而亮部的细节会过度暴露，这完全不符合人眼的视觉感受，从而让画面看起来不自然。这就需要「伽马矫正」，尽可能缩小亮色调与暗色调之间的灰阶差距。
- ：显示器实际输出的亮度值
- ： 输入的原始亮度值
- ：一个常数，通常为 1（如果没有特别指定），用于进行亮度的调整
- ：伽马指数
伽马值越高，暗部的细节更多地显现。伽马值越低，画面越亮，暗部的细节丢失。Gamma 2.2 是当前大多数显示器的标准推荐值，它平衡了显示设备的物理特性和人眼的视觉感知。
HSB (HSV) / HSL
RGB 的好处是直接面向硬件，计算机处理起来快，但不符合人的直觉。举个例子，当你想将绿色变成浅绿色时，必须同时调整 RGB 模型中三个通道的数值。
因此引入了新模型，用在颜色编辑工具中。
饱和度
Saturation，颜色的强度，通过 0% 到 100% 表示。
CSS 直接支持
hsl() 函数，而不支持 hsb()模型转换
我们在一些颜色编辑组件中可能经常看到下面这个面板，RGB 很难通过一个颜色面板直接手动调节，所以颜色选择器的底层基本是以为 HSB 实现后再进行转换。即一个 RGB 数值，转为 HSV 后，再次转换回 RGB 得到的可能不是同一个数值，而是略有偏差。
RGB → HSV
HSV → RGB
