Drop in any red, green, and blue value and get the matching HSL (hue, saturation, lightness) instantly — with copy-ready CSS and a live preview swatch.
The RGB model describes a color by how much red, green, and blue light it emits, each from 0 to 255. HSL describes the same color in a way humans reason about more naturally: hue (the color's position on the 0–360° wheel), saturation (how vivid versus gray it is), and lightness (how close it is to white or black). Converting between them is a fixed mathematical mapping, so the result is exact — no approximation.
First, normalize each channel to the 0–1 range by dividing by 255: r = R/255, and likewise for green and blue. Find the channel maximum max and minimum min. Lightness is the midpoint of those extremes: L = (max + min) / 2.
If max equals min the color is a shade of gray, so saturation and hue are both 0. Otherwise let d = max − min. Saturation depends on lightness: when L < 0.5, S = d / (max + min); when L ≥ 0.5, S = d / (2 − max − min). Hue is found from whichever channel is the maximum — red gives (g − b)/d, green gives (b − r)/d + 2, and blue gives (r − g)/d + 4 — then multiplied by 60 to land on the degree wheel, wrapping negatives by adding 360.
Finally, hue is reported in degrees while saturation and lightness are shown as percentages. That is exactly what this converter does on every keystroke, which is why the HSL string it produces can be pasted straight into a CSS rule like color: hsl(217, 91%, 60%);.