RGB to HSL Color Converter
Convert RGB color values to HSL (hue, saturation, lightness) instantly. Free, no signup.
How to use this tool
- Enter red, green, and blue values (each 0–255).
- The tool calculates hue (0–360°), saturation (0–100%), and lightness (0–100%).
- Use the hsl() result directly in CSS.
Convert RGB color values to the HSL (Hue, Saturation, Lightness) color model used in CSS and design tools.
Formula
Given Red, Green, Blue each in 0–255, first normalize: r' = R/255, g' = G/255, b' = B/255.
Then: L = (max + min) / 2
If max ≠ min, delta d = max − min, then:S = d / (2 − max − min) when L > 0.5, else S = d / (max + min)
Hue sector depends on which channel is max:
• R is max: H = (g' − b') / d + (g' < b' ? 6 : 0)
• G is max: H = (b' − r') / d + 2
• B is max: H = (r' − g') / d + 4
Then H = H / 6 × 360
How it works
The RGB-to-HSL conversion re-expresses a color as three perceptually meaningful axes: hue (the chromatic angle around the color wheel, 0°–360°), saturation (colorfulness relative to the lightness, 0–100%), and lightness (perceived luminance from black to white, 0–100%). The algorithm locates the maximum and minimum normalized channel values; their average gives lightness, their difference drives saturation, and which channel holds the maximum value determines which 60° hue sector to use.
A common mistake is forgetting to normalize R, G, B from 0–255 to 0–1 before doing the arithmetic, which produces wildly incorrect hue and saturation values. A second pitfall is treating HSL and HSV as the same model — HSL uses lightness (black at 0%, white at 100%), while HSV uses value (brightness), so the same RGB input yields different S and third-channel numbers in each model.
Worked example
Black (RGB 0, 0, 0) to HSL
- Normalize: r' = 0/255 = 0, g' = 0/255 = 0, b' = 0/255 = 0.
- max = 0, min = 0, so L = (0 + 0) / 2 = 0.
- Because max equals min, saturation S = 0 and hue H = 0 (achromatic case).
- Result: H = 0°, S = 0%, L = 0%.
hsl(0, 0%, 0%)
Common mistakes to avoid
- Entering RGB values on a 0 to 1 scale instead of 0 to 255 -- values like 0.5 are treated as nearly black (about 2 out of 255) rather than mid-range.
- Expecting HSL hue to match HSV hue exactly -- both express hue in 0 to 360 degrees, but saturation and lightness or value are defined differently, so those channels will differ.
- Treating HSL saturation of 100% as always the most vivid color -- a lightness of 0% or 100% produces black or white regardless of saturation.
Key terms
- Hue
- The angle on the color wheel (0°–360°) that names the base color: 0° is red, 120° is green, 240° is blue.
- Saturation (HSL)
- How vivid or gray a color appears, expressed as 0% (pure gray) to 100% (fully vivid), relative to its lightness.
- Lightness
- The perceived brightness on a scale from 0% (black) to 100% (white), with 50% being the fully saturated pure hue.
- Achromatic color
- A color with zero saturation — any shade of gray including pure black and pure white — for which hue is undefined and conventionally set to 0°.
Frequently asked questions
- What is HSL?
- HSL stands for Hue, Saturation, Lightness. It represents colors in a cylindrical model, making it more intuitive than RGB for adjusting brightness and saturation.
- What range does hue use?
- Hue is measured in degrees from 0 to 360, where 0/360 is red, 120 is green, and 240 is blue.