Are there more shades of red or blue?

• RGB: rgb(171 179 114)
• Hex: #ABB372
• Color: color(display-p3 0.67 0.7 0.45)
• HSL: hsl(75 37% 60%)
• OKLCH: oklch(74% 0.087 115)

This article is an adaptation from a presentation I gave.

Here are some different shades of red and blue:

We're gonna answer a seemingly simple question! Are there more shades of red? Or are there more shades of blue?

But before we can answer that, we need to answer a different question first... how do you measure temperature?

And, if you're a web developer like me, I'm gonna try and convince you why we should move away from using RGB and Hex notation for colors!

• How do you measure temperature?
• Is it possible to measure "shade"?
  • According to physics
  • Why physics can't help us
  • According to vision
  • According to code
• Different Ways to Notate Color
  • Shortcomings of RGB and Hex
  • More colors with P3
  • Hue, Saturation, and Lightness
  • Perceptual Uniformity with OKLCH
• Are there more shades of red or blue?
• References

July 2023 was a very hot summer for everyone. Well, perhaps except for our southern hemisphere friends. How do we actually know how hot it was?

It was hot when I made this presentation.

Thermometers are able to measure temperature. Perhaps we can just get one, toss it in the grass, and wait for it to settle! Right?

Nope!

We're interested in the temperature of the air, and unfortunately heat can come from different places.

• The ground gives off heat. If the thermometer sits on the ground, then we're accidentally picking up that heat.
• The Sun also gives off heat^{[citation needed]}. If the thermometer sits in the sun, it gets biased by the sun's radiation.

To accurately measure the temperature outside, you have to measure the temperature in the shade! This is officially done using what are called Maximum-Minimum Temperature Systems.

Reference: National Institute of Standards and Technology

So we measure temperature in the shade.

Can we measure shade itself?

Here is a random picture of my yard with a cute animal in it.

We know that the grass in the shade and the grass in the sun are the same green color, yet they appear different to us when viewed in isolation. What we are seeing are different shades of green.

To measure shade, you need a way to measure differences in color. What can science tell us about how to measure colors?

Physics tells us:

1. Color comes from light.
2. Light is a wave.
3. And waves can be measured!

Reference: National Aeronautics and Space Administration

Since light it a wave, it has a wavelength, a measure of length from one valley to the next valley. Different wavelengths of light represent different colors. For example, here are the ranges of wavelengths for red, green, and blue light:

The wavelengths of red, green, and blue light.

Oh hey, let's just focus on red and blue for a sec. After all, we're on the vainglorious quest to discover which color has more shades!

• Red spans 125 wavelengths.
• Blue spans 35 wavelengths.

Therefore, red wins! Right?

Nope!

Just looking at wavelengths does not tell the whole story. Turns out, color is more complicated than that!

• What about darkness? Two shades of green may have the exact same wavelength, and yet one will appear darker than the other.
• What about saturation? A single wavelength cannot describe how saturated a color appears.
• Is purple more red or more blue? When does a color stop being considered "blue"?

And furthermore, if we zoom in on the electromagnetic spectrum, we notice an interesting omission. Where is pink??

There is only red, orange, yellow, green, blue, and violet.

These questions teach us a very important lesson about color.

Color is not light.

Color is how we perceive light.

At the back of our eyes are special cells that are responsible for detecting different colors of light. These are called cone cells, and there are three types sensitive to red, green, and blue light.

Reference: American Academy of Ophthalmology

1. When light enters the eye, the cone cells react differently depending on the light they receive.
2. Light that is more red, for instance, triggers the red cone cell more than it triggers the green cone cell.
3. The brain interprets the relative strengths of these cellular signals as a specific color!

So, knowing all this, where does pink come from? Pink is an invention of the brain! It's just how we perceive a relatively equal amount of red and blue light.

Understanding that color is how we perceive light gets us very close to a mechanism for quantifying color. And once we can quantify colors, we can finally determine who wins the red versus blue battle!

As a programmer, in order display the right colors on your computer screen, we need a way to quantify that color. How we've been representing color in code relates to how computer screens are designed, and how screens are designed relates to how our eyes work.

Just as our eyes detect red, green, and blue light, screens vary the relative amounts of red, green, and blue light they emit.

Your screen is actually compozed of very tiny red, green, and blue lights called subpixels. For pink light, the screen maximizes the brightness of the red and blue subpixels and minimizes the brightness of the green subpixels.

Reference: Subpixels by Pengo

In code, we can therefore represent colors as a percentage of brightness for each of red, green, and blue. For example, this pink is:

• Red: 78%
• Green: 20%
• Blue: 49%

Changing these numbers around gives us a color space of many millions of possible colors. Now, we just need to figure out how many of these are "red" and how many are "blue"!

