RGB to HSL Converter

RGB describes a color by its red, green, and blue channels. HSL describes the same color by hue, saturation, and lightness — closer to how designers actually think about color.

How RGB → HSL works

Normalize R, G, B to 0–1. Lightness = (max + min) / 2. Saturation depends on lightness and the spread between channels. Hue depends on which channel is dominant.

When to use HSL

Use HSL when adjusting a color (especially lightness or hue) is easier than picking new RGB values from scratch.

Common RGB → HSL examples

Tap any swatch to see its full breakdown.

Navy

rgb(0, 0, 128)

→ hsl(240, 100%, 25%)

Royal Blue

rgb(65, 105, 225)

→ hsl(225, 73%, 57%)

Sky Blue

rgb(135, 206, 235)

→ hsl(197, 71%, 73%)

Baby Blue

rgb(137, 207, 240)

→ hsl(199, 77%, 74%)

Powder Blue

rgb(176, 224, 230)

→ hsl(187, 52%, 80%)

Cornflower Blue

rgb(100, 149, 237)

→ hsl(219, 79%, 66%)

Steel Blue

rgb(70, 130, 180)

→ hsl(207, 44%, 49%)

Dodger Blue

rgb(30, 144, 255)

→ hsl(210, 100%, 56%)

Cerulean

rgb(0, 123, 167)

→ hsl(196, 100%, 33%)

Teal Blue

rgb(0, 128, 128)

→ hsl(180, 100%, 25%)

Cyan

rgb(0, 255, 255)

→ hsl(180, 100%, 50%)

Cobalt Blue

rgb(0, 71, 171)

→ hsl(215, 100%, 34%)

Azure

rgb(0, 127, 255)

→ hsl(210, 100%, 50%)

Sapphire

rgb(15, 82, 186)

→ hsl(216, 85%, 39%)

Midnight Blue

rgb(25, 25, 112)

→ hsl(240, 64%, 27%)

Indigo

rgb(75, 0, 130)

→ hsl(275, 100%, 25%)

Periwinkle

rgb(204, 204, 255)

→ hsl(240, 100%, 90%)

Slate Blue

rgb(106, 90, 205)

→ hsl(248, 53%, 58%)

Other color conversions

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

Convert any RGB on your Mac

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

Download for Mac