Convert RGB values to HSL and see the arithmetic: lightness is the average of the largest and smallest channel, saturation comes from their spread, and hue from which channel leads. Accepts rgb() syntax or bare numbers, with modern and legacy hsl() output.
Settings
Generated locally in your browser — your settings and results never leave this page.
Reading structure out of raw channels
Channel values answer “how much light per primary”; HSL answers the questions people actually ask — which hue family, how strong, how light. The conversion is a small piece of analysis: find the extremes, measure their spread, locate the leader. This page performs it live and shows every intermediate quantity for your exact input.
Worked example: rgb(72, 209, 204)
Medium turquoise:
max = 209 (green) min = 72 (red) spread = 137 L = (209 + 72) / 2 / 255 = 55.1% S = 137 / (255 × (1 − |2×0.55 − 1|)) = 59.8% H = green leads, blue close behind = 177.8°
Note what the middle channel (blue, 204) did: it pulled the hue from pure green territory toward cyan. The max/min pair alone would say “a green”; the middle channel makes it turquoise.
Practical uses
Sorting colors by hue (the Palette Sorter uses exactly this analysis), detecting near-grays programmatically (tiny spread → tiny saturation), building color pickers, and log-friendly color descriptions — hsl(177.8, 59.8%, 55.1%) in a debug line is legible where channel triplets are noise.
Two honest limitations
HSL treats its cylinder as uniform when perception is not: saturation percentages are not comparable across hues, and lightness is famously dishonest (yellow vs blue at the same L). For analysis that must match appearance — palette balance, contrast reasoning — convert to OKLCH instead; for quick structural reads and edits, HSL remains the right amount of simple.
Reference values, computed live
The analysis direction deserves its own anchors. Seven channel triplets and the HSL each reduces to:
| Color | RGB | HSL |
|---|---|---|
| indigo | rgb(75, 0, 130) | hsl(274.6, 100%, 25.5%) |
| gold | rgb(255, 215, 0) | hsl(50.6, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25.1%) |
| slateblue | rgb(106, 90, 205) | hsl(248.3, 53.5%, 57.8%) |
| sienna | rgb(160, 82, 45) | hsl(19.3, 56.1%, 40.2%) |
| yellowgreen | rgb(154, 205, 50) | hsl(79.7, 60.8%, 50%) |
| dodgerblue | rgb(30, 144, 255) | hsl(209.6, 100%, 55.9%) |
Two columns repay attention: lightness, which depends only on each row’s channel extremes (verify it — average the largest and smallest, divide by 255), and saturation, which hits 100% exactly where one extreme touches its bound. The middle channel’s absence from both is HSL’s defining shortcut, visible here as data.
How to use the RGB to HSL Converter
- Enter the RGB color in any common form – rgb(30 144 255), commas, or bare numbers.
- The result updates live as you type – no convert button needed.
- Follow the max/min working shown for your channels.
- Copy the value with the copy button, or switch the output format dropdown for other export shapes.
Frequently asked questions
What is the formula for RGB to HSL?
With channels scaled 0-1: L = (max+min)/2. S = (max−min)/(1−|2L−1|) when the spread is non-zero. Hue: 60° × sector, where the sector depends on which channel is max and the fractional position between the other two. The tool substitutes your numbers into each line.
For rgb(30, 144, 255), why is lightness only about 56%?
Lightness averages the extreme channels: (255+30)/2 = 142.5, and 142.5/255 ≈ 55.9%. The middle channel (144) never affects HSL lightness – one of the quirks that makes HSL fast but perceptually crude.
Which channel decides the hue?
The largest one picks the 120° region (red, green or blue territory) and the difference between the other two positions you inside it. For 30/144/255, blue leads and the green fraction pulls the hue to 209.6° – azure territory.
Why do I get saturation over 100% from some formulas online?
Those formulas divide by the wrong term near the lightness extremes. The bounded form used here – dividing by 1−|2L−1| – keeps saturation in 0-100% for every valid RGB input.
Is RGB to HSL the same math as RGB to HSV?
They share the max/min analysis but differ afterwards: HSL centers the pure color at L=50% while HSV puts it at V=100%. The same RGB can read as L 56% but V 100% – compare both with the RGB to HSV converter.
Do rounding errors accumulate if I convert repeatedly?
Round-tripping RGB→HSL→RGB returns the same 8-bit color, so a single cycle is safe. Repeatedly editing rounded HSL text output and re-converting can drift by single steps – keep one source of truth.
Can this parse CSS colors that are not rgb()?
This page expects RGB-style input by design. For hex, named colors or any other notation, the Complete Color Converter accepts everything and shows HSL among its outputs.
