颜色空间
颜色空间是为基于坐标的颜色排列的底层颜色模型命名的颜色组织。颜色模型定义了颜色的组成部分(例如,hwb()
颜色的 h
、w
和 b
通道)如何与颜色空间相关联。大多数颜色空间是三维或四维网格,用于表示颜色。每个维度(或轴)对应于不同的通道。颜色可以用多种颜色空间表达,并且可以从一个颜色空间转换为另一个颜色空间,同时仍然保持相同的视觉效果。
颜色空间对特定范围的颜色进行分类和定义。每个颜色空间都由一个数学模型和相关规则集定义。每个颜色空间都具有定义的 色域,它指的是该颜色空间可以表示的特定颜色范围。这些规则使不同设备和软件之间的颜色表示保持一致性和可重复性。
sRGB 颜色空间(标准红、绿、蓝)是为网页创建的,但我们不再局限于此颜色空间。 CSS 颜色模块级别 4 指定了几个预定义的颜色空间,而 CSS 颜色模块级别 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 颜色空间的颜色函数。圆柱坐标系,例如 HSL
(色调-饱和度-亮度)或 HWB
(色调-白度-黑度)颜色模型也用于在网页上表示 sRGB 颜色。
srgb
颜色空间-
sRGB 颜色空间,或“标准 RGB”,是标准 RGB(红、绿、蓝)颜色空间。它被创建用于显示器、打印机和网页。它是使用最广泛的颜色空间,并且受大多数操作系统、软件程序、显示器和打印机的支持。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
颜色空间可以表示自然界中可能出现的颜色,以及大约 90% 的 CIElab 颜色。色域内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,是与设备无关的颜色空间。
XYZ 颜色空间
虽然红色、绿色和蓝色的组合在表示屏幕颜色方面效果很好,但 sRGB 并不直接对应于人类感知颜色。由国际照明委员会 (CIE) 于 1931 年创建,CIE 1931 XYZ(或简称为 XYZ)颜色空间是第一个定义的将电磁可见光谱中的波长分布与人类视觉中感知的颜色之间进行定量链接。
正常视力的人有三种类型的锥状细胞来感知光线,它们对不同波长的光谱敏感度峰值不同。 CIE X、Y 和 Z 参数对应于三种锥状细胞的刺激水平,原则上,它们描述了每种可见的颜色。Y
通道代表颜色的亮度。Z
通道反映了颜色中蓝色的数量,但与 RGB 中的B
不同。X
轴与 XYZ 颜色 3D 坐标系的 Y 轴和 Z 轴正交。
另请参阅
color-gamut
@media
特性- CSS 数据类型:
<color>
- sRGB 颜色空间
- CIELAB 颜色空间 在维基百科上
- CIE 1931 颜色空间 在维基百科上
- Oklab 颜色空间