RGB describes a colour by how much light each of three primaries contributes. HSL describes the same point in sRGB space using a colour wheel angle, a purity percentage and a brightness percentage. The two notations are mathematically interchangeable, but they are not equally easy to reason about. Nudging a hue by fifteen degrees is an obvious edit in HSL and an opaque one in RGB.
Every calculation runs in the browser tab you already have open. There is no upload, no queue and no cap on how many colours you push through in a session, because the whole conversion is a dozen lines of arithmetic executing on your own machine.
When to convert RGB to HSL
Reach for HSL whenever you need to describe a relationship between colours rather than a single fixed value. A hover state that is ten percent lighter, a disabled state that is forty percent less saturated, a set of six chart series spaced evenly around the wheel: all of those are trivial edits to an HSL triplet and awkward guesswork in RGB. Reading hue saturation lightness values instead of raw channels is what makes a colour system adjustable: you change one number and the relationship to every other colour in the palette holds.
RGB stays the better notation when you are talking to hardware or to a drawing API. Canvas, WebGL, image buffers and most colour pickers all deal in channel values, so you convert rgb to hsl to think about a colour and convert back when you need to draw it.
- Building a hover, focus or disabled variant by shifting lightness rather than picking a new colour by eye.
- Spacing a set of category colours evenly around the hue wheel for a chart or a tag list.
- Desaturating a brand colour for a muted background without changing its hue at all.
- Auditing a stylesheet where some colours are written as hex and others as hsl and you need to compare them.
- Explaining a colour to someone in words, since 210 degrees blue at 80 percent saturation is more descriptive than 59, 130, 246.
What the hue, saturation and lightness values actually mean
Hue is an angle in degrees around a colour wheel. Zero and 360 are red, 120 is green, 240 is blue, and everything else sits between those anchors. Because it wraps, adding 180 degrees always lands on the opposite side of the wheel, which is exactly how a complementary pair is defined.
Saturation is a percentage describing how far the colour sits from grey. At 0 percent every hue collapses to the same grey, so the hue angle stops meaning anything. At 100 percent the colour is as pure as the display can render at that lightness.
Lightness is a percentage where 0 is black, 100 is white and 50 is where the fully saturated version of each hue lives. This is the part that surprises people: HSL lightness is a geometric position in the colour solid, not a perceptual brightness. Yellow at 50 percent lightness looks far brighter than blue at 50 percent lightness, because human vision is much more sensitive to the green part of the spectrum.
How this RGB to HSL converter does the maths
Each channel is first divided by 255 to give a fraction between 0 and 1. The largest and smallest of those three fractions are found, and their midpoint becomes the lightness. Their difference, called the chroma, drives everything else: if it is zero the colour is a neutral grey, so saturation is reported as zero and hue as zero by convention.
When chroma is not zero, saturation is the chroma divided by one minus the absolute distance of lightness from the midpoint, which is what makes saturation reach 100 percent only near a lightness of 50. Hue comes from whichever channel was the largest, offset by 60 degree segments so that the six corners of the RGB cube land on the six primary and secondary hues.
Rounding is the only place precision is lost. Hue is reported to the nearest degree and the two percentages to the nearest whole number, which is what CSS authors normally want. Converting back from those rounded numbers can land one or two units away on a channel, which is invisible on screen but worth knowing if you are diffing generated stylesheets.
Writing rgb to hsl css that modern browsers accept
CSS Color Module Level 4 accepts both the legacy comma form, hsl(210, 92%, 60%), and the modern space separated form, hsl(210 92% 60%). Both are supported everywhere that matters today. The modern form also lets you append an alpha value after a slash, so hsl(210 92% 60% / 40%) replaces the old hsla function entirely.
The hue unit is optional in the plain number form but you may also write it explicitly as 210deg, and turns, radians and gradians are all legal. Saturation and lightness must carry percent signs. A missing percent sign is the single most common reason a hand written HSL colour silently fails to apply.
This tool outputs both notations so you can paste whichever suits the codebase you are working in, plus a ready made custom property declaration for design token files.
Where HSL falls short
HSL is a simple transformation of sRGB, not a perceptual model. Two colours with the same lightness number can look wildly different in brightness, which is why an HSL derived palette often has one swatch that jumps out awkwardly. It also means HSL lightness cannot be used as a proxy for contrast, so a pair of colours that looks safely separated in HSL may still fail an accessibility check.
For work where perceptual uniformity matters, OKLCH is the better destination. It uses the same three ideas of lightness, chroma and hue, but spaces them so that equal numeric steps look like equal visual steps. HSL remains the pragmatic choice for quick adjustments and for older codebases where OKLCH support is not guaranteed.
| Notation | Example | Best used for |
|---|---|---|
| RGB | rgb(59 130 246) | Canvas, WebGL and image buffers |
| HSL | hsl(217 91% 60%) | Building tints, shades and hue spaced sets |
| Hex | #3b82f6 | Compact storage in stylesheets and token files |
How to convert RGB to HSL
- 1
Enter your RGB values
Type red, green and blue numbers between 0 and 255, or drag the sliders until the swatch matches what you want.
- 2
Set the alpha if you need it
Leave alpha at 100 percent for an opaque colour, or lower it to produce an hsl value with a slash separated alpha.
- 3
Read the HSL output
The hue in degrees, plus saturation and lightness as percentages, appear beside the swatch in both CSS notations.
- 4
Copy the notation you need
Use the copy button next to the modern form, the legacy comma form or the custom property declaration.
Related tools worth bookmarking
Sources and further reading
Frequently asked questions
Common questions about the rgb to hsl converter.
The underlying maths is exact and fully reversible, but the displayed output is rounded to whole degrees and whole percentages for readability. Converting the rounded values back to RGB can differ by one or two units per channel, which is far below the threshold any display or human eye can resolve.
That happens when all three channels are equal, which makes the colour a neutral grey. Grey has no position on the hue wheel, so both saturation and hue are reported as zero. Change any single channel and both values immediately become meaningful again.
Use hsl(). Since CSS Color Module Level 4 the hsl function accepts an optional alpha after a forward slash, so hsl(210 92% 60% / 40%) does everything hsla ever did. The hsla function still works for backwards compatibility but there is no reason to write new code with it.
No. HSL lightness is a geometric coordinate, not a measure of perceived brightness, so two colours with identical lightness values can have very different contrast against the same background. Run the actual pair through a contrast checker that computes relative luminance before shipping it.
Yes. The alpha slider carries straight through to the output because HSL and RGB share the same alpha channel definition, a fraction from fully transparent to fully opaque. The tool writes it as a percentage after a slash in the modern notation.
No. The conversion is arithmetic that runs inside your browser, so nothing leaves the page. You can open the network panel in your developer tools, move every slider, and watch no request go out at all.