What is a color space?
什么是色彩空间？

Color is an unreasonably complex topic. Just when you think you've got it figured out, it reveals a whole new layer of complexity that you didn't know existed.
色彩是一个极其复杂的话题。你以为已经完全理解它时，它又会揭示出你从未知晓的全新复杂层次。

This is partly because it doesn't really exist. Sure, there are different wavelengths of light that our eyes perceive as color, but that doesn't mean that color is actually a property of that light - it's a phenomenon of our perception.
这部分的道理在于它实际上并不存在。确实，我们眼睛感知的不同光波长可以被视为色彩，但这并不意味着色彩实际上是那种光的属性——它是一种感知现象。

Digital color is about trying to map this complex interplay of light and perception into a format that computers can understand and screens can display. And it's a miracle that any of it works at all.
数字色彩是试图将光与感知的复杂相互作用映射成计算机能够理解和屏幕能够显示的格式。而这一切能够实现本身就是奇迹。

╌╌╌╌

What is color?  什么是颜色？

Light is technically something called electromagnetic radiation and it has a frequency and wavelength. That wavelength can vary, depending on the energy of the wave. High energy waves have a higher frequency and shorter wavelength, and low energy waves have a lower frequency and longer wavelength.
光在技术上被称为电磁辐射，它具有频率和波长。这个波长可以变化，取决于波的能量。高能量波具有更高的频率和更短的波长，而低能量波具有更低的频率和更长的波长。

The sun is constantly bombarding the earth with this electromagnetic radiation, although we only perceive a small fraction of it as visible light. The light from the sun appears white to us but it's actually a mixture of different wavelengths that our brain adds together. Your eye contains two types of photoreceptor cells, rods and cones, which are sensitive to different parts of the spectrum. Rods are sensitive to low light levels and are used for night vision, while cones are sensitive to higher light levels and are used for color vision.
太阳不断将这种电磁辐射照射到地球上，尽管我们只感知其中一小部分为可见光。太阳光在我们看来是白色的，但实际上它是不同波长的混合物，我们的大脑将其组合在一起。我们的眼睛包含两种类型的感光细胞，即视杆细胞和视锥细胞，它们对不同光谱部分敏感。视杆细胞对低光水平敏感，用于夜间视觉，而视锥细胞对较高光水平敏感，用于色彩视觉。

There are three types of cones, each sensitive to different wavelengths of light:
有三种类型的视锥细胞，每种对不同的光波长敏感：

• S-cones (Short-wavelength cones): Peak sensitivity around 420 nm (blue region).
  S 视锥细胞（短波长视锥细胞）：峰值敏感度在 420 纳米（蓝色区域）。
• M-cones (Medium-wavelength cones): Peak sensitivity around 530 nm (green region).
  M 视锥细胞（中波长视锥细胞）：峰值敏感度在 530 纳米（绿色区域）。
• L-cones (Long-wavelength cones): Peak sensitivity around 560 nm (red region).
  L 视锥细胞（长波长视锥细胞）：峰值敏感度在 560 纳米（红色区域）。

Notice that the cones are further from the surface of the retina, which means that more energy is required to stimulate them. Each cone type also has a different response curve:
请注意，视锥细胞距离视网膜表面更远，这意味着需要更多的能量来刺激它们。每种视锥细胞类型还具有不同的响应曲线：

When these cones are stimulated by light, they trigger a series of chemical reactions that send signals to the brain which it then interprets as color. When these wavelengths overlap, two types of cones are stimulated and we perceive an intermediate color, like purple.
当这些视锥细胞被光刺激时，它们会触发一系列化学反应，将信号发送到大脑，大脑随后将其解释为颜色。当这些波长重叠时，两种类型的视锥细胞被刺激，我们感知到一种中间色，如紫色。

The thing that makes this even more complicated is that the human eye is not equally sensitive to all wavelengths of light. The eye is most sensitive to green light, followed by red, and least sensitive to blue.
使情况更加复杂的是，人眼对各种波长的光并不具有相同的敏感性。人眼对绿光的敏感性最高，其次是红光，对蓝光的敏感性最低。

This means that the same amount of energy at different wavelengths will not be perceived as the same brightness. For example, a light with a wavelength of 555 nm (green) will appear brighter than a light with a wavelength of 450 nm (blue) even if they have the same energy.
这意味着相同能量但不同波长的光不会被感知为相同的亮度。例如，波长为 555 nm（绿光）的光会比波长为 450 nm（蓝光）的光显得更亮，即使它们的能量相同。

There is also a non-linear relationship between the intensity of light and our perception of brightness. This means that a small change in the intensity of light can result in a large change in our perception of brightness, especially at low light levels. You can see this in action in these optical illusions, where the perceived brightness of a color can change based on the surrounding colors.
光强与我们对亮度的感知之间也存在非线性的关系。这意味着光强的小变化可能导致我们对亮度感知的巨大变化，尤其是在光线较暗的情况下。你可以在这些光学错觉中看到这种现象，其中颜色的感知亮度会根据周围的颜色而变化。

Anyway, I think you get the point. Color is complicated, even on the biological level, and so modelling it digitally is an imperfect science.
无论如何，我想你已经明白了。颜色很复杂，即使在生物学层面上也是如此，因此数字模拟颜色是一门不完美的科学。

A brief history of digital color
数字色彩简史

Once again, we need to go back in time to understand how we got here. In the early days of computing, color was not a priority. Monitors were monochrome and most applications were text-based. The first color displays were developed in the 1970s, but they were expensive and not widely used. It wasn't until the 1980s that color became more common, with the introduction of the IBM PC and the Apple Macintosh.
我们再次需要回顾历史才能理解我们是如何走到今天的。在计算机的早期，色彩并不是优先考虑的事项。显示器是单色的，大多数应用程序都是基于文本的。最早的彩色显示器是在 20 世纪 70 年代开发的，但它们很昂贵且使用不广泛。直到 20 世纪 80 年代，随着 IBM PC 和苹果 Macintosh 的推出，色彩才变得更加普遍。

These early color-capable computers were pretty constrained - memory was scarce and expensive so instead of storing red, green and blue values for each pixel they used a predefined palette of colors. This approach, known as indexed color, stored a small index value (e.g., 1-bit, 2-bit, 4-bit, or 8-bit) for each pixel, which pointed to an entry in a Color Look-Up Table (CLUT) that contained the actual RGB color definitions.
这些早期的彩色计算机相当受限——内存稀缺且昂贵，因此它们不是为每个像素存储红色、绿色和蓝色值，而是使用预定义的色彩调色板。这种方法，称为索引色彩，为每个像素存储一个小索引值（例如 1 位、2 位、4 位或 8 位），该索引值指向一个包含实际 RGB 色彩定义的色彩查找表（CLUT）中的条目。

As hardware caught up, we gradually began being able to store RGB values for each pixel, leading to the development of true color displays that could represent millions of colors.
随着硬件的进步，我们逐渐能够为每个像素存储 RGB 值，这导致了能够表示数百万种颜色的真实色彩显示器的开发。

