Glancing up at the wall in the early days of preschool, we discover the color wheel—the colors of the rainbow wrapped neatly into a circle, and each color blending into the next. Convenient, isn’t it? All the colors we can see, and all mixed from only three: red, yellow, and blue.
This symbol is so ingrained in our minds that most of us, even as adults, can recall which two colors combine to make green. But our understanding of color and of color relationships is unfortunately built on a misconception—one that doesn’t fully capture the true nature of reality. That is, blue and yellow don’t make green, at least not in the most fundamental sense.
Foundations
Coming into graphic design with a background in oil painting, I used the traditional color wheel frequently as a reference for building harmonizing color palettes for clients and their brands. Complementary colors—color pairs that seem to naturally balance and contrast each other—reside on opposite sides of the wheel. If we start with blue and want a color that pops when placed next to it, we travel 180 degrees from blue to find orange. Alternatively, if you combine all complementary colors equally, you get gray. It’s an incredibly useful reference, but its representation as a circular structure has limitations that aren't ideal for practical applications.
To better navigate the color wheel, we can reconstruct it as a triangle, with the three primary colors positioned at each vertex. To mix purple, we can navigate halfway between red and blue on a straight path, representing an equal mix of red and blue pigment (let’s assume all pigments have equal strength for simplicity). From purple, we can mix a deep blue-gray by navigating toward green. To confirm this, we’ve established that the center of the triangle is a neutral gray (a mix of all primaries), and halfway between purple and green lands us between blue and gray.
If we extend our triangle by adding a white vertex above the triangular plane and a black vertex below, we’ve now created a 3-dimensional color space—in this case, a triangular bipyramid—which can be thought of as two three-sided pyramids joined at their bases. In a theoretically perfect world, every possible color could be mixed by navigating this structure—assuming, of course, that you’re working with paint!
Interactive model [desktop only] at: https://pigment-mixer-dc30552d0009.herokuapp.com/
But in the digital space, we don’t have paint—we don’t have pigment at all! We have light. Where before we mixed pigment that interacts with light, now we’re playing with the fundamental ingredients of the electromagnetic spectrum itself. Knowing this, shouldn’t our understanding of color—of color relationships, of color complements—exist in a framework of light rather than pigment? Let’s forget what we know of color mixing for the moment and instead hone our understanding of color vision.
What is color?
Color happens not in the outside world, but within. We tend to envision the world as a fully colorized realm that we simply “tap into”, and that a typical human sees reality and therefore color as it exists in its truest form. But in truth, what has been assigned “green” in our minds has nothing to do with the outside world at all. In a million years, what humans today “see” as green could resemble something more akin to “purple” or even an entirely new color that we can’t even imagine.
Physiologically, our eyes and brains are tuned to red, blue, and green. But, instead of interpreting these signals directly, we process them into opposing color channels: blue-yellow and red-green. This concept, known as opponent-process theory, explains that each channel operates like a balance scale. The blue-yellow channel can register either blue or yellow, but not both simultaneously. Think of a DJ mixer sliding between two records—record Y (yellow) and record B (blue). When record B volume increases, record Y decreases, and vice versa.
What do you suppose we humans “see” when our brains receive balanced inputs on the blue-yellow channel? We see white. Perhaps you’ve already intuited this; ever shopped for a lightbulb and compared warm (yellow) emitting bulbs vs cool (blue) emitting bulbs? Or used white balancing to add warmth to an overly blue photograph? Our blue-yellow channel functions in such a way that, when evenly weighted, results in a neutral tone—our perception of white or gray. This balancing act is essential for interpreting the colors around us and leads to a fundamental insight: by understanding these opposing channels, we can map colors in a way that aligns with our natural perception.
Lab color space
Now that we better understand the way our brain processes color, let’s map these channels (A for red-green and B for blue-yellow) on perpendicular axes on a 2D plane, and add a vertical axis for lightness (L). This color space we call Lab color, or CIELAB, developed by the International Commission on Illumination (CIE) in 1976 to create a color model that more closely aligns with the way humans perceive light. In this space, colors that are 180 degrees apart on the a/b plane represent perceptually opposite hues.
Leveraging Lab space means that we can create color palettes influenced by the science of light and human perception versus traditional paint mixing principles. To do this, I’ve sampled a subset of sRGB colors (the standard color space for web and digital applications) into Lab color space. Each color is selectable, and the output automatically pairs with its closest perceptual complement within the current lightness level. The up/down axis represents L (lightness), while the a and b axes represent blue/yellow and red/green. Not every color in Lab color space can be represented within sRGB, given that Lab color technically covers the entire human gamut and far exceeds this model.
Interactive model [desktop only] at:
You may notice the irregular shape that results when we model color in this way. This is because we perceive some colors more easily than others, and Lab accounts for this by stretching or compressing certain parts of the color space. The advantage is that we can navigate between colors more evenly; a unit change in any direction results in roughly the same perceptual change. Additionally, we can make tonal adjustments (lightness) without affecting perceived hue. Where color complements based on the color wheel or based on sRGB can sometimes feel jarring or uncomfortable, palettes designed in Lab color space often leads to more pleasing and harmonious results.
Looking forward
While researching this topic, I discovered there have been recent developments in perceptual color modelling. Introduced by Björn Ottosson in December 2020, Oklab and Oklch have been included with the CSS Color Module Level 4 specification to provide even better perceptual uniformity specifically for digital applications. Designers can implement them right now using the following syntax:
While Oklab uses a and b axes as we discussed, Oklch swaps these out for chroma (color intensity) and hue (angle in degrees, with 0° representing red, 120° green, etc), making it more natural and accessible for color adjustments in digital design.
As designers, it’s essential that we draw from a diverse toolset, blending the rich traditions of classical arts with the insights of modern science. By incorporating our knowledge of pigment-based models, additive (light-based) systems, and psychology, we’re better equipped to create work with greater balance, harmony, and precision. The future of color in art and design will be a union of creative intuition and a deep understanding of human perception.
Comments