The best method that we have for defining color is by using math. Specifically, mind-boggling mathematical models called color spaces that use geometry to assign colors as a fixed point that we can reference, ensuring the blue that I see is the same blue you see. As a creative-leaning person who can barely split a bill without a calculator app, all that math is extremely daunting.
The good news is that computing software will do all these complicated calculations for us, allowing us to rely on our eyeballs to pick whatever colors look best. The bad news is that there’s an equally daunting number of color spaces to choose from, and they’re all optimized for different tasks across web design, photography, video editing, physical printing, and more. And if you select the wrong one at any point between creating, editing, and viewing something, it can really mess with what colors are supposed to look like.
It’s a lot to absorb. Thankfully, most of us will only ever need to understand the basics, and that knowledge can be useful to everyone — not just creative professionals. Learning about it can help you buy your next phone, TV, laptop, or computer monitor, and get the most out of your viewing experience.
The first hurdle is to learn the difference between a color model, space, and gamut. A color model is the entire system used to define how a color is represented. Here are some examples:
CMYK (Cyan, Magenta, Yellow, Key): This follows a similar concept to the color wheel theory you probably learned in art class. By combining these colors (key generally being black) in differing quantities, we can achieve colors closer to the range that can be seen by the average human eye compared to mixing red, yellow, and blue primaries together like a painter, which is its own cruder system called RYB.
Both of these systems are called “subtractive color mixing” because they’re calculated by subtracting how much light can pass through after something is added, such as dyes, inks, and paint. That’s also why paper is typically white and why printing and dyeing methods will appear more vivid when applied to the lightest possible base. This system doesn’t actually need black to work because CMY can achieve that alone by repeated layering. Including black in the system directly is useful for things like printers, however, as the amount of ink required to do so would be wasteful and turn printed paper into a soggy mess.
RGB (Red, Green, Blue): This is an additive color model used in electronic devices because it does the opposite — instead of subtracting light from a white background, it adds light in differing frequencies to a black display. Because black is the complete absence of light, this made true blacks difficult to display on, well, displays, because the entire thing needed to be blasted by a backlight, until technology like OLED was developed that provided each pixel with its own teeny light source.
HSL / HSB / HSV (Hue, Saturation, Lightness / Brightness / Value): This will be familiar to anyone who has adjusted their webcam or used a color picker on apps like Adobe Photoshop, and for good reason. While RGB is easy for machines to understand, HSL was made to be human-readable, making colors easier to manipulate to find the desired result. Hue is the tone of the color itself, measured on a wheel as degrees, with saturation measuring the intensity between fully vibrant and grayscale, and lightness / brightness / value measuring between zero percent for black and 100 percent for white.
Look across the three examples, and you can see what makes a color model a color model — there are numerous ways to make specific colors, but some methods will work better than others for certain applications, such as dyeing cloth, printing labels, or color-correcting video footage. Think of them as different journeys that all reach the same destination.
Color spaces are built on color models and define a specific range of displayable colors, often within the limitations of the applications they’re designed for, such as the display panels on computer monitors and televisions. These exist because colors really are like math — you can make a nearly infinite number of small changes to colors, but doing so would be both demanding to calculate and kind of pointless because some colors simply can’t be detected by the human eye. CIE 1931 XYZ, a color space created to replicate colors based on human perception, has since gone on to become the basis for almost every other modern color space.
“Color spaces serve different purposes.”
But wait — if we can already plot essentially every color that we can actually see, then why don’t we just make a single color space around it that can be used for everything? Surely that would make all of this less confusing. Well, we technically could create a “universal” solution, but every color space is made for different purposes, and they impact how everything is displayed, from the shades of a website to the color grading of a TV show. We would be sacrificing the ability to optimize anything if we did.
“While it is possible to create a ‘universal color space’ this is not necessarily advisable,” Eric Chan, a fellow of digital imaging at Adobe, told The Verge. “Color spaces serve different purposes. Some are device-dependent, like displays, cameras, and printers. Some are device-independent. Some are used for interchange (e.g., between apps); some are used for editing.”
sRGB, for example, was jointly created by HP and Microsoft in 1996 and is currently the standard color space for almost everything you see on the web, providing a sensible range of colors to ensure that color is consistent across as many devices as possible.
If you’re editing a photograph that will only be posted online, then sRGB is a solid choice. But if you want to print that photograph professionally, you may choose Adobe RGB instead — another RGB-based space created by Adobe with a wider color range that can support colors achieved through CMYK printing. Another option is CIELAB, or Lab, which was designed to be a “perceptually uniform space” that’s independent of devices, meaning that coordinates used to specify the color will produce the same color wherever they are applied, making CIELAB useful for advanced color grading.
Rec.709, Rec.2100, and DCI-P3 are three more color spaces that are optimized for video and display technology. Rec.709 was created to define the color range that can be achieved by high-definition TV, while Rec.2100 is a newer, wider color standard for ultra-high definition TV, HDR, and future video technologies. DCI-P3, also known as Display P3 or just P3, was created for use in digital movie theaters and sits somewhere between the two.
The technology used across these applications can vary; to provide everyone with the best possible experience, color tools must vary, too. “My analogy is like a language,” says Chan. “Yes, it’s possible to create a ‘universal language,’ but that doesn’t necessarily make it more useful or practical than the ones we already have.”
1/3
Gamut comes into the mix when we measure just how capable something actually is at displaying every color within a space. By definition, a gamut is just a range, displayed as a percentage that represents how much of a color space can be captured by a device.
If you’ve purchased a computer display recently, you may have seen that a percentage of color spaces will be advertised with the product. The BenQ PD3225U Designer Monitor can cover 98 percent of P3, 99 percent of sRGB, and 99 percent of Rec.709, for example, while the much cheaper Dell S2425HS only specifies that it can cover 99 percent of sRGB. That can give us a quick indication of how good a display is for certain creative tasks — if sRGB is higher than P3, then it’ll be better for graphic designers than video editors, for example, but gamut itself can have diminishing returns.
“Wider is better, but only to a point,” says Chan. “In terms of TV resolution, the jump from VGA to HD was huge and obvious to most people. The move from HD to 4K is less noticeable. The move from 4K to 8K is even less noticeable for most people. Related to wider color space is higher dynamic range (HDR). In my view, this is more easily noticeable to most people, compared to a purely wider gamut.”
You can think of it like frame rates — you can only go so high before you stop noticing the benefit. While color spaces like OKLCH exist that provide wider gamut support than sRGB, it would need far greater support across displays and web software before it can rival the current standard, and sRGB is still plenty sufficient for most applications.
This is all just scratching the surface of how color is displayed. Luckily, the layperson won’t need to understand all that much because technical color work isn’t designed for them, and even people in design industries typically only have to learn about the spaces specific to their job. The rest of us can let computers do the hard part and appreciate that a lot of work happens behind the scenes to bring more color to the world around us.
