Using LCh to pick complementary colors and for making hue-based color harmonies

Introduction: Choosing complementary colors, color harmonies, and colors for painting warmer highlights and cooler shadows

This tutorial provides examples showing how to use GIMP's LCh color tools to pick complementary colors, choose warm and cool colors for painting highlights and shadows, and put together hue-based harmonious color palettes. The LCh color space is better suited for these tasks than the HSV color space, simply because LCh is perceptually uniform and HSV is not:

Colors on opposite sides of the HSV color wheel are not visual complements, meaning they aren't colors that people (or at least people who aren't looking at HSV color wheels) would actually pick as "opposite colors". Instead colors on opposite sides of the sRGB HSV color wheel are mixing complements, which means these "opposite colors" mix together to make gray.

Using HSV hues to pick harmonious colors seems very scientific and foolproof, until you realize that the spacing of the colors around the HSV wheel isn't perceptually uniform. Instead, violet-blues, violets, and magentas occupy an unduly large portion of the HSV hue ring, and reds, oranges, yellows, greens, blue-greens, and blues are all squished together.

In other words, the HSV color space isn't very useful for choosing color harmonies:

• Complementary and split-complementary color harmonies are based on visual complements (not mixing complements), which means the HSV color wheel isn't very useful for selecting colors for these kinds of color harmonies.
• Shadows cast by light sources are visual complements of the color of the light source, so HSV also is not very useful for choosing shadow and highlight colors.
• Analogous, off-complementary, triadic, and tetradic color harmonies presume a color wheel with visually equally spaced hues — otherwise there would be no point in choosing hues that are spaced at equal intervals around the color wheel (triadic, tetradic) or that occupy a 45, 60, 90, or 120-degree wedge from the color wheel (analogous, off-complementary). Because hues on the HSV color wheel are not spaced anywhere near perceptually uniformly, HSV isn't very useful for choosing for making analogous, off-complementary, triadic, or tetradic color harmonies.
• The HSV color wheel isn't even useful for making monotone color harmonies — if you use the HSV color wheel to systematically lower Saturation and Value to make new colors with "the same HSV Hue", well, from a perceptual point of view, the resulting colors won't actually have the same hue.

Colors that are opposite to one another on the LCh color wheel are (within limits mentioned below) visual complements, which makes LCh a very nice color space for making color palettes based on complementary colors. As shadows are visual complements of the color of the light source, LCh is also a nice color space for choosing shadow and highlight colors.

Because hues are arranged in a perceptually uniform manner around the LCh color wheel (again within limits mentioned below), LCh is a nice color space for making analogous, off-complementary, triadic, and tetradic color harmonies. However, using LCh to pick colors and color harmonies will quickly make apparent just how small the sRGB color space gamut really is. For example, if you like saturated dark magenta-red (between 0 and 20 on the LCh color wheel), or blue-green and green-blue colors, these colors have serious gamut limitations in the sRGB color space. So when putting together hue-based color harmonies using LCh, often the choice is lowering the Chroma, or modifying the Lightness, or choosing different hues.

Viewing note: This tutorial is best viewed using a color-managed browser, on a calibrated and profiled display screen that can display most or all of the sRGB color space. As I write, I'm using two screens. My main monitor is calibrated and profiled, and can display most sRGB colors, though not the darker, more saturated sRGB blues and magentas. My secondary monitor isn't calibrated at all and its color gamut is very small. Viewing the images in this article side by side on each monitor, the difference is appalling. On the secondary monitor colors are clipped in the highlights; mid-tones and shadows are posterized, and all images have a pronounced blue color cast. If you are looking at a display screen anywhere near as bad as my secondary screen, then whatever you see in the images on this page, probably isn't what the images are supposed to show!

LCh (approximately) complementary hues for highlights and shadows

The handprint.com website contains a wealth of information on choosing colors for making highlights warmer and shadows cooler. Now that GIMP provides LCh color tools, it would be nice to be able to use this information in the digital studio/darkroom. Accordingly, below is my attempt to simplify and condense to a practical minimum the handprint.com information on painting warm and cool colors.