The problem was, and still is, that devices have different color reproduction capabilities, meaning that the same RGB values won't necessarily look the same on different monitors, printers, or cameras. Some of the larger companies joined together to form the International Color Consortium (ICC) in 1993 to try and standardise color reproduction across devices.
问题在于，并且至今仍然是，不同设备具有不同的色彩再现能力，这意味着相同的 RGB 值在不同显示器、打印机或相机上可能看起来并不一样。一些大公司于 1993 年联合成立了国际色彩联盟（ICC），试图规范跨设备的色彩再现。

They developed a system of color profiles that could be used to describe the color capabilities of a device, which could then be used to convert colors between different devices. It's used like a sort of mapping between the operating system and the device, allowing the OS to know how to interpret the color values for that device.
他们开发了一套色彩配置文件系统，用于描述设备的色彩能力，然后可以用来在不同设备之间转换颜色。它就像操作系统和设备之间的一种映射，使操作系统能够知道如何解释该设备的色彩值。

But that's just one part of the puzzle. ICC profiles are used to manage the color reproduction of devices, but they don't define how colors are represented in a digital format and by the time the web came along, we needed a way to represent colors in a consistent way across different devices and applications.
但这只是问题的一部分。ICC 配置文件用于管理设备的色彩再现，但它们并不定义数字格式中色彩的表示方式。随着网络的兴起，我们需要一种在不同设备和应用程序中一致地表示颜色的方法。

In 1996 Microsoft and Hewlett-Packard banded together to solve this problem by developing a standardised color space for the web and their devices, called sRGB (Standard Red Green Blue).
1996 年，微软和惠普联合起来解决这个问题，通过开发一个用于网页及其设备的标准化色彩空间，称为 sRGB（标准红绿蓝）。

They modelled the color space around the phosphor colors of typical CRT monitors at the time, so that they wouldn't need calibration. Pretty smart honestly.
他们将色彩空间建模为当时典型 CRT 显示器荧光粉的颜色，这样就不需要校准了。老实说，这很聪明。

sRGB has hung around since then, remaining the de facto color space for the web (until recently) and most consumer devices. If your computer is ever unsure about what color space to use, it will default to sRGB. It's also the color space used by most image formats, like JPEG and PNG.
sRGB 从那时起一直沿用至今，成为事实上的网络色彩空间（直到最近）以及大多数消费类设备的标准色彩空间。如果您的计算机不确定使用哪种色彩空间，它会默认使用 sRGB。它也是大多数图像格式（如 JPEG 和 PNG）所使用的色彩空间。

But hardware and software have moved on, and there's a lot of new color spaces that have been developed to take advantage of the increased capabilities of modern displays.
但硬件和软件已经发展，出现了许多新的色彩空间，以利用现代显示器增强的功能。

What is a color space?
什么是色彩空间？

A color space is actually a very abstract concept - it's just a specific organisation of colors so that they are reproducible. Very helpful.
色彩空间实际上是一个非常抽象的概念——它只是对颜色进行特定组织，以便能够重现。非常有帮助。

You can think of the Pantone system as a type of color space. On the one side, I have a little booklet with a bunch of colors printed on it. Each color has a unique code and a funny name. On the other side, someone has a manual that tells them the precise recipe for mixing those colors using specific inks. The important thing is that the colors in the booklet and the colors in the manual are defined in a way that they can be reproduced consistently.
你可以将 Pantone 系统视为一种色彩空间。一方面，我有一本小册子，上面印着多种颜色。每种颜色都有一个独特的代码和滑稽的名字。另一方面，有人有一本手册，告诉他们如何使用特定油墨精确混合这些颜色。重要的是，小册子中的颜色和手册中的颜色都以能够一致复制的定义方式呈现。

