颜色空间
色彩空间是用于基于坐标的颜色排列的底层颜色模型的命名颜色组织。颜色模型定义了颜色的各个分量(例如,hwb()
颜色的 h
、w
和 b
通道)与色彩空间的关系。大多数色彩空间是三维或四维网格,用于表示颜色。每个维度(或轴)对应一个不同的通道。颜色可以用多种色彩空间表示,并且可以在不改变外观的情况下从一个色彩空间转换为另一个色彩空间。
色彩空间对颜色进行分类和定义特定的颜色范围。每个色彩空间都由一个数学模型和相关的规则集定义。每个色彩空间都有一个定义的色域,指的是它能表示的特定颜色范围。这些规则使得在不同设备和软件之间实现一致且可重现的颜色表示成为可能。
sRGB 色彩空间(标准红、绿、蓝)是为网络创建的,但我们不再局限于此色彩空间。 CSS Color Module Level 4 规定了几个预定义的色彩空间,而 CSS Color Module Level 5 则更进一步,规定了定义自定义色彩空间的特性。
命名色彩空间
预定义的RGB 色彩空间包括 srgb
、srgb-linear
、display-p3
、a98-rgb
、prophoto-rgb
和 rec2020
。预定义的CIELAB 色彩空间包括 lab-d50
和 lab-d65
。预定义的XYZ 色彩空间包括 xyz-d50
和 xyz-d65
(以及 xyz
,它是 xyz-d65
的别名)。
色彩空间分为矩形或极坐标。矩形色彩空间包括 srgb
、srgb-linear
、display-p3
、a98-rgb
、prophoto-rgb
、rec2020
、lab
、oklab
、xyz-d50
和 xyz-d65
(或 xyz
)。极坐标色彩空间包括 hsl
、hwb
、lch
和 oklch
。
RGB 色彩空间
RGB 是一种颜色模型,它将颜色表示为三种底层分量的混合——红色、绿色和蓝色通道——这些分量组合起来可以产生各种色调。sRGB,或称为“标准 RGB”,是RGB颜色的底层色彩空间。sRGB 旨在规范 PC 和Web图像系统的显示规范。对于没有标记颜色配置文件或嵌入颜色配置文件的图像,它通常是默认的色彩空间。
有几种 RGB 色彩空间,例如Adobe RGB 色彩空间,它们比sRGB 色彩空间能够表示更宽的色域。sRGB 和Adobe RGB(a98-rgb
)中的坐标是不同的。有许多方法可以描述颜色的 RGB 分量。在CSS中,它们可以表示为十六进制记法中的单个 24 位整数(例如,#add8e6
是浅蓝色),或在rgb()
函数记法中表示为三个介于 0 和 255 之间的独立数字(例如,rgb(46 139.5 87)
)。
sRGB 色彩空间中的 CSS <color>
值包括 <hex-color>
、<named-color>
、rgb()
、hsl()
(色相、饱和度、亮度)和 hwb()
(色相、白度、黑度)。对于 color()
函数,还有 srgb
、srgb-linear
、a98-rgb
和 prophoto-rgb
色彩空间。
HSV(色相、饱和度和值)色彩空间及其同义词 HSB(色相、饱和度和亮度)在 CSS 中表示为 hwb()
。命名颜色只是映射到特定十六进制值的关键字。将这些各种颜色表示法转换为 sRGB 在数学上是直接的。请注意,currentColor
可以是任何颜色,它不限于 sRGB。
rgb()
颜色函数不是唯一可以表示sRGB 色彩空间的颜色函数。在 Web 上,诸如 HSL
(色相-饱和度-亮度)或 HWB
(色相-白度-黑度)颜色模型之类的圆柱坐标系也用于表示 sRGB 颜色。
srgb
色彩空间-
sRGB 色彩空间,或称“标准 RGB”,是标准 RGB(红、绿、蓝)色彩空间。它被创建用于显示器、打印机和 Web。它是使用最广泛的色彩空间,并得到大多数操作系统、软件程序、显示器和打印机的支持。sRGB 基于
r
、g
和b
,其中处于色域内的值范围从0
到1
。白点是 D65。 srgb-linear
色彩空间-
预定义的线性光 sRGB 色彩空间
srgb-linear
与srgb
相同,只是传输函数是线性光,没有伽马编码。srgb-linear
色彩空间接受三个r
、g
和b
值作为数值参数,其中处于色域内的颜色范围从0
到1
。白点是 D65。 display-p3
色彩空间-
由 Apple 定义的 Display P3 色彩空间结合了 DCI-P3 色域、D65 白点和 sRGB 伽马曲线。它是一个宽色域空间,是当前宽色域显示器的典型代表,比 sRGB 色彩空间能显示更鲜艳的绿色和红色。
display-p3
基于r
、g
和b
,其中处于色域内的值范围从0
到1
。白点是 D65。 a98-rgb
色彩空间-
a98-rgb
是 Adobe® 1998 RGB 色彩空间,旨在将所有 CMYK 颜色表示为 RGB。可以实现 CIELab 色彩空间指定的可见颜色的大约 50%,比其他 RGB 色彩空间包含更多的青绿色调。处于色域内的r
、g
和b
值范围从0
到1
。传输曲线是伽马函数,接近但并非完全等于 1/2.2。白点是 D65。 prophoto-rgb
-
由柯达开发的
prophoto-rgb
色彩空间可以表示自然界中可能出现的所有颜色以及 CIElab 颜色的约 90%。处于色域内的r
、g
和b
值范围从0
到1
。传输曲线是伽马函数,值为 1/1.8,并且在黑色附近有一个小的线性部分。白点是 D50,与 CIELab 使用的白点相同。 rec2020
-
rec2020
是超高清 4k 和 8k 电视的广播行业标准。这个超宽色域空间能够表示几乎所有可见的真实世界颜色,超出了大多数当前显示器的能力。随着显示器技术的进步,预计覆盖范围将随着时间的推移而增加。处于色域内的r
、g
和b
值范围从0
到1
。白点是 D65。
注意: CSS 规范中未包含的其他圆柱形 RGB 颜色空间包括:HSI
(色相、饱和度和强度)、Okhsv
、Okhsl
、HSLuv
、HPLuv
和 Cubehelix
。
CIELAB 色彩空间
CIELAB(或 CIELab)色彩空间,也称为 L*a*b*(或简称 Lab*),表示人类可见的整个颜色范围。该色彩空间由国际照明委员会 (CIE) 定义。它用三个值表示颜色:L* 代表感知亮度,a* 和 b* 代表人类视觉的四种独特颜色:红、绿、蓝和黄。
Lab 是一个矩形坐标系,有一个中心亮度 L
轴。a
轴上的正值是紫红色,负值则是其互补色:绿色。b
轴上的正值是黄色,负值是蓝色/紫色。不饱和颜色在 a
和 b
上有较小的值,绝对值越大则越饱和。
CIELab 颜色函数包括 lab()
(亮度、a 轴、b 轴)和 lch()
(亮度、色度、色相),以及 oklab()
和 oklch()
。亮度值是相同的,但 lch()
和 oklch
是极坐标、圆柱坐标系,使用极坐标 C
(色度)和 H
(色相)而不是轴。
注意: lch()
和 oklch
中的色相和亮度与 hsl()
或其他 sRGB 色彩空间中的同名值不同。
CIELab 色彩空间,包括 Lab、LCH、Oklab 和 OkLCh,是设备无关的色彩空间。
lab-d50
色彩空间-
用
L
表示颜色,范围从0
到100
,a
和b
的范围从-125
到125
。a
和b
轴不受这些范围值的限制,这些值是定义相对于Display P3
色彩空间的百分比输入和输出的参考。白点是 D50。 lab-d65
色彩空间-
此色彩空间与
lab-d50
相同,只是白点是 D65。 oklab
色彩空间-
与
lab-d65
类似,但L
的范围是0
到1
,a
和b
的范围是-0.4
到0.4
。
XYZ 色彩空间
虽然红、绿、蓝的组合在屏幕上表示颜色效果很好,但 sRGB 并不能直接对应人类感知颜色的方式。CIE 1931 XYZ(或简称 XYZ)色彩空间由国际照明委员会 (CIE) 于 1931 年创建,是电磁可见光谱中波长分布与人类视觉中感知颜色之间的第一个量化联系。
具有正常视力的人有三种视锥细胞可以感知光线,其光谱敏感度峰值在不同的波长。CIE 的 X、Y 和 Z 参数对应于三种视锥细胞刺激的水平,这些水平原则上可以描述所有可见颜色。Y
通道代表颜色的亮度。Z
通道反映了颜色中蓝色的含量,但与 RGB 中的 B
不同。X
轴与 XYZ 色彩三维坐标系的 Y 轴和 Z 轴正交。
xyz
和xyz-d65
色彩空间-
xyz
标识符是xyz-d65
色彩空间的同义词。轴不限于0
到1
的范围,因为色彩空间不限于此范围;这些值仅用作定义百分比输入和输出的参考点。白点是 D65。 xyz-d50
色彩空间-
xyz-d50
与xyz-d65
相同,只是它使用 D50 作为白点。
另见
color-gamut
@media
特性- CSS 数据类型:
<color>
- sRGB 色彩空间
- 维基百科上的 CIELAB 色彩空间
- 维基百科上的 CIE 1931 色彩空间
- Oklab 色彩空间