Convert RGB to HSL
Converting Red, Green, Blue (RGB) to Hue, Saturation, Lightness (HSL) is a precise, rule-based operation — both formats describe the same color with different numbers. Whether you are tuning a CSS custom property, matching a brand color across design tools, or preparing values for print, this page gives you an interactive converter, the exact RGB → HSL method, a worked example, a quick-reference table and the details that matter (rounding, gamut and print caveats).
From
To
—
—
—
Live preview
How to convert RGB to HSL
Take this real example — the color firebrick(#c2410c):
rgb(194, 65, 12) → hsl(17.47, 88.35%, 40.39%)
- Normalize R, G, B to 0–1 and find the max and min channels; L = (max + min) / 2.
- S = (max − min) / (1 − |2L − 1|); the hue H is the angle of the max channel around the RGB wheel (0° red, 120° green, 240° blue).
- Invert with the CSS Color 4 construction: C = (1 − |2L − 1|)·S, X = C·(1 − |((H/60) mod 2) − 1|), m = L − C/2, and add (C, X, 0) in the right order for the hue sector.
C = (1 − |2L − 1|)·S, X = C·(1 − |(H/60 mod 2) − 1|), m = L − C/2 (CSS Color 4)
RGB to HSL conversion table
| Color | RGB | HSL |
|---|---|---|
| White | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| Red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| Blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| VersatilBox accent | rgb(194, 65, 12) | hsl(17.47, 88.35%, 40.39%) |
| Tailwind blue-500 | rgb(59, 130, 246) | hsl(217.22, 91.22%, 59.8%) |
| Tailwind emerald-500 | rgb(16, 185, 129) | hsl(160.12, 84.08%, 39.41%) |
About these formats
RGB (Red, Green, Blue). RGB is the additive model screens use: every color is a mix of red, green and blue light from 0 to 255 per channel. It is the numeric base all on-screen conversions pass through.
HSL (Hue, Saturation, Lightness). HSL is a cylindrical way of thinking about RGB that matches how humans adjust color: pick a hue angle, then dial saturation and lightness. Defined by CSS Color 4.
Frequently asked questions
How do I convert RGB to HSL?
Normalize R, G, B to 0–1 and find the max and min channels; L = (max + min) / 2. S = (max − min) / (1 − |2L − 1|); the hue H is the angle of the max channel around the RGB wheel (0° red, 120° green, 240° blue). Invert with the CSS Color 4 construction: C = (1 − |2L − 1|)·S, X = C·(1 − |((H/60) mod 2) − 1|), m = L − C/2, and add (C, X, 0) in the right order for the hue sector. The converter above does it instantly, including the reverse direction.
What is RGB?
RGB — Red, Green, Blue — is the additive model screens use: every color is a mix of red, green and blue light from 0 to 255 per channel. It is the numeric base all on-screen conversions pass through.
What is HSL used for?
HSL (Hue, Saturation, Lightness) is a cylindrical way of thinking about RGB that matches how humans adjust color: pick a hue angle, then dial saturation and lightness. Defined by CSS Color 4.
Is the RGB → HSL conversion exact?
Yes. The formulas are deterministic and both formats store the same information for on-screen color; values are rounded only for display.
Why does the HSL value look different in other tools?
Small differences come from rounding (how many decimals are kept) and from out-of-gamut handling. This site follows the CSS Color 4 algorithms and shows OKLCH with 3 decimals, the same convention used by browsers and mainstream design tools.