RGB to HSL Converter
Paste an RGB value and get the exact HSL equivalent instantly — plus every other color format, a gamut check and one-click copy.
Gamut: srgb
Common RGB → HSL values
| Vivid Indigo | rgb(99 102 241) | hsl(238.7 83.5% 66.7%) | Details |
| Vivid Red | rgb(239 68 68) | hsl(0 84.2% 60.2%) | Details |
| Orange | rgb(249 115 22) | hsl(24.6 95% 53.1%) | Details |
| Light Yellow | rgb(234 179 8) | hsl(45.4 93.4% 47.5%) | Details |
| Vivid Green | rgb(34 197 94) | hsl(142.1 70.6% 45.3%) | Details |
| Teal | rgb(20 184 166) | hsl(173.4 80.4% 40%) | Details |
| Sky Blue | rgb(14 165 233) | hsl(198.6 88.7% 48.4%) | Details |
| Blue | rgb(59 130 246) | hsl(217.2 91.2% 59.8%) | Details |
| Vivid Violet | rgb(139 92 246) | hsl(258.3 89.5% 66.3%) | Details |
| Vivid Pink | rgb(236 72 153) | hsl(330.4 81.2% 60.4%) | Details |
| Medium Gray | rgb(120 113 108) | hsl(25 5.3% 44.7%) | Details |
| Black | rgb(0 0 0) | hsl(0 0% 0%) | Details |
The RGB to HSL formula
Divide each channel by 255 and find the largest (max) and smallest (min). Lightness is their average. If max equals min the color is gray and hue and saturation are 0. Otherwise saturation is (max − min) / (1 − |2L − 1|), and hue is 60° times the position of the dominant channel on the color wheel.
Using HSL in CSS
Modern syntax is hsl(239 84% 67%), with an optional alpha like hsl(239 84% 67% / 0.5). Every browser supports it.
HSL vs OKLCH
HSL lightness is a math convenience rather than how bright a color looks. OKLCH keeps the same easy hue, chroma and lightness controls but matches perception, so it's better for generating ramps and hover states.
Frequently asked questions
- How do you convert RGB to HSL?
- Scale R, G, B to 0–1. Lightness is (max + min) / 2. Saturation is (max − min) / (1 − |2L − 1|). Hue depends on which channel is largest and is measured in degrees around the color wheel.
- Why use HSL instead of RGB?
- HSL is easier to adjust by hand: change the hue to rotate around the wheel, or the lightness to make tints and shades, without touching three numbers at once.
- Is HSL good for building color scales?
- It's convenient but not perceptually even: hsl(60 100% 50%) yellow looks far brighter than hsl(240 100% 50%) blue at the same lightness. For scales and palettes, OKLCH gives more consistent results.