Color

Here we continue our study of design, and this post will focus on learning some basics about color. I Googled “design color vocabulary” because I want to know the correct way to talk about color.

From my own experience in the industry, I know that a web user might click on a button—or not—more often because of what color it is. There is not any good way to predict that, at least not yet. I’m sure people are attempting to predict it with machine learning somewhere right now. But what companies actually do instead of predicting is they use A-B testing. Some users see one color. Other users see the other color. And the company measures which color was more successful.

I have started reading here: https://uxplanet.org/color-glossary-for-designers-terms-and-definitions-1a65549804bd . I’m already finding answers to exactly the questions I was Googling for. Here it says, “a hue is exactly the thing we mean asking ‘what color is it?'” (Whereas the word ‘color’ by contrast, refers to a more general and less specific notion.)

This post goes on to say “tint” is mixing the hue with white, and “shading” is mixing it with black. That sounds like two different words that just mean going up or down the “lightness” scale, but let’s keep reading. By the way, you should definitely read that article in its own words, but what I’m hoping to do is make things more concrete by translating into the words of a skeptical engineer.

Consider this sentence about tone: “Toning is a more delicate process because it requires adding both black and white”. That sounds like utter nonsense to me, but I remain both skeptical and open-minded.

OK, so “value” of a color is amount of white.

“Chromaticity” or “chroma” is a measure of the “purity” of a hue. I have no idea what that means, but let us take it on faith for now.

Saturation sounds like “boldness” or “intensity”, and since they mention it with regard to lighting, it also sounds like something that is not inherent in the color itself. I know when you speak of the “saturation” of a paint, it refers to something like how good it is at covering the color beneath it—which is related to how much pigment it has per unit volume.

Now we see the color wheel, with various colors called “primary”, “secondary” and “tertiary”. I have definitely heard of “primary” colors, but right now I don’t think I could define the term. They define primary colors as “three pigment colors that cannot be formed by any combination of other colors”. I don’t think that uniquely defines a set of colors, but they say the system is based on using red, green, and blue as the primary colors.

Once we start getting into words like “warm” color and “cool” color, the engineer in me begins to complain. But at least for now I am willing to accept that we can divide colors into these two categories arbitrarily. Warm seems to just refer to how much red is in the hue.

After laying out some of this basic terminology, the post above begins describing specific ways to choose specific schemes. I don’t think I can add anything to what they say on that. They offer several visual examples that support their observations about using complementary colors, contrasting colors, etc, as based on the color wheel.

It’s a start, and this post ends with several links for further reading.

Let’s use some of this terminology to examine Metafizzy again https://metafizzy.co/. Overall, the site uses a lot of “warm” colors—that is, color with red mixed into it. Let’s think about the main colors on this site and where the fall on the color wheel in relation to each other. One the warm side, I see colors like red, red-orange, and yellow-orange. On the cool side, I see green and some kind of blue.

It was definitely a bold choice to use so many different hues in this page, but I can see how the page itself called for it. To illustrate his delightful little layout widgets, such as Isotope, he needed different colors for adjacent boxes. Still, looking at the color wheel, there is a clear theme here. The hues ranging from red to yellow-orange are exactly across the wheel from blue to green. Some hues that are entirely absent include unmixed yellow and purple.

This is only a tiny step in the direction of understanding color. I remain entirely unsatisfied with the definitions that post above gave us for “tone”, “tint” and “shade”. So let’s read further. Remember, designers definitely have something to teach us (“us”, as engineers). But that doesn’t mean we have to take what they say at face value and use the same vague phrases they sometimes use. As described in that post, “tint” and “shade” sound like the same thing in two different directions, and “tone” wasn’t defined at all. So let’s drill down on that.

The post we have been reading recommends that we read the following post here: https://uxplanet.org/color-theory-brief-guide-for-designers-76e11c57eaa .

Right off the start, they make an assertion that people make subconscious judgments about products within the first 90 seconds and that is largely based on color alone. I’m sure it happens much, much faster than that. Subconscious thought does not take 90 seconds. It takes fractions of milliseconds.

However, from there this new post has almost the same content as the previous, so let’s move on. I want to know the precise meaning of color “tone”.

Now I am reading at http://www.workwithcolor.com/color-properties-definitions-0101.htm . This page uses the same definitions of “tint” and “shade”, so I guess we will have to live with those. For example, the colors used on the Metafizzy site appear shaded.

On this page, they also say that “tone” comes from adding both white and black to a color. I don’t understand how adding gray to a color is any different from adding a smaller amount of black to that color. It just sounds like shading to me. Also, the definition of “chromaticity” here sounds like gobbledygook. There’s a lot of overlap. Apparently “ligthness” refers to how much a color has been tinted or shaded. Intensity seems to describe something else entirely from what color is—like the brightness (not lightness) of the the light source that’s making the color.

After reading this page, I feel further away from understanding. In fact, I see so much confusion and overlapping and contradiction in the names of these color-descriptor terms like “chroma” that I’m inclined to throw them away entirely. Here’s a guy who says “chroma” can also be called “saturation, or color intensity” ( https://www.artistsnetwork.com/art-terms/chroma-color/ ). I’m forced to conclude that nobody in this field has ever bothered to give things proper names and stick with them. Any time somebody says “chroma”, he might have something to teach you, but you’ll have to get him to define what he’s talking about because there is no agreed-upon vocabulary.

I want to reiterate for emphasis: the fact that design isn’t science and the fact that design people don’t use vocabulary with the same exactness as a scientist does not mean they have nothing to teach us. It does mean that learning from them will be harder.

Anyway, I’m starting to get the difference between “shading” and “toning”. It’s clearer if you think about it using the numbers, like the RGB style we use for web styles. Pick a base color to work with, like rgb(0, 97, 255), which is a blue hue. “Tinting” means adding red and green. If you keep adding more red and green, then eventually you get to white. “Shading” means subtracting green and blue (because there is no red to subtract). Toning, then, allows you to add green and subtract blue, taking us closer to a neutral color.

I think I’ve had enough of this for the day. I’m going to keep my eyes open for delightful design, and when I see more of it we will study it. In the meantime, I also want to look more at the mechanics of recreating good design on a web platform. But that too will be another day.