However, the handprint.com information on warm and cool colors uses CIECAM (JCH) values, which are more accurate than LCh values and especially so for the violet-blue colors at the bottom of the LCh color wheel. As near as I can tell — my knowledge of CIECAM is minimal! — compared to using JCH, the shadow and highlight ranges that you might choose using LCh are off by up to 5 degrees for the warm colors, and by as much as 20 degrees (ouch!) around LCh hue=270. So please take the following "practical simplification" for using LCh to choose warm and cool colors with suitable caution:

1. If emulating natural light and shadows isn't your goal, then as the handprint.com website says, use whatever colors you want to use. But it might be worth considering using LCh to choose visually or near-visually complementary colors for your highlights and shadows, even if your artistic goal doesn't include using natural warm and cool colors.
2. Out there in the real world, shadow hues are the visual complement of highlight hues. On the LCh color wheel (but not on the HSV color wheel) shadow and highlight colors are 180 degrees apart, except insofar as LCh fails to be completely perceptually uniform.
3. If you want to emulate highlights and shadows from natural and full spectrum light sources, try using colors with opposite warm and cool hues shown on the LCh color wheel below:

   

   Please take note of the question marks on the LCh color wheel shown in Figure 1. I put this color wheel together "as if" LCh and JCH values are completely interchangeable, when in reality LCh and JCH values are only "ballpark" approximations for one another.

   Speaking personally, I'd love to have JCH and LCh in GIMP. But I'm very happy to finally have LCh-based color tools in GIMP, and hopefully whatever aesthetic sense I might have will prompt me to change colors as appropriate for specific artistic goals.

   To form an idea of the difference between CIECAM and LAB/LCh in terms of the spacing of paint pigment hues, you might find the downloadable handprint.com PDF color wheels useful (but please don't post the actual color wheels publicly as that would violate the handprint.com copyright):

   • LAB/LCh color wheel
   • CIECAM (JAB/JCH) color wheel

Painting highlights and shadows on a sphere using an off-complementary color harmony

Painting highlights and shadows on a sphere

I will guess that just about every tutorial ever made on using HSV for picking colors includes a section on choosing warm and cool colors for coloring the highlights and shadows on a sphere. So I put together an example using LCh instead of HSV:

For the side-lit green sphere I used LCh hue 84 to warm the highlights and LCh hue 264 to cool the shadows. For the ambient light, and also the background color behind and below the sphere, I used LCh hue 200 in hopes that this is a reasonable light color for sky light filtered by tree leaves. For this tutorial the basic color for the side-lit sphere was arbitrary. So I settled on LCh hue 232, which is a middling warm green.

Switch back and forth between Slides 3 and 4 above to see the difference between having and not having shadow and highlight colors — the tonality is exactly the same in Slides 3 and 4 (and also in Slide 2) — but Slide 4 has warmer highlight colors and cooler shadow colors.

Off-complementary color harmonies

For some time now I've been working to incorporate information from the handprint.com website into how I handle color for digital painting and photography. A major problem has been that the handprint.com website uses JCH/JAB, and to some extent LCh/LAB values to specify colors and to talk about things like color harmonies, whereas until recently GIMP only provided HSV/HSL color tools. Now that GIMP provides LCh color tools, we can start to explore and use the wealth of color information on the handprint.com website. I'm very interested in exploring color harmonies, so here is an attempt to draw on the handprint.com knowledge base to explore digital color harmonies:

Considering only the range of blended colors actually in the "Side-lit green sphere" image (and not the hues of the layers used to make the blended colors), the colors in the image span roughly 120 degrees counterclockwise from the warm green color at LCh hue 129 (the hue of the bright warm highlight on the green sphere) through greens, cyans, and blues to LCh hue 250 (a middling sky blue, neither green-blue nor violet-blue), thus forming an off-complementary color harmony.

OK, so what is an off-complementary color harmony? The handprint website describes the off-complementary color harmony as follows:

1. Choose two pigments — the key (dominant) pigment and a second pigment 120 degrees away — the direction can be counterclockwise or clockwise.
2. Confine the image color palette to colors resulting from mixing these two pigments with each other and with black and white pigments.

Out there in the real world, "pigments" are undiluted color sources (watercolor pigments, tubes of oil paint, pastel sticks) that would be applied to some kind of surface such as paper or canvas, sometimes directly and sometimes after diluting with a suitable medium. The handprint.com website exclusively focuses on watercolor pigments, but the same base pigment materials that gives colors to watercolor pigments are also used to make colors in many other mediums, including applications as divergent as automotive paint and eyeshadow.

In the digital studio/darkroom, we don't have pigments. Instead we have RGB working spaces with varying color gamuts. So for this tutorial I'm assuming the digital "correlate" to a paint pigment would be the colors in the RGB working space (sRGB for GIMP) that have the highest possible chromas for the specified LCh hues.

The LCh color wheel in Figure 3 shows the two defining off-complementary "pigments" for the green sphere image, plus a sampling of actual colors in the image (I'm using hue 130 instead of 129 because I got tired of typing 129):

When painting using "wet media", within limits (depending on the available pigments and the media itself) one can choose higher and lower chroma pigments to make more and less colorful paintings. In the digital studio/darkroom the highest possible chroma for a given hue depends on the RGB working space. So what do you do if you want "more colorful colors" than can be obtained by mixing the defining pigments for a given hue range on the LCh color wheel?

One option is to use a larger color space such as Rec.2020, but then you have to worry about painting colors you can't see (unless you already have a Rec.2020-capable monitor, but GIMP 2.10 isn't really set up for painting or editing in color spaces other than sRGB). The easier option is to just assume that for color harmonies defined by hue angles (complementary, split complementary, off-complementary, analogous), in a color space as small as sRGB, the only limitation is the hue range defined by the two "pigments", and forget about having to confine one's color palette to colors formed by mixing the pigments with each other and with black and white:

Coloring a black and white photograph, and some notes on the trouble with yellow and blue

Coloring a black and white photograph to emulate early morning light

The image below is a colorized black and white photograph. I chose LCh hue 90 (yellow) for the highlights and LCh 270 (violet-blue) for the shadows, which probably aren't the right colors for the time of day I had in mind. However, I also used LCh hue 180 (cyan) to suggest that the ambient light was influenced by a canopy of green leaves, and this "ambient light" layer greatly influenced the final colors, I think in a very nice way. (FWIW, the actual photograph was taken indoors using a spot light for the sideways lighting.)

As a viewing note, on my secondary "really bad and totally uncalibrated and unprofiled" monitor, the yellow highlights on the shell are overwhelmed by the strong blue color cast created by the monitor, so the "yellow" highlights look white.

If you noticed the resemblance — I did use the lighting in the shell photograph as a pattern for establishing the tonality used in the preceding "Side-lit green sphere" image.

Why not use sRGB yellow and blue for highlights and shadows?

To show the rather huge difference between using LCh yellow (LCh hue 90) and LCh violet-blue (LCh hue 270) for highlights and shadows, vs using sRGB primary yellow (HSV hue 60) and sRGB primary blue (HSV hue 240), I made two additional versions of my colorized shell image. For both versions I increased the chroma for the yellow and blue hues, and completely left out the cyan layer:

Left: using LCh 90 and 270 for highlights and shadows; Right: using HSV 60 and 240 for highlights and shadows. Neither version is very pretty. But compared to the LCh hues 90 and 270, HSV hues 60 and 240 produced green-yellow highlights and a purple shadow and background — imho a somewhat odd set of colors for highlights and shadows.

Looking at an HSV color wheel it seems totally logical to assume that "sRGB yellow" (HSV hue 60) is "true yellow". But in reality, or at least in reality as ascertained by laboratory studies of how people perceive colors, "sRGB yellow" (which has an LCh hue of 99.6) is more of a green-yellow than a true yellow, and indeed looks quite a bit on the green side when compared to the yellow that's at LCh hue=90.

Note: For the image above/to the right comparing the two yellows, I lowered the Chroma and Lightness of sRGB yellow to match the chroma and Lightness of the sRGB color with LCh Hue=90. Otherwise the two colors would differ not just in LCh hue, but also in LCh Chroma and Lightness, which would make comparing the two hues more difficult.

Looking at an HSV color wheel, it seems equally logical to assume that "sRGB blue" (HSV hue 240) is "blue blue" rather than cyan-blue or violet-blue. But actually sRGB blue is considerably on the purple (magenta) side of blue. Depending on your monitor, this might not be easy to tell when looking at the actual sRGB primary blue color (0,0,255), because many LCD monitors (including mine) can't display sRGB primary blue (as display technology progresses towards Rec.2020 and we upgrade our monitors, this will become less of a problem). But lowering the LCh Chroma and raising the Lightness makes it easier to see that sRGB blue is more of a purple-blue:

Compared to LCh hues 270 and 290, sRGB's "bluest blue" (RGB (0.0, 0.0, 1.0), HSV Hue 240) is very purple, equating to LCh hue 301.

Unfortunately for working with blue colors in the digital studio/darkroom (and so also unfortunately for my "compare the blue colors" image shown just above), LCh perceptual uniformity breaks down especially around LCh hue 270, such that modifying chroma and lightness in the LCh color space also modifies perceived hue. Even so, if you are choosing complementary colors from a color wheel (even for complements of yellows and oranges) you are far better off using LCh than using HSV.

A triadic color harmony

A triadic color harmony: a red sphere on a green surface in front of a blue background

I wanted to try shading a red sphere because shading red objects requires a much darker tonality than shading green objects (as I found out the hard way when trying to recolor a green apple to be red). So with a strong red color as my chosen "key" color, balancing with blue and green seemed like the right thing to do, hence a triadic color harmony.

The layers for adding color to the image are given below. The Color group itself is set to Normal blend:

• Layers 1, 2, and 3 establish the triadic color harmony — these three layers are set to Normal blend (but they can also be set to Multiply, as multiplying the white background by a color, produces that color):
  1. Blue background: LCh hue 262 (120 degrees clockwise from hue 22)
  2. Green surface: LCh hue 142 (120 degrees clockwise from hue 262, and 120 degrees counterclockwise from hue 22)
  3. Red sphere: LCh hue 22
• Layers 4, 5, and 6 add colors for the warmer highlights, the cooler shadows, and the window light — these three layers are set to Multiply blend mode:
  4. Highlight color: LCh hue 80 for highlights, to suggest a lamp shining on the sphere from the left (mixed from the triadic color harmony's green and red "pigments", using Normal blend).

  5. Shadow color: LCh hue 260, 180 degrees from and the visual complement of the highlight color.
  6. Window light color: LCh hue 190 to suggest indirect window light to the right (mixed from the triadic color harmony's green and blue "pigments", using Normal blend).

The triadic "pigments" and mixing the colors:

According to the handprint.com website, the triadic color harmony uses three pigments spaced 120 degrees apart on the color wheel (though exactly which color wheel surely varies historically and from artist to artist). This color harmony allows to use any color mixable using the three selected pigments with each other and with black and white.

Figure 9 shows how to mix the "window light" color and the "yellow highlight/blue shadow" colors from the selected red, blue, and green triadic color harmony "pigments", using Normal blend mode:

The LCh color wheel in Figure 10 shows:

• The three main "pigments" (the large color dots) used for the "red sphere" triadic color harmony.
• The yellow and blue colors that were mixed and used for the highlights/shadows, and the cyan color that was mixed and used for the window light (the medium-sized color dots).
• Selected blended colors (the small color dots) sampled from the actual image.

Referring to Figure 10, the blended highlight color on the red sphere falls completely outside the triangle on the LCh color wheel that would be created by drawing lines between the three triadic "pigments". Multiply (and also Divide) as a blend mode can easily create colors that are not just a little (as is the current case), but completely "outside the lines" of any given color harmony.

Anyone analyzing the "red sphere" image's color harmony as "triadic" would just assume that the actual red pigment was sufficiently saturated as to allow mixing the highlight color using Normal blend mode. However, I could have brought the blended highlight color "into the triangle" by lowering the chroma down to around 70.

My point is that Normal blend mode can be used to mix colors without worrying too much about violating a nominally chosen color harmony. But other blend modes, including Multiply and Divide need to be used with a fair amount of caution. This points to one of many great big huge differences between mixing colors with "wet media" pigments and mixing colors in the digital darkroom:

• When mixing "wet media" pigments there is always a saturation cost from mixing any two pigments to make a third pigment ("saturation cost" just means that the resulting color will have a chroma lower than the chroma of at least one of the two unmixed pigments), and the mixed color is visually "somewhere in between" the two unmixed colors.
• In the digital studio/darkroom, Normal blend mode does always involve a saturation cost and creates a color "somewhere in between". But Multiply blend mode can preserve and sometimes even raise chroma values in the resulting blended color, as well as create colors with wildly different hues than the two colors that are being multiplied. For example multiplying 100% sRGB cyan by 100% sRGB magenta makes 100% sRGB blue, which has a higher chroma than either of the two multiplied colors.

Notes on the colors in the red sphere image

GIMP's new LCh color tools allow to systematically explore and manipulate aspects of color relationships beyond picking a hue-based harmony. Obviously the red sphere itself contains a fair amount of variations in hue and lightness compressed into a relatively small area, and these variations help to make the red sphere stand out. Equally obviously, the red sphere is considerably more colorful (almost twice as colorful, with "colorfulness" calculated as chroma divided by lightness) than the blue and green colors. Perhaps less obvious is that I deliberately matched both the lightness and the colorfulness of the blue and green colors, leaving their major contrast with each other as solely a hue contrast, which I think also helps to increase the contrast between the red sphere and the surrounding colors.

I used Multiply blend to add warmth to highlights and coolness to shadows because Multiply is the digital equivalent of adding an actual physical color filter to change the "color of the light". "Multiply" of course alters the tonality of an image, as well as the color. But using the Luminance blend mode for the Tonality group restores the intended tonality of the highlights and shadows.

In case you are curious, the image to the right/above shows what the "red sphere" image would look like if I had used Normal blend mode (instead of Multiply blend mode) for the highlight, shadow, and window light layers.

For painting highlight and shadow colors directly on the digital canvas to incorporate the texture of the brush strokes, try using Multiply+Luminance blend modes for making color swatches.

Conclusion: Who needs LCh?

Who needs LCh?

Many digital artists have experience, talent, and an ability to match what they see with their eyes out there in the real world to the colors they pick in their digital studios using the HSV color wheel. These artists aren't going to assume that sRGB "yellowest yellow" (HSV hue 60) is really "true yellow". Nor will they assume that sRGB "bluest blue" is a believable sky color (it's not), or that colors on the opposite side of the HSV color wheel are visual complements (they aren't), or that somehow picking three colors equally spaced around the HSV color wheel makes for an instant pleasing color harmony (it doesn't; even choosing three equally spaced colors around the LCh color wheel doesn't guarantee a pleasing color harmony as there is considerably more to how colors interact with each other than their hues, no matter how "hue" is measured).

Skilled and talented digital artists perhaps don't need an LCh color wheel, though they might find using LCh to be refreshingly useful and straightforward if they gave it a try. The rest of us mere mortals struggling to choose colors in the digital studio/darkroom can benefit from using GIMP's LCh color tools.

How to use GIMP's LCh color sliders to pick the brightest, highest chroma color for a given LCh hue

1. Open the Foreground/Background dialog.
2. If the LCh Chroma slider is set to 0, move it to a higher number (any higher number greater than 20 — in "LCh speak" a zero-chroma color always has the LCh hue "0").
3. Click on the LCh hue H radio button. Notice that magenta covers a lot of the color panel to the left of the sliders. For the currently selected LCh hue, these "magenta-covered" colors are outside the sRGB color gamut. The more or less triangular area that isn't covered with magenta shows you the in-gamut colors.

   If you don't like magenta as the out of gamut indicator, in Preferences/Color Management, change the color that is used to show out of gamut colors while soft proofing — the color sliders use the same color to indicate out of gamut colors (no, soft proofing doesn't need to be activated, and deactivating soft proofing doesn't make the "out of gamut" indicators on the color sliders disappear). Personally I set this color to black.

4. Try moving the LCh hue slider back and forth between 0 and 360. The point of the triangle will move up and down, and closer to/farther from the right edge of the color panel.

As an example of finding the brightest, highest chroma color with a given LCh hue:

5. Set the LCh hue slider to 60 and then move the panel cross-hairs to the right-most point of the triangle of colors not covered by magenta (or other color you might have selected), not allowing the cross hairs to move over into the magenta-covered areas of the color panel. The resulting color is the brightest, highest chroma in-gamut color in the sRGB color space with the LCh hue 60.0.


6. Move the cross hairs horizontally towards the left edge of the panel to select lower Chroma colors while keeping Lightness and hue constant.


7. Move the cross hairs up or down to change Lightness while keeping hue and Chroma constant, but don't move the cross hairs over into the area marked as "out of gamut".


8. Move the cross hairs along the inside edge of the out of gamut areas to keep Chroma as high as possible while lowering or raising Lightness.