This tool runs entirely in your browser. Nothing you paste is uploaded.
How you can check →RGB to HSL converter
Converts RGB to HSL, entirely in your browser, with the same round-trip receipt the full color converter shows.
RGB to HSL is a pure geometric transform — no gamma correction, no perceptual model, just algebra on the three 0-255 channel values. Hue comes from which channel is largest and by how much relative to the other two; saturation and lightness both come from the max and min channel values. That simplicity is also HSL's biggest limitation: the 'L' in HSL is not a measure of how light a color actually looks, it's the midpoint between the brightest and darkest of the three channels, and that midpoint tracks perceived brightness only loosely.
The clearest demonstration: hsl(60 100% 50%) is pure yellow, and hsl(240 100% 50%) is pure blue. Both claim exactly 50% lightness. Their real WCAG relative luminance — the number that actually predicts how bright each looks on screen and what it will contrast against — is 0.93 for the yellow and 0.07 for the blue, a 13x difference, roughly an 8:1 contrast ratio between two colors HSL insists are equally light. This is why a color ramp or gradient built by walking HSL's lightness channel evenly often looks visually uneven, with some hues appearing to leap in brightness partway through.
A worked example, measured directly: rgb(59, 130, 246) — Tailwind's blue-500 — converts to hsl(217, 91%, 60%) at whole-number precision. Re-parsing that string back gives rgb(60 131 246), off by one 8-bit unit each of red and green from the original — a small loss, but a real one, and one this page's converter reports honestly rather than implying every whole-number HSL value round-trips exactly. The same is true going the other direction: #7f3fbf converts to hsl(270, 50%, 50%), and parsing that string back gives #8040bf, off by one unit each of red and green again. Higher decimal precision closes the gap for both, and this page's converter finds and shows the precision that actually round-trips for your specific input.
RGB to HSL is still genuinely useful — it's a longstanding CSS syntax with universal browser support, and adjusting saturation or hue independently is more intuitive in HSL than in raw RGB, since the three RGB channels are correlated with each other in a way HSL's axes deliberately aren't. It just isn't the space to reach for when lightness needs to track how a color actually looks — that's what OKLCH's L channel is for.
Use this conversion when you need the classic three-value CSS color syntax for broad compatibility, or when you're adjusting a color's saturation or rotating its hue by eye and HSL's more intuitive sliders make that easier than working in raw RGB.
Frequently asked questions
- Why do yellow and blue both show 50% lightness in HSL?
- HSL's lightness is the midpoint between a color's brightest and darkest RGB channel, not a measure of actual perceived brightness. hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) both hit that midpoint at 50%, despite an 8:1 real contrast difference between them (WCAG relative luminance 0.93 vs 0.07).
- Does my RGB always round-trip exactly through whole-number HSL?
- No — it depends on the specific color. rgb(59, 130, 246) prints as hsl(217, 91%, 60%) at whole numbers, but parsing that back returns rgb(60, 131, 246), off by one unit of red and green. This page's converter shows the real receipt, and the higher precision that closes the gap, for your specific input.
- Is HSL or OKLCH better for building a color scale?
- OKLCH, if the goal is scale steps that look evenly spaced. HSL's lightness axis doesn't track perceived brightness consistently across hues, so an HSL-based ramp often looks uneven — some hues appear to jump in brightness partway through the scale.