Convert RGB to HSL
Convert RGB values to hue, saturation and lightness.
RGB to HSL Converter
Developer tool running locally in browser
What does RGB to HSL Converter do?
Convert RGB to HSL, the colour model that makes adjustment intuitive: change lightness to get a tint or shade, change saturation to mute or intensify, keep hue to stay on-brand.
How to Use RGB to HSL Converter
- 1Enter the RGB valuesOr paste an rgb() string.
- 2Read the HSL resultHue in degrees, saturation and lightness as percentages.
- 3Explore variationsAdjust lightness to generate a whole scale.
Key Features
- HSL values with a live swatch
- Hue shown on a colour wheel for context
- Generated tints and shades from the same hue
- CSS hsl() output ready to paste
- Alpha channel supported
Frequently Asked Questions
What do the HSL numbers mean?
Hue is an angle from 0 to 360 on the colour wheel — 0 red, 120 green, 240 blue. Saturation is 0% grey to 100% fully vivid. Lightness is 0% black through 50% pure colour to 100% white.
Why use HSL instead of RGB?
Because it maps to how people think about colour. Making something "a bit lighter" means changing one number in HSL, but all three in RGB in a non-obvious way.
How do I create a colour scale?
Fix the hue and vary the lightness from about 95% down to 15%. That produces the 50-to-950 style ramp used by modern design systems, and this tool generates it for you.
Is HSL supported in CSS?
Yes, in every browser, including hsl() with an alpha value. Modern CSS also supports space-separated syntax such as hsl(240 60% 55% / 50%).
Input is processed in your browser and never transmitted. That said, treat any web page as untrusted for live production secrets — rotate anything you paste anywhere.