HEX to HSL

Your data never leaves your browser

Convert HEX color codes to HSL (Hue, Saturation, Lightness).

Brie — Bug Reporting Tool

Building a UI and spotting visual bugs?

Brie lets you capture, annotate, and share screenshots with your team — with full device and browser context attached.

Install Brie — It's FreeLearn more →

About HEX to HSL

Convert hexadecimal color codes to HSL format, which represents color as Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). HSL is more intuitive for designers and is natively supported in modern CSS.

How to use

  1. Enter one HEX color code per line (e.g. #FF5733).
  2. The HSL equivalent appears instantly in the output panel.
  3. Click Copy to copy the results to your clipboard.

More Color Tools

HEX to RGB

Convert HEX color codes to RGB values.

RGB to HEX

Convert RGB color values to HEX color codes.

HEX to CMYK

Convert HEX color codes to CMYK color values.

Frequently Asked Questions

FAQs about HEX to HSL

What is HSL?

HSL stands for Hue, Saturation, Lightness. Hue is a degree on the color wheel (0–360), Saturation is the intensity of the color (0–100%), and Lightness is how light or dark the color is (0–100%).

Why use HSL instead of RGB?

HSL is more intuitive for humans. Adjusting lightness or saturation in HSL is much more predictable than adjusting individual RGB channels.

Does CSS support HSL?

Yes. Modern CSS supports the hsl() color function directly: hsl(9, 100%, 60%). It is widely supported in all modern browsers.

What is hsl(0, 100%, 50%)?

hsl(0, 100%, 50%) = pure red (#FF0000). Hue 0° points to red on the color wheel.

Can I convert multiple colors at once?

Yes. Enter one HEX color per line for batch conversion.