HEX to HSL Converter

The HEX to HSL converter turns hexadecimal codes like #3B82F6 into HSL values like hsl(217, 91%, 60%). HSL describes a color by its Hue (the color itself, 0–360°), Saturation (how vivid, 0–100%), and Lightness (how bright, 0–100%) — a model that maps far more closely to how people think about color than raw HEX digits do.

Once a color is in HSL, building a palette becomes intuitive: keep the same hue and nudge lightness for tints and shades, or change only saturation to make it bolder or more muted.

Why Convert to HSL

Tints & Shades

Raise or lower lightness to generate consistent lighter and darker variants of one base color.

Tune Vividness

Adjust saturation alone to make a color pop or to soften it for backgrounds and UI states.

Build Palettes

Rotate the hue in even steps to create harmonious, evenly-spaced color schemes.

How to Convert HEX to HSL

Enter the HEX Code

Type or paste a HEX value — with or without #. Both 3-digit shorthand (#F00) and 6-digit (#FF0000) formats are supported.

Read the HSL Output

The HSL value appears instantly as you type, and the live swatch updates so you can confirm the color visually.

Or Pick a Color

Click the preview swatch to open the native picker and choose a color visually — the HEX and HSL fields update for you.

Copy & Reuse

Copy the hsl() string for your CSS. The panel below also shows the color as HEX, RGB, HSV, and CMYK.

Features

Understanding the HSL Channels

Channel	Range	What it controls
Hue	0–360°	The color's position on the wheel: 0° red, 120° green, 240° blue.
Saturation	0–100%	Intensity: 0% is gray, 100% is the most vivid version.
Lightness	0–100%	Brightness: 0% is black, 50% is the pure hue, 100% is white.

Instant Conversion

Live, in-browser results update as you type — no reloads, nothing sent to a server.

Shorthand & Case

3-digit HEX is auto-expanded and letter case is ignored.

Preview & Picker

A live swatch plus a built-in color picker for visual selection.

All Formats at Once

HEX, RGB, HSL, HSV, and CMYK shown together for every color.

Frequently Asked Questions

What is HSL?

HSL stands for Hue, Saturation, and Lightness. Hue is the color type (0–360°), Saturation is how vivid it is (0–100%), and Lightness is how bright it is (0–100%).

Why use HSL instead of HEX or RGB?

HSL is more intuitive for humans. You can create lighter or darker shades by changing only lightness, and bolder or softer versions by changing only saturation — without guessing at HEX digits.

Is HSL supported in CSS?

Yes. All modern browsers fully support the hsl() and hsla() color functions, so you can paste the output straight into a stylesheet.

Does converting HEX to HSL lose precision?

HSL values are rounded to whole numbers for readability, so converting back may differ by one unit per channel. The visible color is effectively identical.

How do I make a lighter version of my color?

Keep the hue and saturation the same and increase the lightness percentage. For a darker shade, lower it instead — this is exactly why HSL is so handy for palettes.