RGB to HSL Converter
Convert RGB color values to HSL (Hue, Saturation, Lightness) instantly, with a color picker and live preview.
Red (R)
33
Green (G)
150
Blue (B)
243
Or Pick a Color
HSL Result:
Hue
207°
Saturation
90%
Lightness
54%
Color Preview:
How to Use the RGB to HSL Converter
Adjust the R, G, and B sliders (0-255 each) — or use the color picker for convenience — and the equivalent HSL (Hue, Saturation, Lightness) values appear instantly. HSL describes a color by the angle of its hue on a color wheel (0-360°), how saturated (vivid) it is as a percentage, and how light or dark it is as a percentage, which many designers find more intuitive to reason about than raw RGB numbers.
L = (max + min) / 2 | S = delta / (1 − |2L − 1|) | H = piecewise from max channel
Example
RGB (33, 150, 243) — a common material-design blue — converts to approximately hsl(207, 90%, 54%): a hue of 207° (in the blue range), 90% saturation, and 54% lightness.
Common Use Cases
- Converting an RGB color from a design tool into CSS-ready HSL notation.
- Adjusting a color's lightness or saturation independently while keeping the same hue.
- Building a consistent color palette by varying lightness/saturation around a fixed hue.
FAQs
- Why use HSL instead of RGB in CSS? HSL separates a color's hue from its intensity and brightness, making it much easier to create variations of the same color (like a lighter or more muted version) by adjusting just one value, instead of recalculating all three RGB channels.
- What do the H, S, and L values mean? Hue (H) is the color's position on a 360° color wheel (0° = red, 120° = green, 240° = blue). Saturation (S) is how vivid versus gray the color is, from 0% (gray) to 100% (fully saturated). Lightness (L) is how light or dark it is, from 0% (black) to 100% (white), with 50% being the purest version of the hue.
- Can I use the color picker instead of entering RGB numbers? Yes — the native color picker lets you visually choose a color, and the R, G, B sliders and HSL output update automatically to match your selection.