RGB to HSL Converter
Convert red, green and blue into hue, saturation and lightness: the model that makes a color easy to lighten, darken or desaturate on purpose.
Example conversion
rgb(220, 20, 60)
converts to
hsl(348, 83%, 47%)
About RGB to HSL conversion
RGB tells a screen what to do. HSL tells a human what the color is. Instead of three light intensities, HSL gives you hue (which color it is, as an angle around the color wheel from 0 to 360 degrees), saturation (how vivid it is, 0-100%) and lightness (how bright, 0-100%). Same color, but reorganised so that each number means something you can picture.
That reorganisation is the entire point. In RGB, making a blue slightly lighter means nudging three numbers at once and hoping the hue does not drift. In HSL you raise the lightness and leave the other two alone. Making a muted version of a brand color, generating a row of tints for a chart, or finding the complementary color (add 180 to the hue) all become one-number edits. Both notations are supported natively in CSS, so you can work in whichever describes your intent better.
When should you use RGB to HSL?
- Building a color scale - a set of tints and shades from one base color, by stepping lightness.
- Creating hover and active states - darken by 10% lightness rather than guessing at new channel values.
- Designing a theme - keeping a consistent hue and saturation across an entire palette.
- Toning a color down - drop saturation to get a muted, professional version of a loud color.
- Finding harmonies - complementary, triadic and analogous colors are simple hue rotations.
How the conversion works
All three channels are scaled to 0-1, then the largest and smallest are
found. Lightness is their midpoint: L = (max + min) / 2. The
difference between them, delta, drives the other two.
Saturation is delta / (1 - |2L - 1|), which grows as the
channels spread apart, and it is zero when all three are equal - a grey has
no saturation. Hue depends on which channel is largest, measured in
60-degree sectors around the wheel, so red sits at 0, green at 120 and blue
at 240 degrees.
Greys are the one quirk: with no saturation there is no meaningful hue, so it is reported as 0. That is a convention, not a color - a grey with hue 0 is not reddish.
RGB vs HSL
- What the numbers mean - RGB is three light intensities; HSL is one angle and two percentages describing the color itself.
- Editing - HSL lets you change one property without disturbing the others; RGB rarely does.
- Same gamut - neither can express anything the other cannot; the conversion is a reshuffle, not a translation.
- Rounding - HSL values are usually rounded to whole numbers, so a round trip can shift a channel by one. Visually identical, but not always byte-identical.
- Perception - HSL is easier than RGB but still not perceptually uniform: 50% lightness in yellow looks far brighter than 50% in blue. For perceptual work use LAB.
Named CSS colors in RGB and HSL
The sixteen basic CSS color keywords plus eight more that come up constantly, each shown in both models side by side. Pick any row to drop that color into the converter and read it in the other eight models too.
Frequently asked questions
What is the difference between HSL and HSV?
They share hue and a saturation concept but differ on the third axis. In HSL, 100% lightness is always white and 50% is the pure hue. In HSV, 100% value is the brightest version of the hue and you never reach white without dropping saturation. HSL suits theming; HSV matches how color pickers are drawn. See RGB to HSV.
Can I use HSL directly in CSS?
Yes. hsl(216, 98%, 52%) is valid CSS with excellent
browser support, as is hsla() for transparency. Many teams
store hue and saturation in custom properties and vary only lightness to
build an entire palette from one value.
Why is my grey reported with hue 0?
Because a color with zero saturation has no hue to measure - red, green and blue are all equal. Zero is simply the conventional placeholder, and changing it would not change the color.
Does converting to HSL and back give me the same RGB?
Almost always. HSL values are rounded to whole degrees and percents for readability, so a channel can occasionally come back one step off. The difference is invisible, but if you need bit-exact round trips, keep the original RGB value as your source of truth.
How do I make a color lighter without changing its hue?
Convert to HSL, raise the lightness, and convert back with the HSL to RGB converter. Steps of 5 to 10 percentage points give a natural-looking tint ladder.