CSS: Color Everything

I’ve had the chance to edit many of the new color entries for the [CSS-Tricks Almanac](https://css-tricks.com/almanac/). We’ve published several and more are coming, including a [complete guide on color functions](https://css-tricks.com/css-color-functions/).

I must admit: I didn’t know much about color in CSS (I was still using `rgb()`, which isn’t considered cool anymore), so it’s been a fun learning experience. One thing I noticed was how extensive the glossary of color is, especially the “color” concepts. There are “color spaces,” “color models,” “color gamuts,” and basically a “color” something for everything.

They are all somewhat related, and it can get confusing as you dig into using color in CSS, especially the new color functions like `contrast-color()` and `color-mix()`. I wanted to create the glossary I wish I had when I first heard about each concept, so anyone can check it whenever they forget what a specific “color” thing is.

As a disclaimer, I’m not trying to explain color, or specifically, color reproduction, in this post; that would probably be impossible for someone like me. Instead, I want to give you a broad picture of some technicalities behind color in CSS, so you feel confident using functions like `lab()` or `oklch()` while also understanding what makes them special.

### What’s a color?

Let’s slow down first. To understand *everything* in *color*, we first need to understand the *color* in *everything*.

While it’s useful to think about an object being a certain color (watch out for the *red* car, or cut the *white* cable!), color isn’t a physical property of objects, or even a tangible thing. Yes, we can characterize *light* as the main cause of color[^1], but it isn’t until visible light enters our eyes and is interpreted by our brains that we perceive a color. As Elle Stone said:

> Light waves are out there in the world, but color happens in the interaction between light waves and the eye, brain, and mind.

Even if color isn’t a physical thing, we still want to replicate it as reliably as possible, especially in the digital era. If we take a photo of a beautiful bouquet of lilies (like the one on my desk) and then display it on a screen, we expect to see the same colors in both the image and reality. However, “reality” here is misleading since the *reality* of color depends on the viewer. To solve this, we need to understand how light wavelengths (something measurable and replicable) create different color responses in viewers (something not so measurable).

Luckily, this task was already carried out 95 years ago by the International Commission on Illumination (CIE, by its French name). I wish I could get into the details of the experiment, but we haven’t gotten into our first color thingie yet. What’s important is that from these measurements, the CIE was able to map all the colors visible to the average human (in the experiment) to light wavelengths and describe them with only three values.

Initially, those three primary values corresponded to the red, green, and blue wavelengths used in the experiment, and they made up the CIERGB *Color Space*, but researchers noticed that some colors required a negative wavelength[^2] to represent a visible color. To avoid that, a series of transformations were performed on the original CIERGB and the resulting color space was called CIEXYZ.

This new color space also has three values, X and Z represent the chromaticity of a color, while Y represents its luminance. Since it has three axes, it makes a 3D shape, but if we slice it such that its luminance is the same, we get all the visible colors for a given luminance in a figure you have probably seen before.


This is called the *xy chromaticity* diagram and holds *all* the colors visible by the average human eye (based on the average viewer in the CIE 1931 experiment). Colors inside the shape are considered real, while those outside are deemed imaginary.

### Color Spaces

The purpose of the last explanation was to reach the CIEXYZ *Color Space* concept, but what exactly is a “color space”? And why is the CIEXYZ *Color Space* so important?

The CIEXYZ Color Space is a mapping from all the colors visible by the average human eye into a 3D coordinate system, so we only need three values to define a color. Then, a **color space can