TTCP Buy me a coffee

HEX to HSL Converter

Convert HEX colors into HSL values and tune hue, saturation and lightness for CSS-friendly color work.

Paste hex

Colorpicker

#6C63FFElectric Iris

Select color system

HSL

Convert HEX to HSL

HSL separates color into hue, saturation and lightness, which makes it practical for building CSS themes and UI states from a single base color.

HEX to HSL examples

Electric iris#6C63FF → hsl(244deg, 100%, 69%)
Bright yellow#FFC72C → hsl(44deg, 100%, 59%)
Fresh green#00B140 → hsl(142deg, 100%, 35%)

HEX to HSL FAQ

What is HSL used for?

HSL is useful when you want to adjust a color by changing its hue, saturation or lightness without manually editing RGB channels.

Is HSL supported in CSS?

Yes. Modern CSS supports HSL values, including syntax such as hsl(244deg 100% 69%).

Why use lightness instead of brightness?

Lightness in HSL is a color model value. It is useful for creating tints and shades, but it is not the same as perceived brightness or contrast.

Related color tools

HEX to RGB Get RGB and RGBA values from HEX. Color palette generator Build shades from one base color. Pantone color match Compare approximate Pantone-like colors.