In the early 1930s, the CIE (Commission Internationale de l'Éclairage) developed the CIE XYZ color space, which we use as a reference for almost all other color spaces. You can sort of think of this color space as defining the entire range of colors that the human eye can see.
20 世纪 30 年代初，国际照明委员会（CIE）开发了 CIE XYZ 色彩空间，我们将其作为几乎所有其他色彩空间的参考标准。你可以将这个色彩空间理解为定义了人类眼睛所能看到的所有颜色范围。

It's device-independent, which means that it can be used to describe colors regardless of the device used to display them. It's not super important to understand what the x, y, and z values represent in the CIE XYZ color space, and honestly, I'd struggle to explain it to you.
它是设备无关的，这意味着它可用于描述颜色，而不管用于显示颜色的设备是什么。理解 CIE XYZ 色彩空间中 x、y 和 z 值代表什么并不特别重要，老实说，我也很难向你解释清楚。

Notice how we don't ever specify colors in this format? That's because screens use red, green, and blue sub-pixels to create colors, when we specify color values we actually need to tell the screen how much power to apply to each sub-pixel using RGB values. ⁂
注意到我们从未以这种格式指定颜色吗？这是因为屏幕使用红、绿、蓝子像素来创建颜色，当我们指定颜色值时，实际上需要告诉屏幕如何对每个子像素应用功率，使用 RGB 值。⁂

For example, the color white is represented as (255, 255, 255) in sRGB, meaning full intensity of red, green, and blue. In this case we use a value between 0 and 255 because that represents 8-bits (2^8 = 256) per channel but you can think of this as a percentage.
例如，白色在 sRGB 中表示为 (255, 255, 255) ，意味着红色、绿色和蓝色的全强度。在这种情况下，我们使用 0 到 255 之间的值，因为那代表每个通道的 8 位 (2^8 = 256) ，但你可以将其视为百分比。

But obviously, our screens are not capable of displaying all the colors in the CIE XYZ color space, which is why we need to create specific colors spaces that are subsets of it. So, how do we go about doing that?
但显然，我们的屏幕无法显示 CIE XYZ 色彩空间中的所有颜色，这就是为什么我们需要创建它是其子集的特定色彩空间。那么，我们该如何进行呢？

Well, when you make a color space, you define a few things:
嗯，当你创建一个色彩空间时，你需要定义一些事情：

• The chromaticities^↓, or coordinates, of the primary colors.
  主色的色度，或坐标。
• The coordinates of the white point^↓.
  白点的坐标。
• The gamma^↓ or tone response curve.
  伽马或色调响应曲线。

To set the chromaticities of the primary colors, you sort of pick their x, y, and z coordinates in the CIE XYZ color space. This gives your color space some limits which will come to define the gamut^↓ of the color space.
要设置主色的色度，你基本上是在 CIE XYZ 色彩空间中选择它们的 x、y 和 z 坐标。这为你的色彩空间设定了一些限制，这些限制将定义色彩空间的色域。

These values give meaning to our RGB values. Pure green (0, 255, 0) in our color space now refers to that specific green color defined by the chromaticity values we set. If we had different chromaticities, the RGB values would refer to different colors.
这些值赋予了我们的 RGB 值意义。在我们色彩空间中的纯绿色（ 0, 255, 0 ）现在指的是我们设定的色度值所定义的特定绿色。如果我们有不同的色度值，RGB 值将指代不同的颜色。

Next, we need to set the coordinates for the color we want to use as the white point, which helps us to define the color temperature of the color space. Pure white is actually unrealistic to use so we want to pick a white that mimics typical daylight or interior lighting. The white point is important because it affects how we perceive all other colors.
接下来，我们需要设定我们想要用作白点的颜色的坐标，这有助于我们定义色彩空间的色温。纯白实际上并不现实，所以我们想要选择一个模拟典型日光或室内照明的白点。白点很重要，因为它会影响我们感知所有其他颜色的方式。

Finally, we define the gamma or transfer function. You can kind of think of this like an easing curve we apply, that adjusts the brightness of the colors to make the progression seem more natural. This is important because our eyes perceive brightness in a non-linear way, so we need to adjust the colors to match our perception.
最后，我们定义伽马值或转换函数。你可以将其想象为一种我们应用的缓动曲线，调整颜色的亮度，使过渡看起来更自然。这很重要，因为我们的眼睛感知亮度是非线性的，所以我们需要调整颜色以匹配我们的感知。

So why do we have so many different color spaces? Well, over time, screen technology has improved and modern displays can reproduce a wider range of colors accurately. So we created new color spaces to take advantage of that.
那么，为什么我们有这么多不同的色彩空间呢？嗯，随着时间的推移，屏幕技术得到了改进，现代显示器能够更准确地再现更广泛的颜色。所以，我们创建了新的色彩空间来利用这一点。

Different industries and applications also have different requirements for color reproduction. For example, the film industry uses the DCI-P3 color space, but for digital application we use Display P3, which is a slightly different version of it. They have the same gamut but different white points and gammas, with DCI-P3 using a warmer white point to match the characteristics of digital cinema projectors.
不同行业和应用对色彩再现也有不同的要求。例如，电影行业使用 DCI-P3 色彩空间，但对于数字应用我们使用 Display P3，它是 DCI-P3 的一个稍有不同的版本。它们具有相同的色域，但白点和伽马值不同，DCI-P3 使用更暖的白点以匹配数字电影投影机的特性。

Applications like Photoshop can use wider gamut spaces than your screen can actually handle, like ProPhoto RGB, which allows you to work with a wider range of colors and then convert them to a smaller gamut color space when you're ready to export. Working in these wide gamut, high-bit-depth color spaces allows them to maintain precision when doing complex color calculations.
像 Photoshop 这样的应用可以使用比屏幕实际能处理的更广色域空间，比如 ProPhoto RGB，它允许你在准备好导出时将更广泛的颜色范围转换到较小的色域色彩空间。在这些广色域、高位深色彩空间中工作，使它们在进行复杂的色彩计算时能够保持精确性。

What is a gamut?
什么是色域？

A gamut is the specific set of colors that are reproducible in a given color space, or by a specific device. Again, the limits of the gamut are defined by the primary colors and the white point. We can visualise this by plotting it against the CIE XYZ color space, adding some points for the primaries and white point, and then joining them with some lines.
色域是在特定色彩空间中可再现的特定颜色集合，或由特定设备再现。同样，色域的限制由原色和白点定义。我们可以通过将其与 CIE XYZ 色彩空间进行对比来可视化这一点，添加一些原色和白点的点，然后用一些线将它们连接起来。

This shape represents the gamut of the color space - anything within this is reproducible in this color space and anything outside of it isn't. Put simply, the farther apart the primaries are, the larger the gamut. Here are the different gamuts of some common color spaces:⁂
这个形状代表了色域——在这个形状内的任何颜色都可以在这个色域内重现，而在这个形状外的颜色则无法。简单来说，原色之间的距离越远，色域就越大。这里是一些常见色域的不同色域：⁂

Visualising a gamut in 2D like this is a bit misleading because it doesn't really show the full range of colors. It's just a 2D projection of a 3D shape, which is why we can also visualise the gamut in 3D:
在 2D 中这样可视化色域有点误导性，因为它并没有真正展示出完整的颜色范围。这只是 3D 形状的 2D 投影，这也是为什么我们还可以在 3D 中可视化色域：

In 3D a few things are more obvious. For instance, you can start to understand how the primaries and white point define the shape and volume of the gamut. You can see the difference in brightness between the primaries, with green being the brightest by far. And you can also notice the curved edges of the gamut, which is a result of gamma correction.
在三维空间中，一些事情会更加明显。例如，你可以开始理解原色和白点如何定义色域的形状和体积。你可以看到原色之间的亮度差异，其中绿色明显最亮。你也可以注意到色域的弯曲边缘，这是伽马校正的结果。

Display P3 has a roughly 25% larger gamut than sRGB, mainly because the red and green primaries are farther apart. In 2D the size difference isn't that obvious, but in 3D you can see where the extra volume is added.
显示 P3 的色域比 sRGB 大约大 25%，主要是因为红色和绿色的主色相差较远。在 2D 平面上，这种大小差异并不明显，但在 3D 空间中，你可以看到新增的色域体积所在的位置。

Some color spaces, like oklab, have gamuts that match the CIE XYZ color space, which means they can represent all colors that the human eye can see. These are usually known as device-independent color spaces because they are not tied to any specific device or display technology.
某些色域，如 oklab，与 CIE XYZ 色彩空间匹配，这意味着它们能够表示人眼所能看到的所有颜色。这些通常被称为独立于设备的色域，因为它们不依赖于任何特定的设备或显示技术。

We can still use these color spaces, we just need to clamp the colors to the gamut of the device we are using. So you can use the oklab, or oklch, color spaces but keep their values within the Display P3 gamut to make sure people can actually see the colors on their screens.
我们仍然可以使用这些色域，只需将颜色值限制在我们所使用设备的色域范围内即可。因此，你可以使用 oklab 或 oklch 色域，但需保持其值在显示 P3 的色域范围内，以确保人们能在屏幕上看到这些颜色。

The number of colors in a gamut is actually a function of the bit depth ^↓ of the color space. For instance, sRGB has 256 possible values per channel, which means it can represent 16.7 million colors (256^3 = 16,777,216). If you increase the bit depth to 10 bits per channel, you can represent over a billion colors (1024^3 = 1,073,741,824).
色域中的颜色数量实际上取决于色彩空间的位深。例如，sRGB 每个通道有 256 个可能的值，这意味着它能够表示 1670 万种颜色 (256^3 = 16,777,216) 。如果将位深增加到每个通道 10 位，则可以表示超过 10 亿种颜色 (1024^3 = 1,073,741,824) 。

What is a color model?
什么是色彩模型？

We can arrange the gamut of a color space in any way we want. When we specify the colors in the RGB format, we are implying that the colors are arranged in a cube, where the red, green, and blue values are the x, y, and z coordinates respectively.
我们可以任意安排色彩空间的色域。当我们以 RGB 格式指定颜色时，我们意味着这些颜色被安排在一个立方体中，其中红色、绿色和蓝色值分别是 x、y 和 z 坐标。

This is called a color model and I think a lot people conflate this concept with the color space itself. The primaries and the white point haven't changed, and therefore neither has the gamut. Instead it's just a different geometric arrangement of the colors. We can arrange the same set of colors in a cylinder if we want.
这被称为色彩模型，我认为很多人会将其概念与色彩空间本身混淆。主色和白色点没有改变，因此色域也没有改变。相反，这只是颜色的不同几何排列方式。如果我们想的话，可以将同一组颜色排列在一个圆柱体内。

This is the HSL cylinder and it allows us to specify the component values in a more human readable format - instead of red, green, and blue we can specify the hue, saturation and lightness values. The hue is specified as the degrees of a circle and we can change that value while holding the other two constant.
这是 HSL 圆柱体，它允许我们以更人类可读的格式指定分量值——我们不仅可以指定红色、绿色和蓝色，还可以指定色相、饱和度和亮度值。色相以圆的度数来指定，我们可以改变这个值，同时保持另外两个值不变。

There's another variation of this called HSV, which is similar to HSL but uses value^↓ instead of lightness^↓. It's a confusing difference, but you can see that the top of the cylinder is white in HSL, while the top of the cylinder is the maximum brightness for that color in HSV.
还有另一种变体称为 HSV，它与 HSL 类似，但使用的是值（value）而非亮度（lightness）。这是一个令人困惑的区别，但你可以看到在 HSL 中，圆柱体的顶部是白色，而在 HSV 中，圆柱体的顶部是该颜色的最大亮度。

These are called polar color models because they use polar coordinates to specify the colors, wheras RGB is a Cartesian color model because it uses Cartesian coordinates.
这些被称为极坐标色彩模型，因为它们使用极坐标来指定颜色，而 RGB 是一个笛卡尔坐标色彩模型，因为它使用笛卡尔坐标。

Converting between most color models is surprisingly simple, and it's usually just a case of doing some geometry using the vertices of the models. For instance, here's how you convert from RGB to HSL:
在大多数色彩模型之间进行转换出乎意料地简单，通常只需要使用模型的顶点进行一些几何计算。例如，这里是如何从 RGB 转换为 HSL 的方法：

We can use even more complex color models to create perceptually uniform color spaces^↓, like oklch, where we manipulate the distances between colors to try and compensate for the quirks of human perception.
我们可以使用更复杂的色彩模型来创建感知均匀的色彩空间，比如 oklch，其中我们操纵颜色之间的距离，试图补偿人类感知的怪癖。

Gradients and interpolation
渐变与插值

The way colors are arranged in a color space is important for determining gradients. When you change color model, you change the distance between any two colors and the colors that fall between them.
颜色在色彩空间中的排列方式对确定渐变非常重要。当你改变色彩模型时，你改变了任意两种颜色及其之间的颜色之间的距离。

To create a gradient, you find the coordinates of the two colors and you interpolate between them. It's tempting to think of this as drawing a straight line between the two colors but it actually depends on the interpolation method. In an RGB cube, we can just linearly interpolate between the two colors but when they are on opposing sides of the cube, it tends to pass through the de-saturated middle.
要创建渐变，你需要找到两种颜色的坐标，并在它们之间进行插值。人们常常想将其视为在两种颜色之间画一条直线，但实际上这取决于插值方法。在 RGB 立方体中，我们只需线性地插值两种颜色，但当它们位于立方体的对立两侧时，往往会穿过饱和度较低的中间区域。

If we interpolate in an HSL cylinder, we can do some fancier things, like interpolating the hue separately from the lightness and saturation allowing us to take a trip through different hues.
如果我们在一个 HSL 圆柱体中插值，我们可以做一些更复杂的事情，比如将色调、亮度和饱和度分别插值，使我们能够穿越不同的色调。

The interpolation method isn't necessarily constrained by the color model because we can convert the colors to another color model, do the interpolation, and convert all the values back to the original color model. ⁂
插值方法不一定受限于色彩模型，因为我们可以将颜色转换到另一种色彩模型进行插值，然后将所有值转换回原始色彩模型。⁂

In fact, you can create custom interpolation methods to create specific effects. These sorts of gradients are used quite a lot in data visualisation, where you want to create a palette with high degrees of contrast. Here's one using a Cube Helix gradient:
实际上，你可以创建自定义的插值方法来产生特定效果。这类渐变在数据可视化中用得相当多，当你需要创建具有高对比度的调色板时。这里有一个使用立方螺旋渐变的例子：

Perceptual uniformity  感知一致性

Humans don't perceive color in a uniform or linear way, which is really annoying. For instance we don't have a linear perception of brightness, which means we perceive higher contrast between dimmer colors than brighter colors, even if both sets of colors have the same mathematical distance between each other.
人类对颜色的感知并非均匀或线性，这实在很烦人。例如，我们对亮度的感知不是线性的，这意味着我们感知到较暗颜色之间的对比度高于较亮颜色之间的对比度，即使这两组颜色在数学上的距离是相同的。

We also have a difference in our sensitivity to different colors - for instance our sensitivity to hue and saturation depends on the color's brightness. We are less sensitive to changes in hue in very bright colors, which you can see with green, but we are more sensitive to changes in saturation in bright colors. (Apologies to your retinas for the image below)
我们对于不同颜色的敏感度也有所不同——例如，我们对色调和饱和度的敏感度取决于颜色的亮度。我们在非常明亮的颜色中对于色调变化的敏感度较低，这一点可以通过绿色看出，但我们在明亮的颜色中对于饱和度变化的敏感度更高。（对下面图像中可能对您的视网膜造成的影响表示歉意）

All of these quirks make it difficult to create color spaces that accurately model human perception. The first real attempt to design a perceptually uniform color space came in the 70's when the CIE developed the CIE LAB color space. It uses the LAB color model, which splits a color into lightness (L), its red to green value (a), and its yellow to blue value (b).
所有这些怪癖使得创建能够准确模拟人类感知的颜色空间变得困难。设计感知一致的颜色空间的第一次真正尝试出现在 20 世纪 70 年代，当时 CIE 开发了 CIE LAB 颜色空间。它使用 LAB 颜色模型，将颜色分为亮度（L）、其红到绿值（a）以及其黄到蓝值（b）。

These ‘a’ and ‘b’ axes are based on the concept that the human visual system perceives colors in terms of these opposites. You can’t have a greenish-red or a yellowish-blue color. Separating the lightness from the color components, is important too because as I mentioned above, we are more sensitive to changes in lightness than changes in the hue or saturation.
这些‘a’和‘b’轴基于人类视觉系统通过这些对立概念感知颜色的概念。你不能有绿色偏红的颜色或蓝色偏黄的颜色的。将亮度与颜色分量分离也很重要，因为如我之前所述，我们对亮度变化的敏感度高于色调或饱和度变化。

In 2020, Björn Ottosson introduced oklab, and it's related color space oklch, just sort of out of nowhere. Oklab is a modern perceptually uniform color space designed to improve on existing options while also being more straightforward to calculate so that it can be used in real-time applications, which is tricky with some of the old spaces.
2020 年，Björn Ottosson 推出了 oklab，以及与之相关的色彩空间 oklch，这仿佛是突然出现的。Oklab 是一个现代的感知均匀色彩空间，旨在改进现有选项，同时计算更直接，因此可以用于实时应用，而一些旧空间在这方面很棘手。

The reason it is this insane shape is that it is manipulating the distances between colors to try compensate for human perception.
它之所以呈现这种不寻常的形状，是因为它在操纵色彩之间的距离，试图补偿人类感知。

Each row here has the same lightness value and you can see how little the lightness varies with different hues, something that most color spaces struggle with:
这里的每一行都有相同的亮度值，你可以看到不同色相下亮度变化多么微小，大多数色彩空间都难以做到这一点：

You can see the effect of this most obviously in gradients, where we are just changing the hue of a color. In perceptually uniform color spaces the differences in lightness are minimal compared to a color space like sRGB.
这种效果在渐变中最为明显，我们只是改变了颜色的色相。在感知均匀色彩空间中，与 sRGB 这样的色彩空间相比，亮度的差异要小得多。

Oklch also produces much more pleasing progressions when altering lightness, maintaining saturation in a way that HSL can't.
Oklch 在调整亮度时也能产生更令人愉悦的渐变效果，并以 HSL 无法做到的方式保持饱和度。

It can be a little tricky to work with though. Because it's a device independent color space, it can be used to represent any color in CIE XYZ color space. But your display doesn't support a lot of those colors, so it's easy to select values that are out of gamut for your display which will be clipped ^↓.
不过使用起来可能有点棘手。因为它是一个设备无关的颜色空间，可以用来表示 CIE XYZ 颜色空间中的任何颜色。但你的显示器并不支持其中很多颜色，因此很容易选择超出显示器色域的值，这些值将被裁剪。

The chroma peaks are also relative to the hue and lightness so you can't actually be sure that there will be an equivalent chroma in a different hue. You can see this problem with green, which has the highest chroma. Here's a fairly washed out green where you can see that we can find an equivalent in other hues:
色相峰值也相对于明度，所以你实际上无法确定在不同色相中会有一个等效的饱和度。你可以通过绿色看到这个问题，绿色具有最高的饱和度。这里有一个相当褪色的绿色，你可以看到我们在其他色相中可以找到等效色：

If we increase the chroma from 0.16 to 0.26, you can see that we have almost no other hues that can match that chroma and lightness combination in the P3 gamut:
如果我们把色度从 0.16 增加到 0.26，你会发现我们在 P3 色域中几乎找不到其他色调可以匹配这种色度和亮度的组合：

If you aren't aware of this, you can end up picking colors that are out of gamut without realising it and blaming oklch for looking bad. In reality, you're still at the mercy of your display's gamut.
如果你不了解这一点，可能会在不经意间选择超出色域的颜色，并责怪 oklch 看起来不好。实际上，你仍然受限于显示器的色域。

Gamut mapping  色域映射

What happens when you use a color space that has a larger gamut than the device your user is using? Well, you have to try find an equivalent color in the smaller gamut. This is called gamut mapping and it's not as easy as it sounds.
当你使用一个色域比用户使用的设备更大的色域时会发生什么？嗯，你需要尝试在较小的色域中找到一个等效的颜色。这被称为色域映射，听起来并不简单。

For instance, imagine we are trying to use this green in the Display P3 color space but the user's device only supports sRGB.
例如，想象我们正在尝试使用 Display P3 色彩空间中的这种绿色，但用户的设备仅支持 sRGB。

The green in Display P3 is both a bit brighter and more saturated than the green in sRGB, so we need to make a decision about how to map it. We could just try find the closest color in the sRGB gamut, which will be less saturated but a similar brightness, or we could try to preserve the saturation and make it a bit darker.
Display P3 中的绿色比 sRGB 中的绿色更亮且饱和度更高，因此我们需要决定如何映射它。我们可以尝试在 sRGB 色域中找到最接近的颜色，这将饱和度降低但保持相似亮度，或者我们可以尝试保持饱和度并使其稍微变暗。

In practice, trying to preserve the saturation is more expensive and so a lot of software will just clip out of gamut colors to the nearest boundary of the sRGB gamut. This mostly works fine, but results in a loss of detail - you end up with a lot of previously distinct colors that collapse into the same boundary color.
实际上，尝试保持饱和度成本更高，因此很多软件会直接将超出 sRGB 色域的颜色裁剪到最近的边界。这通常效果不错，但会导致细节损失——你最终会得到很多原本不同的颜色合并为相同的边界色。

The clipping approach is simple and fast, because it only deals with out of gamut colors, but if you needed to preserve the relationship between colors, you might want to use a compression algorithm that adjusts all colors in the image to fit within the target gamut. This is a lot more expensive, so it's mainly used in high-end applications like professional photo editing software where you don't need to do it in real-time.
剪切方法简单快速，因为它只处理超出色域的颜色，但如果你需要保留颜色之间的关系，你可能想使用一种压缩算法，将图像中的所有颜色调整以适应目标色域。这要昂贵得多，因此主要用于高端应用，如专业照片编辑软件，在那里你不需要实时处理。

White point  白点

A color space usually sets the white point based on the coordinates of white value in one of the CIE reference color spaces. The specific white point you choose, dictates the color temperature for the color space and the choice is made based on the expected viewing conditions for that color space.
一个色域通常根据其中一个 CIE 参考色域中白值的坐标来设置白点。你选择的具体白点决定了色域的颜色温度，这个选择是根据该色域的预期观看条件做出的。

You might use a different white point for a digital color space, usually viewed in a artificially lit room, than a color space designed for cinema which will be viewed in a completely dark environment.
对于数字色域，你可能需要一个不同的白点，通常在人工照明的房间中查看，而对于为电影设计的色域，它将在完全黑暗的环境中查看。

The CIE has actually defined a standard set of white points, called standard illuminants, which are arranged by the quality of white light they mimic:
国际照明委员会实际上定义了一套标准的白点，称为标准光源，它们按照模拟白光的质量排列：

• Illuminant A: Equivalent to typical incandescent lighting, with a temperature of 2856 K.
  光源 A：相当于典型的白炽灯照明，温度为 2856 K。
• Illuminant D series: Designed to mimic various phases of natural daylight:
  D 系列光源：设计用来模拟自然日光的不同阶段：
  • D50 (5000 K): Represents warmer horizon daylight, like sunrise or sunset. Used as the standard white point for graphics and print.
    D50（5000 K）：代表较暖的日出日落时的地平线日光。用作图形和印刷的标准白点。
  • D55 (5500 K): Represents cool noon daylight and is used a lot in photography and some print applications.
    D55 (5500 K): 代表凉爽的正午日光，在摄影和一些印刷应用中广泛使用。
  • D65 (6500 K): Represents average noon daylight and is the most commonly used white point, especially for digital displays. It's the white point used in sRGB, Rec. 709 and 2020 and many others.
    D65 (6500 K): 代表平均正午日光，是最常用的白点，尤其适用于数字显示。它是 sRGB、Rec. 709 和 Rec. 2020 以及许多其他标准中使用的白点。
  • D75 (7500 K): Represents north sky daylight and is used in some higher end display tech to simulate cooler light conditions.
    D75 (7500 K): 代表北向天空日光，在一些高端显示技术中使用，以模拟较冷的光照条件。
• Illuminant F Series: Mimics various types of fluorescent lamps with different phosphor compositions (e.g., F2 for cool white, F11 for TL84).
  光源 F 系列：模拟具有不同荧光粉成分的各种荧光灯（例如，F2 代表冷白光，F11 代表 TL84）。
• Illuminant E: A theoretical equal-energy pure white light source. Mainly used as a reference point because it's not really achievable in practice.
  光源 E：一种理论上的等能纯白光源。主要用作参考点，因为它在实践中实际上是无法实现的。

Because the way we perceive color is so influenced by our surroundings, all of these white points are defined against a standard set of viewing conditions which are actually super boring and so I'll spare you the details of that.
由于我们感知颜色的方式深受周围环境的影响，所有这些白点都是针对一套标准观察条件定义的，这些条件实际上非常无聊，所以我将省略其详细说明。

Gamma correction  伽马校正

Okay, this is a bit gnarly. You can sort of think of gamma correction as an easing curve we apply to luminance values to stop them from being linear. We first needed this because CRTs had a non-linear response, where the brightness emitted was a power function of the input voltage. So we applied an inverse of the power function to the signal before sending it to the CRT, making the response more linear and preserving the intended luminance.
好吧，这有点复杂。你可以将伽马校正理解为一种我们应用于亮度值以防止其线性的缓变曲线。我们最初需要这种校正是因为 CRT 显示器具有非线性的响应特性，其中发出的亮度是输入电压的幂函数。因此，我们在将信号发送到 CRT 显示器之前，对其应用了幂函数的逆函数，使响应更加线性，并保留了预期的亮度。

But we also need it to compensate for the non-linearity of human vision. We are much more sensitive to differences in dark tones than lighter ones. To compensate for this, we apply a compressive curve to the luminance values which allocates more data (in this case, bits) to the darker tonal range, where our eyes are more discerning, and fewer bits to the brighter range.
但我们还需要它来补偿人眼视觉的非线性。我们对暗色调的差异比对亮色调的差异敏感得多。为了补偿这一点，我们对亮度值应用压缩曲线，将更多的数据（在这种情况下是位）分配给暗色调范围，因为我们的眼睛在这个范围内更敏感，而将较少的位分配给亮色调范围。

This allows us to use lower bit depths, like 8-bit per channel, without seeing distinct steps between colors in gradients known as banding. If you wanted to use a linear encoding, you'd need to store more color information per channel, like 12 or 16 bits, to prevent this from happening.
这使我们能够使用较低的位深度，例如每个通道 8 位，而不会在渐变中看到明显的颜色阶，这种现象称为色带。如果你想要使用线性编码，你需要每个通道存储更多的颜色信息，比如 12 位或 16 位，以防止这种情况发生。

You know those set up screens in video games, where you have to adjust the image until it is only barely visible? Those are adjusting the gamma correction.
你知道那些视频游戏中的设置屏幕，在那里你必须调整图像直到它几乎不可见吗？那些是在调整伽马校正。

Now, to get very technical, this curve is known as a Tone Response Curve or Transfer Function and gamma value is the average of this curve when plotted on logarithmic axes. We approximate this as a simple power function but in reality these Tone Response Curves can be pretty complex shapes designed to compress dynamic range more gracefully.
现在，从非常专业的角度来看，这条曲线被称为色调响应曲线或传递函数，而伽马值是在对数轴上绘制的这条曲线的平均值。我们将其近似为简单的幂函数，但实际上这些色调响应曲线可以设计得非常复杂的形状，以便更优雅地压缩动态范围。

Luckily, there are some standard gamma values we aim for, even though the underlying response curve might differ:
幸运的是，即使底层响应曲线可能不同，我们也有一些目标标准伽马值：

• Gamma 2.2: The standard display gamma for most computer monitors. It provides a good balance for typical viewing environments and aligns well with perceptual encoding principles.
  伽马 2.2：大多数计算机显示器标准的显示伽马值。它为典型观看环境提供了良好的平衡，并且与感知编码原理很好地对齐。
• Gamma 1.8: Used by older Apple Mac OS versions (pre-OSX 10.6). Produces slightly brighter-looking images compared to gamma 2.2.
  伽马 1.8：旧版 Apple Mac OS 版本（OSX 10.6 之前）使用。与伽马 2.2 相比，生成的图像看起来稍亮。
• Gamma 2.4: The standard gamma specified for BT.1886 (HDTV), intended for viewing in dimmer environments than typical computer use.
  伽马 2.4：BT.1886（HDTV）指定的标准伽马值，适用于比典型计算机使用更暗的环境观看。
• Gamma 2.6: Used in the DCI-P3 digital cinema standard, resulting in darker but more saturated-looking images suitable for dark theater environments.
  伽马 2.6：用于 DCI-P3 数字电影标准，导致图像更暗但看起来更饱和，适合黑暗的剧院环境。
• Linear Gamma (Gamma 1.0): Represents a direct, linear relationship between signal value and light intensity. Raw image files typically store data in a linear (or near-linear) form. While computationally convenient for image processing operations, linear encoding is perceptually inefficient for storage and display at lower bit depths.
  线性伽马（伽马 1.0）：表示信号值与光强度之间的直接、线性关系。原始图像文件通常以线性（或近似线性）形式存储数据。虽然对于图像处理操作在计算上方便，但线性编码在较低位深度的存储和显示时感知效率较低。

It all gets a bit more complicated when you consider that we actually tend to process images with linear gamma because it is more computationally convenient. Then when it's time to store or transmit them, we use the encoding transfer function which is then decoded by the display transfer function. Simple right? Anyway, the idea is that this complicated process is designed to match the way we perceive luminance.
当你考虑到我们实际上倾向于用线性伽马处理图像，因为这样更便于计算时，情况会变得更复杂。然后当需要存储或传输它们时，我们使用编码转换函数，并由显示转换函数进行解码。简单吗？无论如何，这个复杂的过程的设计目的是为了匹配我们感知亮度的方式。

Bit depth  比特深度

You might have read that the sRGB color space only has 16.7 million colors and think that's just because it's kind of old and has small gamut but that's only half of the story. The amount of discrete colors in any given color space is actually a function of how many bits we use per channel.
你可能读过 sRGB 色彩空间只有 1670 万种颜色，并认为那只是因为它比较老旧且色域较小，但这只是故事的一半。任何给定色彩空间中的离散颜色数量实际上是我们每个通道使用的比特数的函数。

In sRGB we typically have 256 possible values per channel, from 0 to 255, which is 8 bits (2^8 = 256) and that means when you calculate the number of combinations of red, green, and blue you get 16.7 million (256^3 = 16,777,216).
在 sRGB 中，每个通道通常有 256 个可能的值，从 0 到 255，这是 8 位 (2^8 = 256) ，这意味着当你计算红、绿、蓝的组合数量时，你会得到 1670 万 (256^3 = 16,777,216) 。

You could increase the amount of colors in sRGB without changing the gamut by simply increasing the bit depth. If we had 10 bits per channel, all of a sudden we'd have 1.07 billion possible colors (1024^3 = 1,073,741,824). But you'd need to change the format you specify colors in. Both the rgb(0-255) and hex #RRGGBB formats are constrained to 8 bits per channel.
你可以通过简单地增加位深度来增加 sRGB 中的颜色数量而不改变色域。如果我们每个通道有 10 位，那么突然之间我们就会有 10.7 亿种可能的颜色 (1024^3 = 1,073,741,824) 。但你需要改变你指定颜色的格式。 rgb(0-255) 和十六进制 #RRGGBB 格式都限制在每通道 8 位。

10 bits per channel is pretty standard these days and it's the minimum required for High Dynamic Range content. High end digital cameras will capture RAW images in 12 bits per channel and image editing software, like Photoshop, will use 16 bits per channel internally to perform complex manipulations while maintaining precision.
现在每通道 10 位已经相当标准，并且这是高动态范围内容所需的最低要求。高端数码相机会以每通道 12 位捕获 RAW 图像，而像 Photoshop 这样的图像编辑软件会在内部使用 16 位来执行复杂的操作，同时保持精确度。

Obviously, storing more color information takes up more space, occupies more RAM and requires more processing power so you ideally want to store as little information as you can get away with. This is why the JPEG standard uses 8 bits per channel which often means discarding some color information. We won't go into full detail here, but one method it uses is called Quantization which maps colors from a higher bit depth into a smaller one.
显然，存储更多信息会占用更多空间，占用更多 RAM，并需要更多处理能力，所以你理想情况下希望存储尽可能少的信息。这就是为什么 JPEG 标准使用每通道 8 位，这通常意味着会丢弃一些颜色信息。我们不会在这里详细说明，但其中一种方法是量化，它将颜色从较高的位深度映射到较小的位深度。

This can result in some banding, which you'll have seen if you ever export a high bit depth image with a lot of detail from Photoshop. To compensate, we add some dithering to the image which is basically just adding small amounts of noise to make the banding seem less obvious. PNGs don't have this issue as they are lossless and can store up to 16 bits per channel.
这可能会导致一些色带现象，如果你曾经从 Photoshop 导出过高位深且细节丰富的图像，就会见过这种情况。为了弥补，我们会对图像添加一些抖动，基本上就是添加少量噪声来使色带现象不那么明显。PNG 格式没有这个问题，因为它们是无损的，并且每个通道可以存储高达 16 位。

Additive vs Subtractive  加色法与减色法

Up until this point, we've only been talking about additive color spaces, because we've been dealing with digital color. Almost all digital screens rely on additive color mixing, where colors are created by combining different intensities of red, green, and blue light. This is because screens emit light directly instead of reflecting it, so they can create colors by adding light together.
到目前为止，我们只讨论了加色色彩空间，因为我们处理的是数字色彩。几乎所有的数字屏幕都依赖于加色混合，即通过混合不同强度的红、绿、蓝光线来创建颜色。这是因为屏幕直接发光而不是反射光线，所以它们可以通过叠加光线来创建颜色。

When you print something, you use subtractive color mixing, where colors are created by subtracting different wavelengths of light from white light. This is because printers use inks or pigments that absorb certain wavelengths of light and reflect others. The most common subtractive color model is CMYK (Cyan, Magenta, Yellow, and Key/Black), which is used in printing.
当你打印东西时，你使用的是减色混合，即通过从白光中减去不同波长的光线来创建颜色。这是因为打印机使用吸收某些波长光线并反射其他波长的油墨或颜料。最常见的减色色彩模型是 CMYK（青色、品红色、黄色和黑色/关键），它用于印刷。

Because you are filtering out colors, you use different primaries than in additive color spaces. In CMYK, the primary colors are cyan, magenta, and yellow, which are the complementary colors to red, green, and blue. In theory, converting from RGB to CMYK is just a matter of finding the complementary colors and adjusting for the white point, but in practice you are at the mercy of the properties of the inks and paper.
因为你在过滤掉颜色，所以你使用的原色与加色色域中的不同。在 CMYK 中，原色是青色、品红色和黄色，它们分别是红色、绿色和蓝色的互补色。理论上，从 RGB 转换到 CMYK 只是一个寻找互补色并调整白点的问题，但在实践中，你不得不受制于墨水和纸张的特性。

There are some digital displays that use subtractive color mixing, like color e-ink displays used in some Kindle type devices. These displays use a combination of colored pigments that can be manipulated to create different colors, but they are still limited by the gamut of the pigments used.
有些数字显示器使用减色混色技术，例如某些 Kindle 类设备中使用的彩色电子墨水显示器。这些显示器使用多种彩色颜料的组合，可以通过调整来产生不同的颜色，但它们仍然受限于所使用的颜料的色域。

Color management  色彩管理

Of course, because color is so unreasonably complex, it's not as simple as just picking a color space and then your computer just displays it. There can be different color spaces used at different stages in the display pipeline, and at every stage your computer needs to convert between them.
当然，因为色彩如此不合常理地复杂，选择一个色域并让你的计算机直接显示它并不那么简单。在显示管道的不同阶段可能会使用不同的色域，并且在每个阶段，你的计算机都需要在它们之间进行转换。

Your computer has an operating system, which uses a color space. But your computer also runs applications, which might use a different color space. Those apps can render content, like images and videos, which might be in yet another color space. And then your monitor has its own color space, which might not even match the color space of the operating system. You could even have multiple monitors, each with different color spaces. Yep.
你的电脑有操作系统，它使用一种色彩空间。但你的电脑还运行应用程序，这些程序可能会使用不同的色彩空间。这些应用程序可以渲染内容，比如图像和视频，而这些内容可能处于另一种色彩空间。然后你的显示器也有自己的色彩空间，甚至可能与操作系统的色彩空间不匹配。你甚至可能有多个显示器，每个显示器的色彩空间都不同。是的。

This is where color management comes in. Color management is the process of ensuring that colors are displayed consistently across different devices and applications. It involves using ICC profiles to describe the color capabilities of each device and application, and then converting colors between different color spaces as needed.
这就是色彩管理发挥作用的地方。色彩管理是确保在不同设备和应用程序中颜色显示一致的过程。它涉及使用 ICC 配置文件来描述每个设备和应用程序的色彩能力，然后在需要时在不同色彩空间之间转换颜色。

When you open an image in an application, the application will read the ICC profile embedded in the image and use that data to convert the colors to the target color space of the OS or display.
当你在一个应用程序中打开一张图像时，该应用程序会读取图像中嵌入的 ICC 配置文件，并使用这些数据将颜色转换为操作系统或显示器的目标色彩空间。

This is handled by something called the Color Management Module, which has a whole bunch of algorithms to convert between color spaces in it. The conversion goes through an intermediate device-independant color space, like the CIE XYZ, before being converted to the target color space.
这是由一个称为色彩管理模块的东西处理的，该模块包含大量用于在不同色彩空间之间进行转换的算法。色彩转换会先通过一个与设备无关的中间色彩空间（如 CIE XYZ），然后再转换为目标色彩空间。

Your operating system is in charge of coordinating all of this and compositing it together. We don't think about them this way, but our computers are just generating images 60 times a second and sending them to the display. The operating system is responsible for managing the color spaces of all the applications and devices, and converting colors between them as needed.
你的操作系统负责协调所有这些操作并将它们组合在一起。我们通常不会这样考虑，但我们的计算机每秒会生成 60 次图像并发送到显示器。操作系统负责管理所有应用程序和设备的色彩空间，并根据需要在这些色彩空间之间进行转换。

   ┌────────────────────────────────┐                              ┌──────────────────────────────────────────────────┐
   │              GPU               │                              │┌┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┬┐│
   └────────────────────────────────┘                              │├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤│
   │                │               │                              │├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤│
   │                │               │                              │├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤│
   ▼                ▼               ▼      ┌────────────────┐      │├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤│
   ┌────────────────────────────────┐      │                │      │├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤│
   │01010101010101010101010101010101│      │    DISPLAY     │      │├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤│
┌──┼─────────────────────────────┐────────►│   CONTROLLER   │──────►├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤│
│10101010101010101010101010101010│01│      │                │      │├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤│
│10101010101010101010101010101010│10│      └────────────────┘      │├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤│
│10101010101010101010101010101010│10│                              │├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤│
│10010101010101010101010101010101│01│                              │├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤│
│01010101010101010101010101010101│01│                              │├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤│
│01010101010010101010101010101010│01│                              │├┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┼┤│
│10101010101010101010101010101010│01│                              │└┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┴┘│
│10101010101010101010101010101010│01│                              └────────────────────  DISPLAY  ───────────────────┘
│10101010101010101010101010101010┼──┘                                                                                  
│10101010101010101010101010101010│                                                                                     
└───────  FRAME BUFFER   ────────┘                                                                                     

Ultimately, though, it's the color space of the display that is the limiting factor. If you are editing an image in a wide gamut color space, like ProPhoto RGB, but your monitor only supports Display P3, you won't be able to see the full range of colors in the image and you won't even know.
然而，最终起限制作用的是显示器的色彩空间。如果你在一个广色域色彩空间（如 ProPhoto RGB）中编辑图像，但你的显示器只支持 Display P3，你将无法看到图像中的全部色彩范围，甚至自己都不会意识到。

Confusing terms  令人困惑的术语

So we've defined a lot of confusing color terms already but there are a few more that are used interchangeably that actually have different meanings.
所以我们已经定义了很多令人困惑的颜色术语，但还有一些术语实际上是可互换使用的，但它们具有不同的含义。

When we describe how bright a color is, we might use different terms depending on the context:
当我们描述颜色的亮度时，根据上下文可能会使用不同的术语：

• Luminance: A physical measurement of the amount of light emitted or reflected by a surface, usually measured in candelas per square meter (cd/m², also known as nits). It's a component of the CIE XYZ color space and is used to describe the brightness of a color in a device-independent way.
  亮度：一种物理测量，表示表面发射或反射的光量，通常以每平方米坎德拉（cd/m²，也称为尼特）为单位测量。它是 CIE XYZ 颜色空间的一个组成部分，用于以设备无关的方式描述颜色的亮度。
• Brightness: A perceptual measurement of how bright a color appears to the human eye, which can be influenced by factors like hue, surrounding colors and lighting conditions.
  亮度：一种主观测量，表示人眼感知到的颜色有多亮，这会受到色调、周围颜色和光照条件等因素的影响。
• Lightness: A perceptual measurement of how light or dark a color appears to the human eye, relative to the reference white of the color space. It's often used in color models like HSL (Hue, Saturation, Lightness) or Lab* (where L* represents lightness).
  亮度：一种主观测量，表示颜色对人眼看起来有多亮或多暗，相对于颜色空间中的参考白色。它常用于 HSL（色相、饱和度、亮度）或 Lab*（其中 L*代表亮度）等颜色模型中。
• Value: A measurement of brightness relative to the maximum brightness for that color, often used in the HSV (Hue, Saturation, Value) color model. Differs from lightness in that it is not relative to a reference white but rather to the maximum brightness of the color itself. Confusingly, it is also sometimes used interchangeably with brightness, but in the context of HSV it refers to the maximum brightness of the color.
  数值：一种测量颜色相对于其最大亮度的亮度值，常用于 HSV（色相、饱和度、数值）颜色模型。与亮度不同之处在于，它不是相对于参考白色，而是相对于颜色自身的最大亮度。令人困惑的是，它有时也和亮度互换使用，但在 HSV 的语境中，它指的是颜色的最大亮度。

You can see the difference between lightness and value if you consider the different shapes of these color models. In HSL, the entire top of the cylinder is white, so the lightness is relative to that white point. In HSV, the top of the cone is the maximum brightness for that color, so the value is relative to that maximum brightness.
如果你考虑这些颜色模型的形状差异，就能看出亮度和数值的区别。在 HSL 中，圆柱体的顶部完全是白色，所以亮度是相对于这个白色点。在 HSV 中，锥体的顶部是该颜色的最大亮度，所以数值是相对于这个最大亮度。

When we describe the vibrance of a color, we might use different terms as well:
当我们描述颜色的鲜艳程度时，也可能使用不同的术语：

• Chromaticity: This is a two-dimensional representation of color that describes the hue and saturation of a color, without considering its brightness. It's often represented as coordinates in a chromaticity diagram, like the CIE 1931 chromaticity diagram.
  色度：这是一种描述颜色色调和饱和度的二维表示，不考虑其亮度。它通常表示为色度图中的坐标，例如 CIE 1931 色度图。
• Chroma: A measure of the colorfulness of a color, which is independent of its brightness, relative to the reference white of the color space.
  色饱和度：衡量颜色鲜艳程度的指标，与亮度无关，相对于色彩空间的参考白。
• Saturation: A measure of the colorfulness of a color, which is independent of its brightness, relative to the the maximum colorfulness of the color.
  饱和度：衡量颜色鲜艳程度的指标，与亮度无关，相对于色彩的最大鲜艳度。

Confusingly, saturation isn't used strictly correctly in the HSL or HSV color models, because they are transforms of RGB, which doesn't have chroma or saturation as separate components. In practice, this doesn't matter too much and you can just think of saturation as a measure of how pure a color is in that context.
令人困惑的是，在 HSL 或 HSV 颜色模型中，饱和度并不严格正确使用，因为它们是 RGB 的转换，而 RGB 没有将色饱和度作为独立分量。实际上，这并不太重要，你可以简单地认为饱和度是在该上下文中衡量颜色的纯净程度。

╌╌╌╌

So what have we learned? Digital color is a hot, complicated mess of different color spaces, models, and management systems that all work together to try make sure that the color that gets to your eyeball is somewhat close to what was intended.
那么我们学到了什么？数字色彩是一个由不同色彩空间、模型和管理系统组成的复杂混合体，它们协同工作，试图确保到达你眼睛的色彩与预期值尽可能接近。

But the cool thing about color is that none of that really matters. You can care about it as much, or as little, as you want. It's not like you could pick a color that a user won't see - software is there to make sure that they always see something. Just pick colors that are legible and look good to you and trust that the software will take care of the rest.
但色彩的魅力在于，这些都不重要。你可以选择关心多少，或者不在乎多少。你不可能选一个用户看不到的颜色——软件会确保他们总能看到某种颜色。只需选择那些清晰易读且符合你审美的颜色，并相信软件会处理好其他事情。

╌╌ END ╌╌  ╌╌ 结束 ╌╌