What is HSL?

How to Read an HSL Color

Read hsl(220 60% 50%) from left to right. The hue is an angle in degrees; saturation and lightness are percentages. A number without an angle unit, such as 220 here, means degrees in CSS hue notation.

In this example, 220° selects a blue hue, 60% gives it moderate saturation, and 50% places it at the midpoint of the HSL lightness scale.

Hue: Choosing the Color

Hue is an angle around a color wheel. Moving around it changes the color family while saturation and lightness can stay the same.

Hue is circular: 0° = 360°, so both return to red. CSS wraps hue angles around this circle. At 0% saturation, changing hue has no visible effect because the color is achromatic.

Saturation: Controlling Color Intensity

Saturation controls how vivid or muted a color is within HSL. At 0%, the result is a neutral gray determined by lightness. At 100%, the color is fully saturated for that HSL hue and lightness combination.

These samples keep hue at 220° and lightness at 50%, changing only saturation:

Saturation is different from lightness or brightness. Increasing it does not always make a color appear brighter. At the black and white lightness endpoints, changing saturation does not change the resulting color.

Lightness: Making a Color Lighter or Darker

HSL lightness runs from 0% (black) through 50% (the midpoint for the chosen hue and saturation) to 100% (white). The midpoint does not mean half of the perceived brightness of white.

Keep hue at 220° and saturation at 60% to see the effect of lightness alone:

Lightness is a component of the HSL representation. It is not perceived brightness, luminance, WCAG relative luminance, or an accessibility contrast score.

Putting Hue, Saturation, and Lightness Together

Compare the base color with three variations. Each changes just one component, making its role easier to see:

HSL vs RGB vs HEX

For common web colors, HEX, RGB, and HSL can describe the same resulting sRGB color using different notation. HEX writes RGB channels in hexadecimal, RGB lists channel values directly, and HSL expresses an RGB-derived hue, saturation, and lightness.

These three examples describe the same color. Paletile’s Color Converter converts hsl(220 60% 50%) to RGB channels 51, 102, and 204, which become hexadecimal 33, 66, and CC.

No notation is universally better. Choose the one that suits the adjustment or task you want to make.

Learn how HEX color codes work →
Learn how RGB colors work →

Try the Color Converter → to convert between HEX, RGB, and HSL and experiment with your own colors.

Using HSL in CSS

Use hsl() anywhere CSS accepts a color. Modern CSS separates the components with spaces:

.example {
    color: hsl(220 60% 50%);
    background-color: hsl(220 40% 95%);
    border-color: hsl(220 30% 80%);
}

Existing code often uses commas, as in hsl(220, 60%, 50%). That gives the same color as hsl(220 60% 50%).

HSL transparency

Add an alpha value after a slash to control opacity. In hsl(220 60% 50% / 50%), alpha is 50%: the color is half opaque, and the background affects the visible result. Alpha 0% is fully transparent; 100% is fully opaque.

.overlay {
    background-color: hsl(220 60% 50% / 50%);
}

You may also see hsla(220, 60%, 50%, 0.5) in older code. hsla() is an alias of hsl(); transparency does not require a separate function.

Why Is HSL Useful?

HSL lets you make related color adjustments without changing three RGB channels individually. Keep the hue to explore lighter variations, lower saturation for muted colors, or change hue while retaining the same numerical saturation and lightness.

Such variations can be starting points for related UI states or a palette. They do not automatically produce a good palette: contrast, hierarchy, context, accessibility, and visual balance still matter. Preview the colors together in the design where they will be used.

Limitations of HSL

HSL is convenient for editing colors, but it is not perceptually uniform. Two colors with the same HSL lightness can look very different in visual brightness: yellow and blue at 100% saturation and 50% lightness are a useful example.

Equal numerical changes are not guaranteed to look equally large. HSL values alone cannot reliably judge perceived brightness, visual contrast, or accessibility. More perceptually oriented color models also exist.

HSL and Accessibility

An HSL lightness percentage is not an accessibility score. A color ending in 50% is not automatically readable against another color. Text and background readability depends on their actual contrast, and text size also matters.

Check the contrast of the actual foreground and background pair, accounting for the background beneath any transparency. Use text labels or other cues as well as color. The samples here keep labels outside the colored swatches so their meaning does not rely on color alone.

Frequently Asked Questions

What does HSL stand for?

Hue, Saturation, and Lightness: three components for describing an RGB-derived color.

What does hue mean in HSL?

Hue identifies the basic color family and is usually represented as an angle around a color wheel.

What does 0° hue mean?

0° represents red. 360° returns to the same hue position because the hue scale is circular.

What does 0% saturation mean?

The result is a shade of gray determined by lightness, including black and white at the endpoints.

What does 50% lightness mean?

It is the midpoint of the HSL lightness scale for the chosen hue and saturation, not 50% perceived brightness.

Is HSL the same as RGB?

No. HSL is a different representation derived from RGB. Both can describe the same resulting web color.

Is HSL better than HEX or RGB?

Not universally. HSL can be more convenient for adjusting color components; HEX is compact, and RGB gives direct channel values.

Can HSL include transparency?

Yes. For example, hsl(220 60% 50% / 50%) specifies 50% alpha.

Can I use HSL in CSS?

Yes. CSS supports hsl() for text, backgrounds, borders, and other color properties.