But now the issue is... how do we know whether one combination of percentages is "red" or "orange"?

To get to the bottom of what codes count as "red" and what codes count as "blue", let's do a deep dive into different color notations, starting with the two most popular: RGB and Hexadecimal.

Treating the brightness of each of red, green, and blue as a number gives us our first way color is notated in code, called RGB.

In RGB, each number represents the absolute brightness of each of red, green, and blue subpixels respectively. Some examples:

• rgb(66 145 224) is blue; the "blue" number is the largest
• rgb(208 168 6) is yellow; the "red" and "green" are both large, which we perceive as yellow
• rgb(255 255 255) is white; white is essentially every color all at once

Each number goes from 0 to 255, rather than being a percentage. 255 is maximum brightness.

The RGB values for the grass, shaded and unshaded.

As a web developer, I do not often see RGB notation in the wild. I almost always see its sister, Hexadecimal notation.

These two notations represent the exact same concept, just with Hex being less long to write. The first two characters represent red; the second two characters represent green; and the last two characters represent blue. And instead of being normal numbers, the characters can also be any of the letters A-F. Here are the same colors from the previous examples, but now in hex notation:

• #4291E0 is blue
• #D0A806 is yellow
• #FFFFFF is white

It's not important for us to understand why letters are used. What's important is now you at least get to know what the color of a facade is.

Awesome, I've always wanted to know what #FACADE looked like 🙃 Except, what if instead of asking, "What does #FACADE look like?", we had asked: "How could I guess at what #FACADE looks like?"

And this is a hint that despite RGB and Hex being the two most popular ways to notate color with code, they have some rather glaring shortcomings that make it hard to determine whether red or blue wins...

Did that upside-down smiley emoji sound sarcastic? I wrote about different ways to denote sarcasm with text!

So I could just give you a bulleted list of the shortcomings, but that's no fun. Instead, it's quiz time! Click on the question to reveal the answer.

What color is this? #995215

Which is darker? #5EDBAB or #4D6B8E

How do I make this more saturated? #D3AB7A

The point is, these hex numbers are rather... mystical.

Even for someone like me who has been trained since the beginning to use and understand hex color codes, it's still never obvious looking at a code what flavor of color I'm gonna get. And it's far less obvious on how to transform colors, by making them darker, more or less saturated, or hue-shifted, all very common things we wanna do as developers or designers.

RGB and Hex are great for computers, but bad for humans.

Except, this isn't even true.

Actually they’re bad for computers too.

Hexadecimal allows you to specify exactly 16,777,216 different colors. Which is a lot. But it isn't every color.

Take a look at the following green colors. Depending on your computer screen and browser, you might perceive a difference between them, however subtle:

The greens on the left and right are very subtly different.

It's possible you can't see the difference between the greens because your monitor or browser literally can't show it. I was able to see the difference on Chrome using a Macbook.

As it turns out, the green on the right is the maximum possible green you can express with Hex notation: #00FF00. Despite this, our eyes are capable of perceiving greens that are even greener.

With improved technology came monitors capable of showing us more and more colors, but it's impossible to take advantage of these new colors by using RGB or Hex to represent them, because these new colors are simply out of bounds.

The set of all possible colors a monitor can physically display is called its color space. In the past, the best monitors were capable of the sRGB color space, which contains the aforementioned 16 million colors. Nowadays, many monitors are capable of the Display P3 color space, which includes all the colors in sRGB and more.

P3 includes all the colors of sRGB and more.

In order to express these colors in code, a new generic notation was created.

Each of the three numbers here, again, represent red, green, and blue respectively, this time being decimal numbers from 0 to 1. So it expresses the brightness of red, green, and blue subpixels explicitly, but this time specifies what color space to use.

This is better but still suffers from all the problems discussed with RGB and Hex: how do I make color(display-p3 0.67 0.7 0.45) more saturated or darker? We need a different paradigm altogether...

By describing a color with words, we get hints for a different way to notate color that's different, and better than, RGB. For example:

This is a somewhat light, very desaturated shade of orange.

Humans communicate colors with hue, saturation, and lightness.

And so, we have the HSL notation, describing colors with three numbers that represent hue, saturation, and lightness respectively.

Breaking down hsl(75 37% 60%):

• Hue: The first number is the hue, ranging from 0 to 359. It's essentially a circular spectrum, with 0 being red, 120 being green, 240 being blue, and 359 being red again.
• Saturation: The second number is saturation, with 0% being no saturation and 100% being max saturation.
• Lightness: The last number is lightness, also ranging from 0% to 100%.

A color is a point in an HSL cylinder.

If we revist our quiz from before, the questions actually become much simpler to answer!

1. What color is this? hsl(28 76% 34%)
   • Hue 28 is orange, and 34% is pretty dark. So this is brown.
