Color model vs color space
The first step is to distinguish between color models and color Spaces. Color model refers to RGB, HSL(HSV), etc., which is a way to describe colors.
For example, pure red, how do you describe it in RGB? (1, 0, 0) or (255, 0, 0) that use HSL description with hue, saturation, lightness of the dimension to describe.
Color space (gamut) is sRGB, Adobe RGB, Display P3, etc. Let’s talk about what these things are.
All colors recognized by the human eye (CIE and Gamut)
We have to describe colors that the human eye can see, and if the human eye can’t see colors, there’s no point in describing them. The color seen by the human eye is actually the light emitted by the object, so we must first know how many colors (light) the human eye can see, or how big the range is.
The image below shows the visible spectrum as defined by CIE 1931 Color Space, which means that all colors of visible light that are visible to the human eye are represented here.
So, can the colors of the images printed by our artificial display media, such as monitors and printers, be the same as the real colors? Let’s say there’s a red flower in the world that looks this red, and let’s say the red is A, can a printer print that red? Can the monitor come out this red?
The obvious answer is yes, but no. Yes because if the technology is infinite development and improvement, then one day, the human display may be possible, not because with the current state of the art, the display can not be fully displayed in all colors.
In other words, our display device can only display a portion of all visible colors right now. What is that portion? There are various standards defined, called gamut, such as sRGB, Adobe RGB, Display P3 and so on.
The following figure shows a comparison of several gamut ranges.
Data storage and transformation
With all that said, how do we store the color data in an image, and how does it interact with different color Spaces, and how does it get presented to us?
An image’s data is always stored as a bitmap.
What is a bitmap? Bitmap can be understood as a two-dimensional array. The size of the array m * N is the width and height of the image. The elements in each array are the data for each pixel of the image.
Of course, there are various forms for the composition of each pixel to meet the special requirements of volume or performance. For example, the most common is of course RGBA8888, which means that a pixel is represented by 4 bytes and each component is 8 bits. In other words, the value range is 0-255, a total of 256 cases. Except for the alpha channel, a total of 256 * 256 * 256 colors can be expressed.
In addition to the color space information, this picture is displayed directly in a LinearRGB color space.
To do some experiments, first generate a 256 * 4 image in python with the first line going from (0,0,0) all black to (255,255,255) all white. The second, third, and fourth rows increment only the RGB channels respectively, also from 0 to 255, resulting in the following image. Open the image directly, it will be displayed, use the screen capture tool or color picker to take the color, and find that the color it expresses is exactly the same as the color our program wrote.
If we open it in Photoshop, there are subtle color differences.
It can be seen that in Photoshop (above), the dark part on the left seems to be less dark than the one below. At this point, if we use the screen color picker to look at the pixels, we find that the color is not the same as the color written by the program.
The workspace
This involves the concept of a workspace. The workspace means that an image data is displayed in my system, what color space should be used to express it? For example, in IOS, the workspace is linearRGB, and in my Photoshop, we can modify the current color space by going to Edit -> specify the configuration file.
As shown in the figure above, you can see that we are now displaying in sRGB color space. In other words, the color data of each pixel taken from the bitmap of the image are linear RGB values, and then displayed in the color space of sRGB. There is a transformation here. What is this transformation?
See the information in this document: Understanding Color Spaces and Color Space Conversion
Gamma correction
As you can see, the conversion of linear space to other color space is characterized by a POW operation, also known as a gamma correction.
If I draw the gamma corrected function curve and compare it with the perfectly linear one, I can see that it stretches the darker areas, increasing the contrast, and shrinks the lighter areas. This is because the human eye is sensitive to the dark areas, but not to the lighter areas.
Let me use a picture as an example. As you can see in the picture of the dog below, when it is completely linear, the details in the dark part are all blurred and hard to see. When the G begins to rise, the details in the dark part are gradually drawn out and the content is clearly visible. However, the sky outside is in a bright area, and its range compression does not affect the perception at all.
Going back to the original python-generated color card image, let’s look at the information in this image file.
Then we open the configuration file display p3 in PS and save it as another image. Now open the introduction information again, as shown in the image below, which now has a color description file.
When we open up the two images and color them separately, we can see the subtle difference.
So when an image goes from data to light that shows a certain color, there are two components that work together.
One is the data itself, how the data itself is stored, RGBA8888 or the latest 10bit, 12bit HDR technology, which determines the binary information of each color data itself.
Once read out, the color space defaults to a linear color space. But if you have A configuration file that specifies the color space, it will eventually be transformed from one color space A to another color space B, and you’ll end up with another color.
Finally, a picture to sum up.
Appendix: Conversion functions
LinearRGB -> sRGB
Source: www.mathworks.com/help/images…
F (u) = – f – (u), u < 0 f (u) = f (-u), u < 0 f (u) = – f – (u), u < 0 f (u) = c ⋅ u, 0 or less u < df (u) = c \ cdot u, 0 \ le u < df (u) = c ⋅ u, 0 or less u < d f (u) = a ⋅ uy + b, u p df (u) = a \ cdot u ^ y + b, u \ ge df (u) = a ⋅ uy + b, u d or higher
A = 1.055A = 1.055A = 1.055b =−0.055b = -0.055b=− 0.055C =12.92c =12.92c = 12.92d =0.0031308 D =0.0031308 Y =1/2.4y Y = 1/2.4 = 1/2.4
LinearRGB -> Adobe RGB(1998)
Source: www.mathworks.com/help/images…
V = uy, u = u ^ 0 v or y, u \ ge = 0 v uy, u p = 0 v – – (u), y u < 0 v = – (-u) ^ y, U < 0V =−(−u)y,u<0 y=12.19921875y = \frac{1}{2.19921875}y=2.199218751