Skip to main content
lab.golamrabbani.org

RGB to HSL Converter

Convert RGB (0-255) to HSL hue, saturation, and lightness with hex side-by-side.

Written by Golam Rabbani, Founder & Lead Engineer

How to use this rgb to hsl converter

  1. Enter the red, green, and blue channel values (each 0–255).
  2. Press Convert to HSL to compute the hue, saturation, and lightness.
  3. Read the hsl() string, the matching hex, and a colored swatch in the result panel.
  4. Use Copy result to put the conversion on your clipboard for pasting into CSS.

About this rgb to hsl converter

The RGB to HSL converter normalises each input channel to 0–1, finds the max and min channel, and computes lightness as (max + min) / 2. Saturation is the chroma divided by 1 − |2L − 1|. Hue is derived from which channel is the max — red, green, or blue — using the standard piecewise formula and multiplied by 60° per sextant. The result is reported in CSS-compatible degrees, percent, percent.

Worked example: RGB(59, 130, 246) normalises to (0.231, 0.510, 0.965). Max is blue at 0.965, min is red at 0.231, so lightness is (0.965 + 0.231) / 2 ≈ 0.598 → 60%. Saturation works out to about 0.91 → 91% (chroma 0.734 over 1 − 0.196). With blue as the max, hue is 60° × ((R − G) / chroma + 4) ≈ 217°. The output is therefore hsl(217, 91%, 60%), matching the well-known Tailwind blue-500 token.

All math runs in your browser — no server call.

FAQ

How does the RGB to HSL converter compute hue?
It picks the largest channel, computes the chroma (max minus min), and applies the piecewise hue formula: red sector ((G − B) / chroma + (G < B ? 6 : 0)), green sector ((B − R) / chroma + 2), blue sector ((R − G) / chroma + 4), then multiplies by 60°.
Why is saturation 0% on grays?
When R, G, and B are equal, max equals min, chroma is zero, and saturation collapses to 0 — the color is on the gray axis regardless of lightness.
Can I paste the result straight into CSS?
Yes. The result is in the canonical hsl(h, s%, l%) format that every modern browser accepts.
Does the converter handle out-of-range values like 300 in a channel?
No. The tool rejects values outside 0–255 with an inline error so you can correct them before computing.
Why round the hue to a whole degree?
Because CSS accepts integers for hue and most palettes track hue in 5–10° increments. Rounding produces cleaner copy-paste output without changing the perceived color.