What Is HSL Color? Hue, Saturation and Lightness Explained Simply

HSL is a color format you will encounter in CSS, design tools, and color pickers. It stands for Hue, Saturation, and Lightness — and unlike HEX or RGB, it describes color in a way that maps to how humans naturally think about it. You can look at an HSL value and have a reasonable idea of what color it is. You cannot do that with #4a90e2 or rgb(74, 144, 226).

Here is a plain-English breakdown of what each component means, when to use HSL, and how to get HSL values for any color for free.

What Does Each Part of HSL Mean?

Hue (H) — measured in degrees from 0 to 360, representing position on a color wheel:

• 0 = red
• 60 = yellow
• 120 = green
• 180 = cyan
• 240 = blue
• 300 = magenta
• 360 = red again (it wraps around)

Saturation (S) — how vivid or washed-out the color is, as a percentage:

• 0% = completely gray (no color, just lightness)
• 100% = fully saturated, pure vivid color

Lightness (L) — how light or dark the color is, as a percentage:

• 0% = pure black
• 50% = the "true" version of the hue at full saturation
• 100% = pure white

Reading an HSL Value in Practice

Example: hsl(213, 72%, 59%)

• 213 degrees on the color wheel — that is in the blue range (between cyan at 180 and blue at 240)
• 72% saturation — fairly vivid, not washed out
• 59% lightness — lighter than the pure hue but not pale

Result: a medium-bright cornflower blue. You could roughly predict this just from reading the numbers — something you cannot do with the equivalent HEX (#4a90e2) without seeing it.

Sell Custom Apparel — We Handle Printing & Free Shipping

Why HSL Is Useful for CSS and Design Systems

HSL shines in two scenarios:

1. Creating color variants programmatically — if your base brand blue is hsl(213, 72%, 59%), you can create a lighter tint by increasing L (hsl(213, 72%, 80%)) or a darker shade by decreasing it (hsl(213, 72%, 35%)) — all while keeping the same hue and saturation. With HEX you would have to guess.

2. CSS custom properties — defining colors as HSL variables makes the relationships between colors readable in the code:

--brand-blue: 213 72% 59%;
--brand-blue-light: 213 72% 80%;
--brand-blue-dark: 213 72% 35%;

This pattern is used in modern CSS design tokens and popular component libraries.

HSL vs RGB vs HEX — Which Should You Use?

• Use HSL when writing CSS custom properties, building design systems, or when you want to programmatically adjust color lightness or saturation
• Use HEX when sharing colors with others, pasting into design tools like Canva or Figma, or writing static CSS color values
• Use RGB when you need transparency (rgba()) or when the tool you are working in expects separate R, G, B values

All three represent the same color — the choice is about context and convenience.

How to Get the HSL Value for Any Color

Open a free color picker in your browser, select your color on the wheel, and copy the HSL output. The tool shows HEX, RGB, and HSL simultaneously — click the HSL field to copy it. No manual math, no conversion tool needed.

Frequently Asked Questions

Is HSL supported in all browsers?

Yes. HSL has been supported in CSS since 2008 and works in all modern browsers. You can use hsl() and hsla() in any CSS color property today.

What is HSLA?

HSLA adds a fourth value — alpha — for transparency. hsla(213, 72%, 59%, 0.5) is the same blue color at 50% opacity. Modern CSS also accepts hsl(213 72% 59% / 50%) using the newer space-separated syntax.

Why does lightness 50% give the "true" color rather than 0% or 100%?

In the HSL model, 50% lightness is the midpoint where the pure hue is displayed at full saturation. Below 50% the color mixes toward black; above 50% it mixes toward white. 0% is always black and 100% is always white regardless of hue or saturation.

Can I enter HSL values directly into Figma?

Figma does not have a dedicated HSL input field, but it does show HSL in the color picker in some configurations. HEX is the most direct format to use when pasting into Figma from an external tool.