Colors are Complicated

Well hello there! Whatever I did yesterday seemed to substantially increase my productivity (for once). I got distracted a few times, and spent a bit too much time on some tasks, but overall, I approve. šŸ‘ Letā€™s try to do that again today.

I need a new website, mostly because I never really made anything that special. And during the process of picking out a color palette, I realized that color are complicated. Horribly, horribly complicated.

In web development, colors are usually specified in the RGB color model using a 3-byte hexadecimal number. Each byte, represented by two hex digits, indicates the amount of red, green, or blue light in a given color, ranging from 00 (0, or none of that color) to FF (255, the maximum amount of that color).1

Here are some example colors:

This is where things get fun. If youā€™re directly on my website (juliencherry.net), you might notice how much brighter effectively pure green appears compared to its red and blue counterparts2. This is kind of annoying because I want colors of the same brightness to actually look like they have the same brightness. These colors should have the same brightness3 because they have the same amount of light, just in different colors. But they donā€™t!

Human eyes are more sensitive to certain wavelengths, and I think this is why this difference in brightness occurs. The cone cells in the human eye allow for color vision, and the three different kind of cones are sensitive different wavelengths.

This diagram indicates the sensitivities of the short-wavelength, medium-wavelength, and long-wavelength cones.4 Note the particular overlap around 550 nm, which corresponds to the color green!

I suppose then that it would be impossible for a human with normal vision to see other colors, like red and blue, as bright as they might see green, which might have interesting design implications. However, in the case of my website, I just wanted colors that had the same visual brightness5. Using RGB seems to make that more difficult, but thereā€™s a few other color models6 that may do the trick. First I looked at LMS, then XYZ, but L*a*b* looks the most promising so farā€¦weā€™ll see.

Along the way I also found these fun things called impossible colors, some of which you can actually see! These chimerical colors can only be seen under certain conditions, and Iā€™m in the process of deriving a website from the diagram in the link at juliencherry.net/projects/chimerical-colors. Go try it out!

Well, this concludes this long blog post. Brief disclaimer: I like writing these exploratory posts (i.e.Ā this one [the one you are reading] and this one), because I learn more about whatever the topic happens to be about. But it also means I also take in a lot of information from elsewhere, which generally means Iā€™m haphazardly clobbering together bits of Wikipedia. Be wise and wary, and donā€™t believe everything you read on the internet, kiddos. Be open-minded but skeptical.

See ya around,
Julien

  1. Maybe you just want to peruse Wikipedia a bit instead of listening to me trying to explain it. :P
  2. It might be a faux pas to assume youā€™re humanā€”if youā€™re not, I sincerely apologize. This might apply to other organisms but I havenā€™t fact checkedā€¦
  3. Iā€™m not sure if Iā€™m using the term ā€œbrightnessā€ correctly because it may be a technical term. Wikipedia seems to agree with me, so perhaps HSB uses the term incorrectly.
  4. They go by lots of names, apparently. For short, S-, M-, and L-cones, or for some Greek, Ī²-, Ī³-, and Ļ-cones. They may also be referred to by their approximate color (blue, green, and red, respectively), but this is somewhat misleading because there is significant overlap. The diagram colors each curve like this.
  5. Brought to you by the department of redundancy department.6
  6. I definitely heard this somewhere before, just not sure where.
  7. While RGB is a color model, these three other color models are actual color spaces as well, though Iā€™m not quite familiar with the difference.