RGB to HSL Converter
Convert RGB colors to HSL format with hue, saturation, and lightness calculations. Ideal for advanced color theory and precise color adjustments.
🌈 Browse More Tools
Complete Guide: RGB to HSL Converter
Everything you need to know about using this tool effectively
The RGB to HSL Converter transforms RGB values (Red, Green, Blue 0-255) to HSL values (Hue 0-360, Saturation 0-100%, Lightness 0-100%). HSL is easier to work with than RGB for color adjustments because each component controls an intuitive property. The tool shows both formats with a color preview. All processing happens in the browser.
This tool normalizes RGB to 0-1, computes the max and min, then applies the standard RGB-to-HSL formula: H from the dominant channel, S from the chroma relative to lightness, and L from the average of max and min.
Adjusting colors more intuitively
Convert an RGB color to HSL so you can easily tweak saturation or lightness.
Creating CSS color functions
Get the hsl() syntax for direct use in stylesheets.
Understanding color properties
See the hue angle, saturation percentage, and lightness percentage of a color.
Building color variations
Convert to HSL, adjust values, and generate lighter, darker, or more muted variants.
Enter RGB values
Use sliders or type values for Red, Green, and Blue (0-255).
View the HSL values
The tool shows hue, saturation, lightness, and the CSS hsl() string.
Copy the result
Copy the HSL values or CSS syntax.
Hue is the color angle: 0=red, 120=green, 240=blue.
Saturation 0% = gray. 100% = fully vivid.
Lightness 0% = black. 50% = pure color. 100% = white.
HSL makes it easy to create color scales by adjusting L while keeping H and S fixed.
What is HSL?
HSL stands for Hue (color angle 0-360), Saturation (vividness 0-100%), and Lightness (brightness 0-100%). It is an intuitive way to specify and adjust colors.
Is my data sent to a server?
No. All conversion happens in your browser. Nothing is transmitted.
Can I use the output in CSS?
Yes. The tool produces the CSS hsl() function syntax ready to paste into a stylesheet.
What happens with gray?
Gray colors (R=G=B) have 0% saturation. The hue is technically undefined but defaults to 0.
Does it show hex too?
Yes. The tool also displays the hex code for the same color.