2. Which is darker? hsl(157 63% 61%) or hsl(212 30% 43%)
   • Since 43% is darker than 61%, hsl(212 30% 43%) must be darker.
3. How do I make this more saturated? hsl(33 50% 65%)
   • All we have to do is increase the saturation percentage.

HSL is great, but there's still one problem that will lead us to our final color notation...

Remember: color is all about our perception. Interestingly, we perceive different colors as having different brightnesses, like yellow and blue.

hsl(60 100% 50%) hsl(60 100% 50%)

hsl(240 100% 50%) hsl(240 100% 50%)

Using HSL notation, lightness is set to 50% for each color, and yet the yellow looks way brighter! In fact, it's so bright you can't see the white text on it, whereas you can see the white text better on the blue.

The ideal color notation should be perceptually uniform, meaning that the same "lightness" value for two different hues appear similarly light, and the same "saturation" value likewise results in two similarly saturated colors.

???(70% 0.15 102)

???(70% 0.15 260)

Introducing the Oklch notation:

Like HSL, Oklch is based on three numbers, this time called Lightness, Chroma, and Hue.

P3 includes all the colors of sRGB and more.

• Lightness: How light a color appears, from 0% to 100%.
• Chroma: How vivid the color appears, from 0 to Infinity.
  • At least, theoretically Infinity. The highest possible chroma depends on the color space used. For P3, the highest possible chroma is 0.37.
  • Additionally, the highest available chroma is different for each hue, corresponding to how sensitive we are to differences between shades of that hue.
• Hue: A number from 0 to 360, except this time 0 and 360 are magenta instead of red.

Click here for some examples of the oklch notation based on previous colors we've seen.

• Bright yellow is oklch(97% 0.21 110), and the deep blue is oklch(45% 0.31 264). Notice how different the lightness values are now, indicating that the yellow will appear much brighter.
• The greenest green possible with RGB and Hex is oklch(87% 0.29 142), and Display P3 allows us to specify the more vivid green oklch(87% 0.33 142). Note that the chroma is higher.
• In the original grass example, our two shades of green were oklch(74% 0.087 114) and oklch(37% 0.062 141). Just by looking at the numbers, can you guess which is the brigher shade and which is the darker?

The Oklch notation finally gives us everything we want in order to describe color in as close to human terms as possible, and it finally gives us a way to quantify once and for all whether red or blue has more shades!

If you're a developer looking for more practical guidance on how to use the oklch notation, here are some resources.

• It's time to learn oklch color
• LCH colors in CSS: what, why, and how?

In order to answer this question, we needed to find a way to quantify color that most closely matches how we perceive color. The oklch notation does this best by:

• Defining colors in terms of three concepts we intuitively use to communicate differences in colors: hue (what color it is), chroma (how vivid it is), and lightness (how light or dark it is).
• Maintaining perceptual uniformity of its values, meaning the same lightness and chroma values is perceived to be the same across different hues.
• Allowing us to define as many colors as possible, even moreso than the 16 million provided by RGB.

To help us, I'm going to use an Oklch Color Picker! It provides useful diagrams that illustrate what the color space looks like so we can see how big the red and blue sections are.

Specify color by lightness, chroma, and hue.

The first question: How many hues do we perceive as red, and how many do we perceive as blue?

Hue is a number from 0 to 360, so some of those will be "red" and some will be "blue".

Red takes less space on the hue slider than blue.

• Red is approximately from 22 to 33, or about 11 possible hues.
• Blue is approximately from 230 to 270, or about 40 possible hues.

By this metric, we seem to be able to perceive more differences in blues than reds.

And the second question: For each color, what is the highest chroma available?

One of the interesting things about the oklch notation is that the maximum chroma value differs per hue. By finding the peak chroma values for red and blue, we can find for which color we can perceive more vivid shades.

Blue has a higher chroma peak than red.

• Red peaks at 0.295 chroma.
• Blue peaks at 0.318 chroma.

So even by chroma, blue seems to edge out red.

And so, given that we can identify more hues as being "blue", and within the hues we can perceive a higher chroma for blue, we should be able to conclude that blue has more shades than red!

I say that, but as this is all based on human perception, who's to say that what I call "blue" you don't call "cyan"? Or perhaps for some people, "red" and "orange" are indistinguishable, and so all the hues of orange are also hues of red?

The question is, at a fundamental level, unanswerable because it is based on human perception, and humans are diverse!

Really, the point is that color research is fascinating and surprisingly deep. And if you're a developer, consider using the OKLCH notation for colors as a human-friendly alternative to the classic RGB or Hex notations!

• OKLCH in CSS: Why we moved from RGB and HSL
• LCH colors in CSS: what, why, and how?
• What is DCI-P3 Color? A Basic Definition
• OKLCH Color Picker