HSL stands for Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). It is often more intuitive than RGB for colour manipulation.

Why use HSL over RGB?

HSL makes it easy to create colour variations, adjusting lightness or saturation produces predictable, harmonious results.

Is the conversion accurate?

The conversion uses the standard RGB-to-HSL formula. Hue, saturation and lightness are rounded to whole numbers, so converting the HSL back to RGB can shift a channel slightly (by up to 5 out of 255).

How do I use the HSL value in CSS?

Copy it as shown, for example hsl(217, 91%, 60%). CSS accepts this comma syntax, and current browsers also accept the space-separated form hsl(217 91% 60%).

HEX to HSL Converter

Enter a HEX color code and get HSL (Hue, Saturation, Lightness) values. HSL is often easier to understand intuitively. Runs in your browser.

Input

All formats

HEX#3b82f6

RGBrgb(59, 130, 246)

HSLhsl(217, 91%, 60%)

CONVERT

All three formats are shown simultaneously regardless of mode.

Runs entirely in your browser

How it works

The HEX code is first read as RGB, then each channel is scaled to 0 to 1. Lightness is the average of the largest and smallest channel, saturation comes from the gap between them, and hue from which channel is largest and how the other two compare. For #3b82f6 that gives hsl(217, 91%, 60%), rounded to whole numbers. All conversion runs in JavaScript in your browser.

Processing runs in your browser

All computation happens inside your browser tab. Our servers are not involved at any point.

Related operations

To check whether two colours meet WCAG legibility, try the contrast checker. For building a coordinated set from one base colour, use the colour palette generator. To craft smooth multi-stop blends in CSS, see the CSS gradient generator.

Frequently asked questions

What is HSL?: HSL stands for Hue (0–360°), Saturation (0–100%), and Lightness (0–100%). It is often more intuitive than RGB for colour manipulation.
Why use HSL over RGB?: HSL makes it easy to create colour variations, adjusting lightness or saturation produces predictable, harmonious results.
Is the conversion accurate?: The conversion uses the standard RGB-to-HSL formula. Hue, saturation and lightness are rounded to whole numbers, so converting the HSL back to RGB can shift a channel slightly (by up to 5 out of 255).
How do I use the HSL value in CSS?: Copy it as shown, for example hsl(217, 91%, 60%). CSS accepts this comma syntax, and current browsers also accept the space-separated form hsl(217 91% 60%).

Last reviewed September 30, 2026

Other pages for this tool

Related tools

Background reading: Complete guide to color tools