Some thoughts about colors: Reduce the chroma

This is the second of a series of posts about color. The previous one was about color spaces, and I encourage you to review it if you’re new to the concepts of the RGB and HCL color spaces. I’ll wait.

So now that you’re up to speed, let’s jump right in. The message of this post is simple: When picking colors, choose colors with less chroma. (Remember: “chroma” measures the colorfulness of a color; see the post about color spaces.) In my opinion, this statement is unequivocally true in the context of data visualization, and it is mostly true in the context of art. High-chroma colors can be painful to look at, and they rarely look elegant. In ordinary life, we mostly encounter high-chroma colors in children’s toys. You don’t want your data visualization to look like a toy.

Now, in the context of art, ultimately you can do whatever you want. Maybe you want your artwork to look toy-like, or you want it to create that physical pain that comes with very high chroma. That’s fine. Art is art, and you do you. However, I would encourage you to use high chroma deliberately, because you want to achieve a specific effect, not just because you didn’t know about using less chroma or because you didn’t give it any thought. And on the whole, my prediction is that your color selection will improve if you go for colors with less chroma.

To demonstrate this effect, let’s pick some colors and use them in a simple generative artwork. We will start with the three primary RGB colors red, green, and blue, and combine them with two secondary colors, yellow and cyan. So, this is our palette:

These are very unusual colors. This may not be immediately obvious to you, since they are so commonly used in computer graphics, but they are true outliers in the space of possible colors, with extremely high chroma. Look at the palette for a while to notice how bright and strong these colors are. I find it physically painful to look at them for prolonged periods of time.

Now let’s use these colors in a simple piece of art, a set of nested and rotated pentagons. In my opinion, this artwork looks shrill, and it’s not something I’d want to look at regularly.

In fact, I strongly believe that you should never use these specific colors. They are way overused, and they rarely look good. There are 16 million other choices. You can find different colors.

To make the color palette more unique, let’s take these colors and simply reduce the chroma somewhat, without making any other changes. The resulting palette is still clearly red, yellow, green, cyan, and blue, but the colors have now lost some of their piercing character.

The artwork is similarly much easier to look at, even though it still is very colorful.

I personally like things to be even less colorful, so let’s reduce the chroma further. To keep the artwork from looking flat and boring, though, we now have to adjust luminance somewhat. The less chroma there is, the more important it is to have some light and some dark colors that create a contrast. Here, I have darkened the blue substantially, the red somewhat, and the green a little bit. The result is this color palette:

When applied to the artwork, we obtain the following, which I consider reasonably balanced. Notice that this looks in no way monochrome or lacking in color.

Also, I’d like to point out that it took me minimal effort to create this color palette. I started with a set of primary and secondary colors, reduced the chroma of each color, and then made some luminance adjustments until I had nice contrasts. In the HCL color space, you can make these types of adjustments within a few minutes.

Next, let’s talk about how to assemble colors into a palette. When creating palettes, we can encounter clashes, where some colors simply don’t go with each other. In my opinion, the most likely reason for a clash is a mismatch in chroma among the colors. We can combine pretty much any hue with any other hue, and we can combine light and dark colors, but when we juxtapose colors with very different chroma the result can look awkward. As an example, let’s take the previous palette and replace the blue with the blue from the first palette, #0000FF. I’d argue this doesn’t work at all.

The blue doesn’t look like it belongs. The red, yellow, green, and cyan all go nicely with each other, but the blue stands out like a sore thumb. And when we use this color palette in our generative artwork, we similarly see that something is off. The blue is just too dominant and overbearing.

I would like to emphasize that the goal is not to give all colors the same chroma value. There can be variation. But the variation has to fall into a somewhat restricted range. I hope that you will develop your own eye for color combinations, so you can form your own judgement on whether specific colors fit together or clash.

To conclude this post, I want to go back to the third color palette and place the artwork onto a non-white background. I like to use backgrounds that are not white (for light backgrounds, and similarly not black for dark backgrounds) to give artworks a little more character.

Here, the background color is #EBEFEB. It is almost but not quite gray. It has a chroma of 3.3 and a luminance of 94. Yet when used as a background, because a large area is filled with this color, we clearly see the greenish hue. In general, for backgrounds, a tiny amount of chroma and a tiny deviation from either white (luminance = 100) or black (luminance = 0) goes a long way. I plan to write a future post that will go into this topic in more detail.