Color Spaces on the Web: A Developer's Guide

What Is a Color Space?

At its core, a color space is a mathematical model that defines how colors are represented using numerical values. Think of it as a multi-dimensional coordinate system where each point corresponds to a specific color.

If that’s abstract, imagine a cube: each axis (Red, Green, Blue) represents a color component. Moving around within that cube means changing the mix of these values, which gives you a different color.

Ideally, if you picked two points (colors) in that space and drew a line between them, every point on that line would be a perceptually even mix, resulting in a smooth and visually balanced gradient. A color space that behaves like this is called perceptually uniform.

But here’s the catch: no universally accepted, perceptually uniform color space exists (especially not in just three dimensions). That’s why new color spaces keep emerging, each trying to solve this challenge.

Let’s explore some of the most important ones.

sRGB: The Web’s Legacy Color Space

Developed in 1996 for Cathode Ray Tube monitors, sRGB has been the default color space on the web for over 25 years. It’s what you’re using when you write colors in rgb(), hsl(), hex codes, or named colors in CSS.

Source (CC BY-SA 3.0)

The triangle above shows the sRGB gamut (the range of colors it can represent) on the CIE 1931 Chromaticity Diagram. As you can see, it only covers a portion of visible colors. Colors outside this triangle (but inside the diagram) are real but unrepresentable in sRGB.

While reliable and widely supported, sRGB is limited. Modern displays and design needs demand wider gamuts and more precision, prompting a move toward newer RGB-based color spaces:

• Adobe RGB (a98-rgb)
• Display P3
• Rec. 2020
• ProPhoto RGB

Each expands the gamut somewhat — but they all inherit the same perceptual non-uniformity of sRGB.

CIELAB: A Step Toward Uniformity

Enter CIELAB (or simply Lab), developed to address the non-uniformity of RGB spaces. In Lab, colors are described using:

• L* (Lightness)
• a* (Green–Red axis)
• b* (Blue–Yellow axis)

The Lab color space is designed to cover the entire range of human vision and attempts to be perceptually uniform.

Source (CC BY-SA 4.0)

Despite its ambition, Lab isn’t perfect. One particularly frustrating issue: adjusting the lightness of blue hues can result in unexpected purples. This is often referred to as the “blue turns purple” problem.

OKLAB: The New Contender

To overcome these flaws, OKLAB was introduced as a modern take on perceptual uniformity. Unlike Lab, it’s designed based on color mixing theory, not just human perception. This makes OKLAB especially well-suited for use cases like blending, gradients, and dynamic theming.

With browser support for color-mix() steadily growing, developers no longer have to rely on clunky preprocessor functions like lighten() or darken(). OKLAB provides a perceptually consistent foundation for modern CSS-based color manipulation.

Conclusion

As frontend development continues to evolve, understanding color spaces is no longer just a niche interest. It’s becoming essential for creating visually consistent and accessible user interfaces. While sRGB has been the reliable default for decades, its limitations in representing the full spectrum of visible colors make it increasingly outdated. Alternatives like Display P3 and Adobe RGB offer broader gamuts, but still fall short in perceptual uniformity.

CIELAB and especially OKLAB represent a shift toward more human-centered, perceptually uniform color models, making them far more suitable for tasks like blending, interpolation, and dynamic theming. With growing browser support for modern CSS features like color-mix(), it’s a great time to adopt these advanced color spaces in your workflows.

Ultimately, choosing the right color space depends on your use case, but having a deeper understanding of how colors are represented, perceived, and manipulated gives you a real edge in building more refined, accurate, and beautiful interfaces.