Understanding Color Spaces in Web Development

1. Overview

As someone with color vision deficiency, I sometimes distinguish colors differently from others, and there have been times when I mistook the lack of color difference for a markup issue. Let's explore what happens during the process of human color perception and color representation that causes such distortions. Additionally, we'll examine how colors are defined.

2. What is a Color Space?

To understand color, we need to know where color exists. The colors we commonly refer to, such as red and blue, are close to our psychological responses. To define what exactly red is, we need the concept of a color space.

A color space can be seen as a conceptual tool for representing colors. It defines what we call a color and determines which colors are considered the same, making it possible to compare and compute colors. Here, the term "space" refers not to a physical space but to a conceptual space, like a vector space, where elements called colors are defined. Detailed examples and concepts of color spaces can be found in References [1][2][3][4][5][6].

3. The Process of Perceiving Color

By understanding the process through which humans perceive color, we can explore how to represent colors. The process of perceiving color can be broadly divided into two stages: [1] the light detection stage, where the eye receives light, and [2] the color perception stage. If we can quantify the response to different colors in the perception stage, we can roughly define colors. Let's use the concept of tristimulus values to quantify the response to colors.

3–1. Light Detection

Our body contains three types of photoreceptor cells as follows:

Intrinsically photosensitive retinal ganglion cells
Rods
Cones

(https://en.wikipedia.org/wiki/Intrinsically_photosensitive_retinal_ganglion_cell)

Among these, cones are responsible for distinguishing colors. It is commonly known that there are three types of color sensors. Although the approximate ratios can be represented as below, they cannot be considered exact figures.

red: 64%
green: 32%
blue: 2%

The definitions of each color (red, green, blue) used above refer to the average colors we commonly talk about. These are used to facilitate understanding of the wavelength ranges each receptor absorbs and are not exact definitions of the colors.

The wavelengths of light that each receptor responds to can be represented as follows:

The monochromatic wavelength of each color

The monochromatic wavelength of each color: https://ceciliavision.github.io/graphics/a6/

The data from the light absorbed by each type of cone cell is synthesized to perceive a single color. So, what amounts of each wavelength need to be absorbed for us to perceive the colors we refer to as red, blue, and green?

3–2. Color Perception Stage

When humans perceive color, we can get closer to defining colors by quantifying the response levels of different types of cone cells to specific colors. It is important to note that even with the same combination of wavelengths, the distribution and response levels of cone cell types can vary among individuals, meaning not everyone perceives colors in the same way.

For example: L: 0.6 means this color is red ⇒ X

Let's quantify the response levels of receptors using the concept of tristimulus values.

‼ Tristimulus Color Theory

Using the three types of receptors that respond to short (S), medium (M), and long (L) wavelengths, we can represent human color perception. This allows us to measure and quantify the subjectively expressed colors, a process known as colorimetry. For more information on tristimulus values, refer to References [7][8].

The graph below illustrates the quantified response levels of each type of receptor (by wavelength).

Percentage of light absorbed by each cone type (s: short wavelength, m: medium wavelength, l: long wavelength)(https://commons.wikimedia.org/wiki/File:Population_weighted_cone_spectral_sensitivities.svg)

4. How is Color Created?

How is color created? Can all colors be represented by combining primary colors like RGB? The answer is no. To understand the principles of color creation, let's take a brief look back into history.

From ancient times to the modern era, it was believed that all colors could be created by combining a few primary colors, and many efforts were made to prove this. Numerous abstract theories emerged during this process. However, this notion was overturned by Newton's optics. He defined color through the concept of light.

Newton

Newton overturned abstract and complex color theories with his work in "Opticks." He explained color through the refraction of light. Although Newton believed in the existence of primary colors of light during his explanation of color, this was incorrect (Appendix [1]).

https://www.biography.com/.image/t_share/MTU4NDAxMjY5ODkzOTY1NzU5/english-mathematician-physicist-and-astronomer-author-of-the-theory-of-terrestrial-universal-attraction-here-dispersing-light-with-a-glass-prism-engraving-colorized-document-photo-by-apic_getty-images.jpg

Below is a well-known image often associated with a prism. It was thought that colors arise from the combination of various wavelengths of light, as illustrated by this example.

https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Prism-rainbow-black-2.svg/800px-Prism-rainbow-black-2.svg.png

The combination of lights mentioned above should be distinguished from the color combinations we generally think of. This is a commonly misunderstood aspect, so let's clarify it.

Color mixing

Color mixing can be divided into 1) Additive color mixing and 2) Subtractive color mixing. The perception of color by the eye means that light reflected from an object enters the eye.

