Using the HSL Color Model - Algorithmic Color

Using the HSL Color Model - Algorithmic Color
When creating digital art, most artists have found the HSL Color Model the most flexible color model to use when generating color with algorithms. It is the HSL color model and the CSS hsl() function that we will be using in our code.

HSL Color Model

HSL stands for Hue, Saturation and Lightness. Many digital artist use this color model, because we can control the hue as well as the amount of saturation and lightness with code. Another feature that makes this model so popular is that we can represent the hues as points on a circle or color wheel. Using this color wheel, we can represent a hue (or color) as a number between 0 and 360 degrees and use that number to identify the hue or hues that we wish to manipulate in our code. Here is a simplified example of the hsl() color wheel (see screenshot), showing only every tenth hue on the wheel. But keep in mind that there are nine more hues between the ones we see on the wheel.

REMEMBER THIS!

hsl(hue, saturation, lightness)
hue - To refer to a color, we use a number between 0 and 360.

Saturation (Tones)

The saturation (intensity) of a hue is represented as a percentage between zero and 100%. The hue is most saturated at 100%. Just like mixing real paints, we add a neutral gray or a complementary color to the hue to reduce the saturation or TONE, until we get to zero (medium gray).

For each of the colors on our color wheel (see screenshot), the hue is at its pure intensity when the saturation value is 100%. As we progressively add gray to the hue, the TONE decreases until we reach 0% saturation (medium gray) at the center of the color wheel. Notice how the six examples in the color wheel all reach a medium gray at the center of the wheel.

REMEMBER THIS!

hsl(hue, saturation, lightness)
saturation- To decrease the intensity of the hue, we can add a medium gray or a complementary color. The hue is most saturated at 100%, with no gray color added.

Lightness (Tints and Shades)

As we continue using the hsl color wheel (see screenshot), we represent lightness as a percentage between zero and 100%. As we reduce the lightness value for a hue from 50% to 0%, the color that we see on the screen progressively becomes darker. You can think of this as adding small amounts of black to the hue, resulting in increasingly darker SHADES, until we get to zero (black). On the other hand, as we increase the lightness for a hue from 50% to 100%, the color becomes progressively lighter. This is to say, we can add small amounts of white to a hue, resulting in increasingly lighter TINTS, until we get to 100% (white). Notice that the color wheel is positioned at 50% lightness for each hue. When the lightness is at 50%, we see the true hue or color (i.e. no white or black added).

REMEMBER THIS!

hsl(hue, saturation, lightness)
lightness - To create tints and shades of a hue, we use a percentage between 0 and 100%. The true color or hue is at 50% lightness.

Further Reading:

https://devmag.org.za/2012/07/29/how-to-choose-colours-procedurally-algorithms/
https://martin.ankerl.com/2009/12/09/how-to-create-random-colors-programmatically/

Screenshots used by permission. Processing (Java), p5.js (JavaScript) and Processing.py (Python) are software projects created by the Processing Foundation.





RSS
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map





Content copyright © 2021 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.