Colors and hues

Understanding colors and hues

If you’re here, you’re probably trying to understand what the word hue means and how it is different from color. By common definitions, color is a perceptive phenomenon, and hue is one aspect of this perceptive experience. We said that we can see some colors as different, but even two different colors can have the same hue.

Definitions of perceptual phenomenon are not that useful. It’s much more effective to experience it first-hand.

This page relies on the viewer’s ability to see color, so it won’t be effective if you cannot see colors, or you are not accessing this page on visual media. Even if you are, some screens and printers are inadequate or poorly calibrated. I took some effort to make it work on different screens, and to account for some common color vision deficiencies, but it’s far from perfect.

Different colors

Let’s not define what a color is, because the definition depends on the context. Two objects might be painted in the same color (by one definition) and appear to be different colors (by other definitions). Instead, we can use an intuition that works in this context.

You should be able to see a larger square, and two smaller shapes on top of it. Squint if needed. The light you receive from those shapes should be distinguishable from the background. We are gonna say that if you are able to see those shapes, your perception is that of different colors. Intuitively, color is what makes the background and the two shapes visible.

Colors with same hue

Here are five boxes in a row. You should see different colors (according to the above) in each box. The colors have a very similar hue:

As do the colors of these five boxes:

But the first and the second row have different hues.

A few more rows:

All the above examples are based on some model to predict how your brain will perceive color and hue for light emitted by the screen. It’s reasonably convincing on the author’s screen, with the author’s eyes. I can clearly see a level of internal consistency within each row.

Hue is the common characteristic in our perception that tells us that these colors are related.

Nearby hues

Compare the following examples. Here colors are randomly picked to have a similar but not-quite-the-same hue:

Here things are more challenging for screens that are not properly calibrated, and differences in color vision can kick in. But you might notice that, although very similar, the colors on each row are not as closely related as before.

Hue is what makes these colors similar, but a little bit off. The aspect of our experience that we call hue is some sort of continuum, as we will see. So it’s possible for two hues to be similar, and to discuss degrees of similarity.

Different hues

Let’s try to experience significantly different hues this time:

It should be easy now to see the difference. Most people will look at these and say that they see different colors.

Hue is what makes these colors obviously different.

Hue continuum

It is a generally well accepted fact that some hues are similar to others. In fact, if you ask a bunch of people to arrange some colors according to the similarity of their hues, they will likely come up with the same arrangement. This phenomenon means that we can construct an idea of hue that is a continuum, rather than just a palette of “blue”, “yellow”, “red”, and so on.

Check out the colors in this strip:

They seem to transition from a reddish hue to a blueish hue, going through a number of intermediate hues (that maybe I’d call magenta and purple and something like that, I’m bad with color names). The colors on either side are clearly different, but each step is a minute difference.

One more example:

This goes from, uh, a dark yellow, I guess, to some sort of aqua green hue. Ok, I will stop trying to name them. If you see them, everything is alright.

Instead of providing more examples, let’s just try to show the whole continuum:

(Well, the “whole continuum” as far as a digital display is able to reproduce)

Similar hues can be put on a line, but there is no starting or ending point. They wrap around. So it’s common to represent them as a circle, or a wheel, like the one above.

Different color theories might produce different wheels that highlight one or another aspect of hues. The technical definitions might differ, but the general idea of what humans perceive as different hues is solid. All theories would agree that the above wheel represent colors that are differentiated by hue.

Other characteristics

In the first set of examples, we showed colors with the same hue. Those colors were still visibly different on some other aspect, though. People have given a few names to the characteristics of perception that separate them. Again, I will avoid definitions and just go with vague intuitions of two characteristics in particular.

Hue, colorfulness, and lightness, taken together, are often used as a complete way to characterize a color. If you have some way to quantify them, they provide yet one more way a triple of quantities can identify a color.

Lies etc etc colorimetry

One issue with quantifying these characteristics, though, is that they are purely perceptual, so any quantity associated with them should be subjective. Colorimetry does not know that, and, like a bumblebee, it flies anyway. It manages that by standardizing models of color vision from experimental observation. Basically, at some point someone asked different people if some light looks similar to some other light, and collected this data to fit a model.

This is very useful stuff, to be sure. All color reproduction technology depends on work of this kind. I like being able to look at a picture on my screen and see it as similar as possible to what the author intended (ideally, at least, as the color examples on a page like this will frustrate many people who don’t have a well-calibrated screen).

What I dislike is the conflation between the experience of vision, and the metrics used by technologists to manufacture that experience. Color is not three coordinates in some color space. These are aspects that contribute to the experience, but taken alone are barely sufficient to display colored squares on a page and kindly ask people to focus on them.

All those squares painted above in this page probably look a bit weird around the edges, or in the spaces between them, or when you look at a bunch of them at once, or move your eyes or scroll the page, or compare them in a way I did not take enough care of. Not because the technology is bad, those pixels are doing just what I asked them to, but because that’s how color vision works. It’s sensitive not just to the light distribution spectrum, but to a number of visual factors.

I’m not a great visual designer, so the best I was able to do was to draw a neutral border and appeal to your patience. The examples are convincing if you try to focus on the color block at the center of each square. A good designer would have been able to eliminate the distractions and probably make the colors easier to see. What they would change is not the colorimetric values themselves, but everything around them.

As in the gender metamerism discussion, models are often inadequate to explain human experience, and when they are mistaken with the real thing, all kind of issues arise.

Go to Top