What does HSL stand for?

HSL stands for Hue, Saturation, and Lightness. Hue is the color angle (0-360), saturation is the intensity (0-100%), and lightness is how light or dark the color is (0-100%).

Why use HSL over RGB?

HSL makes it easier to create color variations. You can lighten or darken a color by adjusting only the L value, which is harder to do intuitively in RGB.

Can I go back from HSL to HEX?

Yes. Use the HSL to HEX tool on this site for the reverse conversion.

Does CSS support hsl() natively?

Yes. All modern browsers support hsl() and hsla() in CSS. The output from this tool can be pasted directly into a stylesheet.

HEX to HSL Converter

Paste a HEX code and get the hsl() CSS value with a color preview.

Color

Last updated: 2026-06-09 · Reviewed by Nham Vu