HSL – FranLaff.com

HSL = Hue + Sat + Lum

In order to get PRECISE color relationships (palettes), Fran uses HSL.

H stands for HUE

Hue is represented by a number from 0 to 360, like degrees of a circle.

If you take the linear color spectrum (ROYGBV) and curl it up to form a circle, “red” touches “violet”. However, something a bit magical occurs, because “magenta” is formed as a “new” color – a blend between true red and true violet.

In the HSL color wheel, true red is the starting point, referenced by 0 degrees (which is also the same thing as 360 degrees).

— 0/360 is red, 120 is green, and 240 is blue — R-G-B

Here are 3 different HUES:

See 72 different hues (with popups)

S stands for SATURATION (sat)

Saturation is sometimes called “brightness” or “brilliance” and refers to how much GREY is in a color, from none at all (100% or full saturation) to completely grey (0% saturation).

These are all the SAME HUES, with different SATURATIONS:

In the HUE popups above, each ROW (across) is a different saturation

L stands for LUMINANCE (lum)

Also called “lightness”, this is the amount of white or black in the color, from almost white (95%lum) to almost black (5%lum).

Here is one HUE/SAT combination (235sat60) with a range of LUMINANCES:

** These buses are a unique feature of Fran’s HSL color palettes! **

For each color (hue+sat) in your palette, you get a full size (1000+ px) bus showing 19 different luminances, each with its hex code number!

Buses are monochrome palettes in themselves, and give you a fun tool to use to help you and/or your clients select the perfect shade for background, text, and graphic elements.

Pick a COLOR | 0 to 360 | Contact Fran

Using Color Math (HSL) instead of "Color Theory"

Usually when you see a color wheel or color palettes, they are based on generalized colors within a range of hues, saturations, and luminances.

For example, you might see a complementary palette featuring yellow and blue or a triad palette featuring red, green and blue.

HSL allows for PRECISE color relationships by distinguishing WHICH red, WHICH green, and WHICH blue.

All of the combinations below feature red, green and blue in a triad palette… but I bet your eyes can tell immediately, which one is just OFF. That one may qualify as a good palette using color theory, but the others are more precisely chosen based on Color Math (HSL).

ALL are triads by Color Theory... but which one is OFF?

Fran and digital COLOR

Around the end of 2015, I starting to ask questions such as:

“How can I find a purple that is just a little more BLUE than this one?”

“How can I find precise versions – lighter or darker – for THIS yellow?”

“WHY isn’t brown or grey a part of the color spectrum?”

“How can I explain which TYPE of pink I want to use — more red, more grey, more purplish, lighter, darker…?!

Everyone seems to have a different mental picture of ‘mauve’ or ‘fuschia’ or even of ‘purple’ or ‘blue’ or ‘green’!”

Over the next several years, I not only found HSL (and through that, the answers to my questions), but I also began to construct my own HSL color wheels and charts, just for the love of COLOR!

In my digital work (website and graphic design, digital products and promotional materials), I use hex numbers for colors. However, I have not found hex, RGB, CMYK, or even HSV or HSB to be intuitive or user-friendly. Therefore I routinely converted each HSL color to hex, making them convenient to use in all my digital projects.

After close to a decade of PLAYING with HSL and converting it to hex, I am ready to be YOUR “Digital Color Consultant.”

By the way, if you ever see one of my color wheels, you may notice that RED (0/360 degrees) is always at the 3 o’clock position (facing east) as opposed to straight up (facing north or at the 12 o’clock position). This is simply my personal preference, enjoying my purples being at the top.

You may notice another peculiarity: GREEN and BLUE each take up more space on the HSL color wheel than any other basic color and GOLD is the most rare. Notice any similarity, with the abundance and scarcity of colors in the natural world? This one has nothing to do with me… it’s all just part of Color Math. 😉

HSL is a color system that stands for HUE (from 0 to 360), the amount of pure color versus GRAY, called SATuration (0 to 100%), and LUMinance, or the amount of WHITE (100% luminance) to BLACK (0% luminance). Get mathematically PRECISE color palettes with HSL and Fran as your Digital Color Consultant!