Power Curves: Using HSL Color Space

I was writing some general articles on the technology in Sagelight with regard to the support for multiple color spaces when I came upon some interesting examples of using the HSL color space.

Each color space in Sagelight has a usefulness to it that can be used to bring out elements in an image unlike any other color space.  In the next few months, I intend to write about all of the color spaces supported in the Power Curves, Image Blending, Pro Quick Edit Mode, etc., starting with the HSL color space today.

The HSL color space (Hue, Saturation, and Luminance) is a traditional color space that has been around for a long time.  It has some great uses for image processing, but also has some drawbacks.

Below is a discussion on using HSL in the Power Curves and using HSL, in general.  The topics presented below are just one part of using HSL and this is basically an introduction. You can also use HSL in the Pro Quick Edit mode, in the Power Box, and other places.  I will discuss more about using HSL in other posts.

Where HSL is Useful

Changing Colors

Technical/Graphic Example

Unlike other color spaces, HSL has an amazing fidelity with colors as you change them.  In other modes, such as C*I*E LAB, XYZ, and other color spaces, the colors can drift and become washed out.

If you want to change green grass to blue as an effect, for example, HSL will keep the color nice and deep.  Or, if you just want to do a subtle change, HSL can be more faithful and interesting than other color spaces.

Example

Here’s an interesting image done in the Power Curves. It is a picture that is highly saturated by its nature and is a good example of the quality inherent in the HSL color space when used for its strengths.

Since this color is very saturated, it may not be the typical picture you work with.  See the next set of images for a more practical example.

The highly-saturated image below shows how HSL can be used to manipulate color with a high degree of accuracy, both for images with a lot of color, but also for images in general, especially where there are pronounced colors you want to change without fading them or creating noise.

example1_org2

Original Image (Image Credit: “Colors” by Thomas Claveirole)

In this original image, we’re sitting in the Power Curves function but the image showing is the original since there is no curve set.

example1_hsl2

With the curves set in the HUE channel, the colors have completely changed but are still as deep and colorful as the original image.

curve

The curve, as shown above, is quite an extreme curve.  It shows how much you can do with the Power Curves – in cases like this, you can just move the curves in realtime until you get the image you want.

Note how clean the baseboard area is.  While HSL has some drawbacks (see below), when you have the overall control through the Power Curves, you can avoid many of the inherent problems that can occur with HSL.

C*I*E LAB Version

Let’s look at the same image converted in the same way with C*I*E LAB

example1_lab2

This image is not quite as nice, and the colors have become faded.  Also, I wasn’t able to get the tones I wanted because the LAB mode was just not capable of doing it by itself.

Interestingly, the C*I*E LAB image generated a significant amount of noise in the image:

image

where the HSL (and image below) generated little noise (note: noise enhanced to show in the small image size)

A note about C*I*E LAB Color Space

One of the reasons I point this out with the C*I*E LAB color space is because, while C*I*E LAB is very useful for many things, it’s not always the best space.  Since it tends to be presented in the image editing realm as a more-or-less perfect space to work in, I thought it was worth showing an example where it isn’t.

Sagelight RGB LCH and YCrCB LCH Example

Interestingly, using the RGB LCH and YCrCB LCH color spaces in the Power Curves yielded pretty good results:

example1_RGB

I say ‘interestingly’ because traditional logic would suggest that the C*I*E LAB mode would have the closest and best quality compared to the HSL version.  However, much of the work in Sagelight 4.0 was centered around creating very high-quality color and avoiding many of the problems created with color spaces.  Since the LCH RGB and LCH YCrCB color spaces in the Power Curves use this technology, this turned out to be a good example of some of the state-of-the-art technology in Sagelight.

Even though the LCH RGB & LCH YCrCB image turned out well, note a couple things:

  1. The Blues are still not as deep (especially the door), showing some color translation loss.
  2. I had to create three different curves to get the same result I obtained by experimenting with just one curve.  The light and saturation curve had to be adjusted to get to this point, where I could start to get the deep color from the HSL mode’s natural conversion.

On the other hand, the Sagelight RGB (RGB LCH, in this case) and YCrCB LCH modes also are very pure and can cause less noise.

This is another reason why there are different color spaces supported in Sagelight, as they all have their definite uses.  Even though the C*I*E LAB failed to keep the color integrity as much as the HSL conversion did, C*I*E LAB is much more suited towards toning and saturation at different levels.

Stark, Deep Color Effects and Toning

Practical Example

The above was a great example of what HSL can do compared to other color spaces.  But, the picture was presented as a highly saturated picture for effect.

With other images, the HSL toning can be used for more specific and photographic purposes.

frog-org

Original Image

