Complementary colors (I)

The notion of color’s complement is important. It binds two colors together. Mastering this relationship will allow you to better control the interaction of colors, and thus create more beautiful harmonies.

There are several forms of complements: additive, subtractive and optical.

Artists are more familiar with subtractive complements; they know the corresponding pairs through their practice of mixing paints. These are, however, different from additive complements, which is why there is a great deal of confusion in this matter.

The additive and optical complements are very close; as they are at the heart of our visual perception, I dedicate this first article to them. Bruce MacEvoy rightly calls them “visual complements”.

My point of view here is purely perceptual. The artistic aspect will be dealt with in Challenge #4.

The different forms of visual complements

Additives complements

Initially complements were defined for light colors. They are visualized by two colored projectors illuminating a white screen: here the rays add up and give the illusion of a single projector with white light, as shown in the animation below, for a blue and yellow light.

Optical complements

Spatial fusion

If, instead of being projected in the same place, the rays are juxtaposed on small surfaces that the eye cannot dissociate, the rays are merging. Our computer or telephone screens take advantage of this phenomenon.
Below is a picture of my laptop screen under the microscope.

Do you think your screen is white? In fact, three rays of different colors give the illusion of white. This white is less bright than when the rays are superimposed; it is a different white, we therefore use another term: optical mixing.

In both images shown above, colors are made of light rays. In fact, if you read me on a screen, colors will always be produced by light rays. Well, except for black which has the color of your screen, that is, absence of light at that point.

However, if you have printed this article, the figure above will appear as ink stains next to each other. They will eventually merge if viewed from a distance. Your color perception will then depend on the printer inks and on the ambient light. In any case, as ink colors are much darker, their optical fusion will give an impression not of white but of a more or less neutral grey.

Also, if two colors juxtaposed give the illusion of white (or, in the case of a strong loss of clarity, grey) we speak of optical complements.

Temporal fusion

Presented to the eye at a sufficiently fast pace, the colors also merge. The video below shows a rotating disc, a disc made up of yellow and blue quarters. The neutral grey outer ring is used as a reference to compare the merged colors. The colored quarters fuse together to create the illusion of yellowish grey. The two colors printed on the disc are therefore not perfect optical complements.

Did you know that this device, invented by Ignaz Schiffermetüller Munsch in the middle of the 18th century, and described in detail here, was used systematically by James Clerck Maxwell and Ogden Rood to find pairs of color complements?

Ghosts complements

Don’t look for a scientific reference to this category, I made it up to account for “ghost colors”, those colors that do not exist but that we perceive when looking at a neutral screen after staring at some images.

Look at the center of the image below. Each of the red discs seems to change color at some point, providing the illusion of a rotating cyan disc.

Yet the images in the animation contain only red and grey. The cyan that appears successively on the red discs is the visual complement of red. It is the result of an illusion: on each image of the animation a disc is missing; our eye, having been exposed to this bright and intense red for a certain time, replaces grey by the complementary color of red, that is, cyan. As the position of the missing disc changes from one image to the next, we have the impression that the ghost disc is moving.

You will observe the same phenomenon if you look at a static image and then move your gaze to a neutral area, such as a white sheet of paper for example, or a white part of the screen.

The above experience will have introduced you to the visual complement of green, namely magenta.

In summary

All these experiences are manifestations of our visual system. As the same pairs of colors appear in the different cases of figures, whether by adding the rays (additive complements), by merging them spatially or temporally (optical complements), or as a ghost after exposure to one of them (ghost complements), their relationship can be described as visual complements.

Very good, but how do you find complementary visual color pairs?

In practice: find the complementary

As for colors on the screen, that is, “light” colors, it is easy. For color samples, i.e. “material” colors, it is more complicated, and even more so if you choose these colors according to your screen.

Light colors (digital color)

To find the visual complement of a given color, you can use a color wheel like this one (from Wikipedia): the complement colors are located on either side of a diameter. As experiments have shown above, yellow is the complement of blue, cyan is the complement of red and magenta is the complement of green.

Be careful, do not take the painters’ “color wheels”, or even that of Adobe, they would mislead you, as we will see in a future article.

If you have a graphics utility, you will have access to HSL values, the color space system used for this color wheel. In this system, a color is the complement of any color whose hue is diametrically opposed, i.e. hue = H + 180°. This can be darker or lighter, as in the figure below where all the shades of pink are potential complement of the green above: on the left, the darkest pink and on the right, the lightest one; gradient between these two roses is also provided. Indeed, if you add their RVB values, they will all end up in a neutral color (i.e. a grey).

Thus a color can have several complements, but all have the same hue; only lightness (clarity, value) will differ, like the roses in the example above. Therefore one should rather talk about complementary hues.

Note that although their hue is not defined, white and black are also complements.

Material colors (dyes, paints)

How do you know if a color sample, whether fabric or paint, is a visual complement of another sample?
You can still use the rotary disc described above, but it is not convenient. Another way?

The problem is that it depends… on the light. It is the light source that will visually determine what will appear “white” to you. We can however define the complementary relationship for a given “white”, or rather for an illuminant, a lighting.

Therefore, if we agree on the lighting conditions, we can define the relationship of visual complements.

If you have a color chart like the RAL, the associated color code gives you access to the visual complement. Please note that some color charts give a subtractive complement and not the visual complement.

Material colors (printing)

Printed colors are never the same as the colors on the screen. Not all colors on the screen are printable. For those that are, translating them into printed color will depend on your screen, the printer’s inks, the respective settings of the screen and the printer, and the lighting conditions (see previous section).

Working with a calibrated screen and with color profiles provides by the color management system solves some, but not all, problems.

Ideally then, you should have a color chart that specifies the hue, make trials and check for complementarity or use a colorimeter or spectrometer.

Using a color chart

Having a set of color samples and knowing their hue or visual complement is very useful.

I have created an original color chart in the form of a deck of cards which shows for each color its properties of lightness, hue and color intensity (saturation).

The set covers all the colors available in digital printing (CYMK process), so that it is easy to locate any existing color in relation to any of the cards in the set. The color properties are based on the same system as RAL presented above, which is different from TSL as it is better adapted to printed colors. The properties are represented by symbols as shown below by two “cards” from this color chart.

Lightness is represented by a scale, hue by the hand of a clock, and color intensity (saturation) by the filling of a triangle. For the sake of simplicity, the lightness is limited to 6 levels, the hue to 12 hours and the color intensity to 4 values: 0, Small, Medium or Large. The hues, at their maximum intensity, can be read on the clock face. Color complements have a difference of 6 hours.

For the reasons explained above, the color properties of these two cards and summarized in the symbols are only valid for the print I made. I will devote an article and some videos to this original card game.

Furthermore, it is not essential to know the exact complement of each color; knowing the pairs given in this article and recalled in the figure below as a conclusion is quite sufficient for the color enthusiast. Indeed, depending on which color space system they use, even experts will not agree on complementary relationships!

Conclusion

Knowing the visual complements means knowing the complementary relationships between hues. This is summarized in the figure below: one color and its complement below.

In digital, choose the Wikipedia’s HSL system presented above; it allows you to find a visual complement by adding 180° to the shade. Note that the HSL system of photoshop is different.

Go ahead

Now it’s up to you. Find complements in the colors you like or go fishing for complements in digital photographs (see Challenge #4). Look for situations where colors merge or create discs to see if colors are visual complements in your lighting conditions.

When was the last time you saw a “ghost” color outside of this experiment?

Feel free to comment on this article, and try Challenge #4 (coming soon).