From 2ce8865622a85628aee74436e014c9dbd47b8a59 Mon Sep 17 00:00:00 2001 From: Hoarfroster Date: Fri, 30 Aug 2024 19:26:49 +0800 Subject: [PATCH] feat: improvements and synchorize --- files/zh-cn/glossary/color_space/index.md | 101 +++++++++++++++------- 1 file changed, 70 insertions(+), 31 deletions(-) diff --git a/files/zh-cn/glossary/color_space/index.md b/files/zh-cn/glossary/color_space/index.md index a89e9e9604195b..60da6d940e590e 100644 --- a/files/zh-cn/glossary/color_space/index.md +++ b/files/zh-cn/glossary/color_space/index.md @@ -2,67 +2,106 @@ title: 色彩空间 slug: Glossary/Color_space l10n: - sourceCommit: 9c922342a2cb1d3a818642a06dc26801710f1eb8 + sourceCommit: 530c1f54e63834411aa38789b1ac82e3831c4dfa --- {{GlossarySidebar}} -**色彩空间**是对色彩的命名组织方式，用于对基于坐标的色彩排列的基础色彩模型。色彩模型定义了颜色的组成部分（例如 [`hwb()`](/zh-CN/docs/Web/CSS/color_value/hwb) 颜色的 `h`、`w` 和 `b` 通道）与色彩空间之间的关系。色彩空间是表示颜色的三维网格，其中每个维度（或轴）对应于不同的通道。一个颜色可以在多个色彩空间中表达，或者从一个色彩空间转换到另一个色彩空间，而看起来仍然一样。 +**色彩空间**是对色彩的命名组织方式，用于对基于坐标的色彩排列的基本色彩模型。色彩模型定义了色彩的组成部分（例如 [`hwb()`](/zh-CN/docs/Web/CSS/color_value/hwb) 色彩的 `h`、`w` 和 `b` 通道）与色彩空间之间的关系。多数色彩空间是表示色彩的三维或四维网格，其中各维度（轴）对应色彩空间中的一个通道。一个色彩可以在保持看起来仍然一样的情况下在多个色彩空间中表达，或者从一个色彩空间转换到另一个色彩空间。 -色彩空间对颜色进行分类和定义。每个色彩空间由数学模型和相关的规则集定义。每个色彩空间都有一个定义好的[色域](/zh-CN/docs/Glossary/Gamut)（它指的是它能表示的特定范围的颜色）。这些规则使得跨不同设备和软件实现一致且可重复的颜色表示成为可能。 +色彩空间对色彩进行分类和定义。每个色彩空间由数学模型和相关的规则集定义。每个色彩空间都有一个定义好的{{glossary("gamut", "色域")}}（它指的是它能表示的特定范围的色彩）。这些规则使得跨不同设备和软件实现一致且可重现的色彩表示成为可能。 -_sRGB_ 色彩空间（标准红绿蓝）是为 Web 创建的，但我们不再局限于这个色彩空间。[CSS 颜色模块 4 级](https://drafts.csswg.org/css-color)指定了几种预定义的色彩空间，而 [CSS 颜色模块 5 级](https://drafts.csswg.org/css-color-5/)则进一步规定了用于定义自定义色彩空间的特性。 +_sRGB_ 色彩空间（标准红绿蓝）是为 Web 创建的，但我们不再局限于这个色彩空间。[CSS 色彩模块 4 级](https://drafts.csswg.org/css-color)指定了几种预定义的色彩空间，而 [CSS 色彩模块 5 级](https://drafts.csswg.org/css-color-5/)则进一步规定了用于定义自定义色彩空间的特性。 -## 命名的颜色空间 +## 命名的色彩空间 -预定义的 [RGB 颜色空间](#rgb_颜色空间)包括 `srgb`、`srgb-linear`、`display-p3`、`a98-rgb`、`prophoto-rgb` 和 `rec2020`。预定义的 [CIELAB 颜色空间](#cielab_color_spaces)包括 `lab-d50` 和 `lab-d65`。预定义的 [XYZ 颜色空间](#xyz_color_spaces)包括 `xyz-d50` 和 `xyz-d65`（以及 `xyz`，作为 `xyz-d65` 的别名）。 +预定义的 [RGB 色彩空间](#rgb_color_spaces)包括 `srgb`、`srgb-linear`、`display-p3`、`a98-rgb`、`prophoto-rgb` 和 `rec2020`。预定义的 [CIELAB 色彩空间](#cielab_color_spaces)包括 `lab-d50` 和 `lab-d65`。预定义的 [XYZ 色彩空间](#xyz_color_spaces)包括 `xyz-d50` 和 `xyz-d65`（以及作为其别名的 `xyz`）。 -颜色空间可以是[矩形或极坐标的](https://ericportis.com/posts/2024/okay-color-spaces/)。矩形颜色空间包括 `srgb`、`srgb-linear`、`display-p3`、`a98-rgb`、`prophoto-rgb`、`rec2020`、`lab`、`oklab`、`xyz-d50` 和 `xyz-d65`（或 `xyz`）。极坐标颜色空间包括 `hsl`、`hwb`、`lch` 和 `oklch`。 +色彩空间可以是[矩形或极坐标的](https://ericportis.com/posts/2024/okay-color-spaces/)。矩形色彩空间包括 `srgb`、`srgb-linear`、`display-p3`、`a98-rgb`、`prophoto-rgb`、`rec2020`、`lab`、`oklab`、`xyz-d50` 和 `xyz-d65`（或 `xyz`）。极坐标色彩空间包括 `hsl`、`hwb`、`lch` 和 `oklch`。 -### RGB 颜色空间 +### RGB 色彩空间 -RGB 是一种颜色模型，将颜色表示为三个基本成分（红色、绿色和蓝色颜色通道）的混合，产生各种色调。sRGB（标准 RGB），是 {{Glossary("RGB")}} 颜色的底层颜色空间。sRGB 旨在成为在互联网和万维网（WWW）上查看图像的通用颜色空间。sRGB 主要用于在计算机屏幕上显示颜色，包括笔记本电脑和智能手机。 +RGB 是一种色彩模型，将色彩表示为三个基本成分（红色、绿色和蓝色色彩通道）的混合，产生各种色调。sRGB（标准 RGB），是 {{Glossary("RGB")}} 色彩的底层色彩空间。sRGB 旨在成为在互联网和万维网（WWW）上查看图像的通用色彩空间。sRGB 现在通常是那些没有标记或没有嵌入色彩档案的默认色彩空间。 -RGB 颜色空间有几种，如 _Adobe RGB_ 颜色空间，它可以表示比 _sRGB_ 颜色空间更广泛的{{glossary("gamut","色域")}}。_sRGB_ 和 _Adobe RGB_（`a98-rgb`）中的坐标是不同的。有很多种方式来描述颜色的 RGB 成分。在 {{Glossary("CSS")}} 中，它们可以表示为十六进制表示法的单个 24 位整数（例如，`#add8e6` 是淡蓝色），或者在 [`rgb()`](/zh-CN/docs/Web/CSS/color_value/rgb) 函数表示法中表示为 0 到 255 之间的三个独立数字（例如，`rgb(46 139.5 87)`）。 +RGB 色彩空间有几种，如可以表示比 _sRGB_ 色彩空间更广泛的{{glossary("gamut", "色域")}}的 _Adobe RGB_ 色彩空间。_sRGB_ 和 _Adobe RGB_（`a98-rgb`）中的坐标是不同的。有很多种方式来描述色彩的 RGB 成分：在 {{Glossary("CSS")}} 中，色彩可以表示为十六进制表示法的单个 24 位整数（如淡蓝色 `#add8e6`），或者在 [`rgb()`](/zh-CN/docs/Web/CSS/color_value/rgb) 函数表示法中表示为 0 到 255 之间的三个独立数字（如，`rgb(46 139.5 87)`）。 -在 sRGB 颜色空间中，CSS `` 值包括 {{cssxref("hex-color", "十六进制颜色")}}、{{cssxref("named-color", "命名颜色")}}、{{cssxref("color_value/rgb", "rgb()")}}、{{cssxref("color_value/hsl", "hsl()")}}（色调、饱和度、亮度）和{{cssxref("color_value/hwb", "hwb()")}}（色调、白度、黑度）。[`color`](/zh-CN/docs/Web/CSS/color_value/color) 函数还支持 还有 `srgb`、`srgb-linear`、`a98-rgb` 和 `prophoto-rgb` 色彩空间。 +在 sRGB 色彩空间中，CSS `` 值包括 {{cssxref("hex-color", "十六进制色彩")}}、{{cssxref("named-color", "命名色彩")}}、{{cssxref("color_value/rgb", "rgb()")}}、{{cssxref("color_value/hsl", "hsl()")}}（色调、饱和度、亮度）和{{cssxref("color_value/hwb", "hwb()")}}（色调、白度、黑度）。[`color`](/zh-CN/docs/Web/CSS/color_value/color) 函数还支持 `srgb`、`srgb-linear`、`a98-rgb` 和 `prophoto-rgb` 色彩空间。 -HSV（色调、饱和度和值）颜色空间及其同义词 HSB（色调、饱和度和亮度）在 CSS 中都用 [`hwb()`](/zh-CN/docs/Web/CSS/color_value/hwb) 表示。命名颜色只是与特定十六进制值相对应的关键字。将这些不同的颜色表示法转换为 `sRGB` 的数学方法是直观的。请注意，{{cssxref("<color>", "currentcolor", "#currentcolor_keyword")}} 可以是任何颜色，它不限于 `sRGB` 色彩空间。 +HSV（色调、饱和度和值）色彩空间及其同义词 HSB（色调、饱和度和亮度）在 CSS 中都用 [`hwb()`](/zh-CN/docs/Web/CSS/color_value/hwb) 表示。命名色彩只是与特定十六进制值相对应的关键字。将这些不同的色彩表示法转换为 `sRGB` 的数学方法是直观的。请注意，{{cssxref("<color>", "currentcolor", "#currentcolor_keyword")}} 可以是任何色彩，而不仅限于 `sRGB` 色彩空间。 + +`rgb` 色彩函数不是可以用于表示 _sRGB_ 色彩空间的唯一色彩函数。圆柱坐标系，如 [`HSL`](/zh-CN/docs/Web/CSS/color_value/hsl)（_色调-饱和度-亮度_）或 [`HWB`](/zh-CN/docs/Web/CSS/color_value/hwb)（_色调-白度-黑度_）色彩模型也用于在 Web 上表示 sRGB 色彩。 + +The `rgb()` color function is not the only color function that can represent the _sRGB_ color space. Cylindrical coordinate systems like the [`HSL`](/en-US/docs/Web/CSS/color_value/hsl) (_hue-saturation-lightness_) or [`HWB`](/en-US/docs/Web/CSS/color_value/hwb) (_hue-whiteness-blackness_) color models are also used to represent a sRGB color on the web. + +- `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` 色彩空间 + + - : **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 色彩空间](#cielab_色彩空间)指定的约 50% 的可见色彩，比其他 RGB 色彩空间包含更多的青绿色调。伽玛内的 `r`、`g` 和 `b` 值范围从 `0` 到 `1`。它的传输曲线是一个伽马函数，不完全地接近于 1/2.2。它的白点为 D65。 + +- `prophoto-rgb` + + - : `prophotoo-rgb` 色彩空间由柯达公司开发，可以表示自然界中可能出现的所有颜色和大约 90% 的 [CIElab 颜色](#cielab_色彩空间)。色域范围的 `r`、`g` 和 `b` 值范围从 `0` 至 `1`。转移曲线是一个伽马函数，值为 1/1.8，其中在黑色附近有一小段线性。它的白点为 D50，与 CIELab 使用的白点相同。 + +- `rec2020` + + - : `rec2020` 是超高清 4k 和 8k 电视的广播行业标准。超宽色域空间能够呈现现实世界中几乎所有可见的颜色，超出了目前大多数显示器的能力。随着显示器的不断改进，预计覆盖范围会逐渐扩大。色域内的 `r`、`g` 和 `b` 值从 `0` 至 `1`。它的白点为 D65。 + +> [!NOTE] +> CSS 规范中没有的其他圆柱形 RGB 空间，如 `HSI`（色调、饱和度和强度）、`Okhsv`、`Okhsl`、`HSLuv`、`HPLuv` 和 `Cubehelix`。 ### CIELAB 色彩空间 -CIELAB（或 CIELab）颜色空间，也称为 L\*a\*b*（简称 Lab*），表示人类可以看到的所有颜色范围。这个颜色空间是由国际照明委员会（CIE）定义的。它将颜色表示为三个值：L\* 表示感知亮度，a\* 和 b\* 表示人类视觉的四种独特颜色：红、绿、蓝和黄。 +CIELAB（或 CIELab）色彩空间，也称为 L\*a\*b*（简称 Lab*），表示人类可以看到的所有色彩范围。这个色彩空间是由国际照明委员会（CIE）定义的。它将色彩表示为三个值：L\* 表示感知亮度，a\* 和 b\* 表示人类视觉的四种独特色彩：红、绿、蓝和黄。 + +Lab 是一个矩形坐标系统，有一个中央的亮度 `L` 轴。`a` 轴上的正值是紫红色，而负值是其补色绿色。`b` 轴上的正值是黄色，负值是蓝色/紫罗兰色。不饱和的色彩具有小的 `a` 和 `b` 值，而绝对值更大的更饱和。 -Lab 是一个矩形坐标系统，有一个中央的亮度 `L` 轴。`a` 轴上的正值是紫红色，而负值是其补色：绿色。`b` 轴上的正值是黄色，负值是蓝色/紫罗兰色。不饱和的颜色具有小的 `a` 和 `b` 值，而绝对值更大的更饱和。 +CIELAB 色彩函数包括 {{CSSXref("color_value/lab", "lab()")}}（亮度、a 轴、b 轴）和 {{CSSXref("color_value/lch", "lch()")}}（亮度、色度、色调），以及 {{CSSXref("color_value/oklab", "oklab()")}}和{{CSSXref("color_value/oklch", "oklch()")}}。三个函数的亮度值是相同的，但是 `lch()` 是一个 `C`（色度）和 `H`（色调）使用极坐标而不是轴的极坐标柱面坐标系统。 -CIELAB 颜色函数包括 {{CSSXref("color_value/lab", "lab()")}}（亮度、a 轴、b 轴）和 {{CSSXref("color_value/lch", "lch()")}}（亮度、色度、色调），以及 {{CSSXref("color_value/oklab", "oklab()")}}和{{CSSXref("color_value/oklch", "oklch()")}}。三个函数的亮度值是相同的，但是 `lch()` 是一个 `C`（色度）和 `H`（色调）使用极坐标而不是轴的极坐标柱面坐标系统。 +> [!NOTE] +> `lch()` 中的色调和亮度与 {{cssxref("color_value/hsl", "hsl()")}} 或其他 sRGB 色彩空间中同名值不同。 -> **备注：** `lch()` 中的色调和亮度与 {{cssxref("color_value/hsl", "hsl()")}} 或其他 sRGB 颜色空间中同名值不同。 +CIELAB 色彩空间，包括 LCH、Oklab 和 Oklch，是设备独立的色彩空间。 -CIELAB 颜色空间，包括 LCH、Oklab 和 Oklch，是设备独立的颜色空间。 +- `lab-d50` 色彩空间 + + - : 将色彩表示为 L 在 0 到 100 范围内，并且 a 和 b 范围在 -125 到 125 之间的色彩空间。a 和 b 轴不受这些范围值的限制，这些值是在与 Display P3 色彩空间相关的百分比输入和输出中使用的参考点。它的白点是 D50。 + +- `lab-d65` 色彩空间 + + - : 除使用 D65 作为白点外，与 `lab-d50` 相同。 + +- `oklab` 色彩空间 -- `lab-d50` 颜色空间 - - : 将颜色表示为 L 在 0 到 100 范围内，并且 a 和 b 范围在 -125 到 125 之间。a 和 b 轴不受这些范围值的限制，这些值是在与 Display P3 颜色空间相关的百分比输入和输出中使用的参考点。白点是 `d65`。 -- `lab-d65` 颜色空间 - - : 除了使用 `d50` 作为白点外，与 `lab-d50` 相同。 -- `oklab` 颜色空间 - : 类似于 `lab-d65`，但 `L` 的范围是 `0` 到 `1`，`a` 和 `b` 的范围是 `-0.4` 到 `0.4`。 ### XYZ 色彩空间 -尽管红、绿和蓝的组合在屏幕上表示颜色效果很好，但 sRGB 并不直接对应于人类感知的颜色。CIEXYZ（或 XYZ）颜色空间是由国际照明委员会（CIE）在 1931 年定义的。它是电磁可见光谱中波长分布与人类视觉中感知颜色之间的第一个定义的定量联系。 +尽管红、绿和蓝的组合在屏幕上表示色彩效果很好，但 sRGB 并不直接对应于人类感知的色彩。CIEXYZ（或 XYZ）色彩空间是由国际照明委员会（CIE）在 1931 年定义的。它是电磁可见光谱中波长分布与人类视觉中感知色彩之间的第一个定义的定量联系。 + +正常视力的人有三种感光锥细胞，它们对不同波长的光的刺激具有峰值的感知。CIE X、Y 和 Z 参数对应于三种感光锥细胞的刺激水平，这原则上描述了每一种色彩。CIEXYZ 色彩空间，具有其三刺激值，包含了所有可见的色彩。 + +- `xyz` 和 `xyz-d65` 色彩空间 -正常视力的人有三种感光锥细胞，它们对不同波长的光的刺激具有峰值的感知。CIE X、Y 和 Z 参数对应于三种感光锥细胞的刺激水平，这原则上描述了每一种颜色。CIEXYZ 颜色空间，具有其三刺激值，包含了所有可见的颜色。 + - : `xyz` 标识符是 `xyz-d65` 色彩空间的同义词。由于色彩空间不限于此范围，因而轴不限于 `0` 到 `1` 的范围；这些值只在定义输入输出的百分比时使用作为参考点。它的白点是 D65。 -- `xyz` 和 `xyz-d65` 颜色空间 - - : `xyz` 标识符是 `xyz-d65` 颜色空间的同义词。由于颜色空间不限于此范围，因而轴不限于 `0` 到 `1` 的范围；这些值只在定义输入输出的百分比时使用作为参考点。白点是 `d65`。 -- `xyz-d50` 颜色空间 - - : 除了使用 `d50` 作为白点外，与 `xyz-d65` 相同。 +- `xyz-d50` 色彩空间 + - : 除使用 `d50` 作为白点外，与 `xyz-d65` 相同。 ## 参见 - {{cssxref("@media/color-gamut", "color-gamut")}} `@media` 功能 - [CSS 数据类型：``](/zh-CN/docs/Web/CSS/color_value) -- [sRGB 颜色空间](https://webstore.iec.ch/publication/6168) -- 维基百科上的 [CIELAB 颜色空间](https://zh.wikipedia.org/wiki/CIELAB色彩空间) -- [Oklab](https://bottosson.github.io/posts/oklab/) 颜色空间 +- [sRGB 色彩空间](https://webstore.iec.ch/en/publication/6168) +- 维基百科上的 [CIELAB 色彩空间](https://zh.wikipedia.org/wiki/CIELAB色彩空间) +- [Oklab](https://bottosson.github.io/posts/oklab/) 色彩空间