Dissonance Note: this example may be subject to an image dissonance effect where the result may look too dark because it is being compared to the exact same original image that is lighter. Try looking at the result by itself with the idea of the vignette and deep colors as an intentional mood in the image.

frog-hsl

This image was initially toned with the same approach by using the HSL curves in the Power Curves.  The Hue change was much less subtle here, just enough to make the colors a little deeper and lighter, such as more red in the frog and more blue in the background.

The Luminance Curve was then used to adjust the light.  The Luminance curve in the HSL mode can create some very distinctive and stark effects, which by themselves wouldn’t be interesting.  However, when combined with the individual control of the Saturation and Hue curves, the results can be combined for a powerful image that otherwise take many more steps.

After the toning was completed in the HSL color space, the image was then modified with a vignette, local contrast, and vibrance effects.  The basic look & tone came from the HSL adjustment.

An important aspect of this picture is the color.  The difference in color between the original image and the result image appears to be slight.  A lot of color work in image editing can be to maintain the perceptual color.  For example, this image, when the light was deepened, went to the original color of the image – yellowish.  When the light was deepened, the image became too yellow.  A lot of the HSL toning was to lift the color back up so that the image did not appear too yellowish.  The background was turned a little toward the blue to lighten it up, and the frog a little red to deepen it.  However, most of the work was to keep the image from turning yellow as the light was changed, as it is a natural tint to the original image.

One of the elements that Sagelight strives for is to combine image processing fundamentals so that images can be approached in different ways, depending on your experience and workflow.  As such, the above image can be created in other ways, such as through Dodging and Burning, and elements in the C*I*E LAB mode.  The HSL mode presents an easy way to accomplish certain elements in your image.  In the above example, the primary element was the ability for HSL to deepen the colors and to create a contrast effect on the image, where it may have taken a few more steps through other methods. It is possible to obtain the above image in many ways, HSL being one component of one of those methods.

Where HSL isn’t Useful

I just showed some examples where HSL can be used very effectively.  I think it is also important to discuss where HSL has some drawbacks, because this is where you may have seen problems in your images in the past.

Saturation

In a way, HSL is great for saturation.  But, it also causes a lot of noise and ‘neon-like’ effects.

Color Noise with HSL saturation

Some editors use HSL saturation.  It’s very compelling because the way it interprets color is very faithful to the original color and hue, where other saturation modes can cause color drift – have you ever noticed that your picture either goes warm or yellowish 80% of the time when you saturate in certain editors?  This is because C*I*E LAB, Hunter LAB, and C*I*E XYZ modes are used in some editors which cause this shift when an image is saturated.

HSL doesn’t shift colors, but it does cause color noise, particularly in jpegs.  This happens because the hue between two adjacent pixels can travel different directions when color is added.  This happens in jpegs quite often because of the compression blocks – due to the compression, one block can have a slightly different hue than the one next to it, which can cause significant color edges when you add color to a jpeg image.  This happens in non-compressed images too, but not as dramatically.

If you’ve ever added color to your image and started seeing speckles as you add color, this is probably occurring.  It happens in other color spaces too, but HSL mode shows it to a much greater degree.

This is where Sagelight’s True Saturation comes from – It’s an HSL saturation with a noise- & luminance-correcting component.

‘Neon’ Effect with HSL saturation

HSL saturation can cause a neon-like effect as you saturate the image.  This is because the calculation for the light is not perceptually correct.  C*I*E LAB offers a perceptually correct grayscale conversion, but HSL simply adds the RGB components and divides by three.  This means that some colors will convert to a brighter gray component than they truly are perceptually, where others will become darker.   For example, greens, reds, and yellows typically become much brighter and glaring as you add color with HSL saturation, creating a neon look to the image.

In some cases it might be a nice effect, but in most images that can cause the image to look unrealistic.

General Image Toning

Even though I spoke above about the great uses for HSL toning, it’s not so useful for general toning, even though it is very useful for performing specific functions.   But, as a way to generally tone your image, HSL is not the best place to do so.

Conclusion

The Power Curves supports many different color spaces, which have many different and unique qualities.  HSL is one of the color spaces supported by the Power Curves (and elsewhere in Sagelight).

HSL curves can be used to change colors (of the entire image or part of it through the masking) while keeping the deep colors in the image where other color spaces will fade the colors and cause noise, or at least are much more difficult to use.

HSL in the Power Curves can be used for dramatic changes, but also more subtle changes to bring out the colors and light in your image in dramatic ways, but also more subtle ways to simply adjust a few aspects.  By using the HSL curves separately, this avoids some of the problems inherent with HSL with the ability to adjust each curve independently to compensate.

In general, HSL can be less useful for general saturation and toning, but through the use of specific changes where HSL finds it strengths, it can be a definite additive to the toolset in image editing.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s