RGB to HSL Converter
Convert RGB into hue, saturation and lightness — useful for theming and adjustments.
About the RGB to HSL Converter
Convert RGB into hue, saturation and lightness — useful for theming and adjustments. Every value is computed locally with vanilla JavaScript — there is no server round-trip, no sign-up and no limit on how many times you use it.
How to use
Pick a color
Enter a HEX value or use the picker — the tool reads its RGB internally.
Convert to HSL
Hue, saturation and lightness are calculated immediately.
Compare with HSV
The matching HSV value is shown alongside for reference.
Copy the result
Copy the HSL string ready for use in CSS.
Benefits
Easier adjustments
HSL makes lightening, darkening and desaturating a color a single-value change.
Better for theming
Work in hue and lightness to build consistent UI color scales.
Instant and exact
Standard conversion math, computed live in your browser.
Features & supported formats
Features
- HEX or picker input
- HSL and HSV output
- CSS-ready hsl() string
- One-tap copy
- Live recalculation
Supported formats
Frequently asked questions
Why use HSL instead of RGB?
HSL separates color from brightness, so adjusting how light or vivid a color is becomes intuitive rather than guesswork.
What does each HSL value mean?
Hue is an angle from 0–360, saturation is how vivid the color is as a percentage, and lightness is how close to white or black it is.
Is HSL the same as HSV?
No. Both share hue and saturation, but HSL uses lightness while HSV uses value (brightness). The tool shows both.
Can I paste an rgb() string?
Use a HEX value or the picker; the tool derives RGB from there and converts to HSL.
Does CSS support HSL directly?
Yes. Modern browsers accept hsl() values, so you can paste the result straight into your stylesheet.