Additive color mixing occurs when colors are created by combining different wavelengths of light. When different wavelengths of light are combined, a new color of light emerges. In other words, additional wavelengths are added.

Subtractive color mixing occurs when two substances (such as paint or powder) are combined, and the wavelengths of light that are commonly reflected are excluded while the remaining wavelengths are blocked. In other words, the wavelengths themselves are reduced.

https://www.color-meanings.com/wp-content/uploads/additive-subtractive-color-mixing.png

So, can all colors of light be created using the spectrum of decomposed light as Newton thought?

Color Matching Experiment

The answer is no. This can be demonstrated through the following experiment.

Purpose of the Experiment: To find the primary colors that can represent all colors.
Method of the Experiment: Participants are asked to create the same color as the target color by adjusting the saturation of the given RGB colors.

https://www.handprint.com/HP/WCL/IMG/satmix.gif

Primary Colors Used in the Experiment: [R: 645nm], [G: 526nm], [B: 444nm]
Experiment Results: There are colors that cannot be created by a combination of RGB primary colors. In such cases, the experiment is conducted as follows: Test light (mixed color) + primary color = primary color + primary color

💡 The gamut refers to the complete set of colors that can be accurately represented.

https://www.handprint.com/HP/WCL/IMG/CIE64.gif

Subsequent experiments have proven that there are no primary colors that can represent all colors. However, each color space has its own set of primary colors.

5. Reasons for Perceiving Colors Differently

As someone with color vision deficiency, I cannot see the highlighted parts in the middle. To perceive color, the process involves 1) Color Production ⇒ 2) Processing ⇒ 3) Output ⇒ 4) Perception. Distortions can occur during this process.

Color Production: What color space is used? (Web uses sRGB: https://en.wikipedia.org/wiki/SRGB)
Processing: What transformations have the values undergone to display on the screen? (e.g., color matching, recalculating colors for areas outside the gamut)
Perception: What is the state of the observer's receptors?

For example, a color value represented in sRGB code undergoes a color matching function to correspond to the CIE XYZ color space. If necessary, it also undergoes a color matching function to ensure the display can accurately represent the color.

Why has the Web used sRGB for so long? The web has used sRGB for a long time because support for other color spaces with wider gamuts is limited on user displays. Generally, only 8 bits are used to represent colors. There are numerous reasons for this (A Standard Default Color Space for the Internet — sRGB).

How are colors outside the gamut range displayed on subpar displays?

On less capable displays, colors outside the gamut range are displayed by selecting different matching functions and using weights to find the closest possible color.

Source: https://www.benq.com/en-ap/knowledge-center/knowledge/color-gamut-monitor.html

Additionally, sRGB is commonly used because it forms a narrower gamut than the color spaces used by most displays, making it more universally applicable.

6. Can Everyone See the Same Color?

Is it possible for everyone to see the same color? It is still a distant goal for everyone to perceive colors exactly the same way. Individual differences in receptors mean that people perceive colors differently, and those with color blindness or color vision deficiency require additional devices to perceive a broader range of colors. Additionally, it is difficult for everyone to view light in the same environment, as factors like saturation, brightness, and luminance also influence color perception.

However, efforts are being made in various fields. There are color spaces, such as CIE LAB, designed to ensure that colors do not change regardless of the display or print medium (CIELAB color space — Wikipedia).

7. Response of the Web Ecosystem

Safari currently supports the LAB color space. Additionally, CSS 4 is in the process of adding these specifications. Soon, we will be able to see a wider color gamut on the web.

Color Space Manual

1. Overview

2. What is a Color Space?