HEX to HSL Converter

HSL describes color the way humans naturally think about it — hue (which color), saturation (how vivid), and lightness (how bright).

How HEX → HSL works

Convert HEX to RGB, normalize to 0–1, then derive lightness as the midpoint of max and min channels, saturation from the channel range, and hue from the dominant channel.

When to use HSL

Use HSL when you want to programmatically lighten, darken, or rotate the hue of a color. Most modern CSS color operations are easier in HSL than HEX.

Common HEX → HSL examples

Tap any swatch to see its full breakdown.

Navy

#000080

→ hsl(240, 100%, 25%)

Royal Blue

#4169E1

→ hsl(225, 73%, 57%)

Sky Blue

#87CEEB

→ hsl(197, 71%, 73%)

Baby Blue

#89CFF0

→ hsl(199, 77%, 74%)

Powder Blue

#B0E0E6

→ hsl(187, 52%, 80%)

Cornflower Blue

#6495ED

→ hsl(219, 79%, 66%)

Steel Blue

#4682B4

→ hsl(207, 44%, 49%)

Dodger Blue

#1E90FF

→ hsl(210, 100%, 56%)

Cerulean

#007BA7

→ hsl(196, 100%, 33%)

Teal Blue

#008080

→ hsl(180, 100%, 25%)

Cyan

#00FFFF

→ hsl(180, 100%, 50%)

Cobalt Blue

#0047AB

→ hsl(215, 100%, 34%)

Azure

#007FFF

→ hsl(210, 100%, 50%)

Sapphire

#0F52BA

→ hsl(216, 85%, 39%)

Midnight Blue

#191970

→ hsl(240, 64%, 27%)

Indigo

#4B0082

→ hsl(275, 100%, 25%)

Periwinkle

#CCCCFF

→ hsl(240, 100%, 90%)

Slate Blue

#6A5ACD

→ hsl(248, 53%, 58%)

Other color conversions

HEX → RGB RGB → HEX HEX → OKLCH OKLCH → HEX RGB → HSL HSL → RGB RGB → OKLCH

Convert any HEX on your Mac

Colorframe shows you HEX, HSL, and every other format side-by-side as you pick. Copy any with one click.

Download for Mac