How to use the RGB to HSL Converter
Enter red, green and blue values from 0 to 255. You get the HSL values and the matching hex code.
What H, S and L mean
Hue is the position on the colour wheel from 0 to 360 degrees: 0 is red, 120 is green and 240 is blue. Saturation is how intense the colour is, from 0% grey to 100% full colour. Lightness runs from 0% black through 50% pure colour to 100% white.
How the conversion works
The red, green and blue values are scaled to 0 to 1. Lightness is the average of the largest and smallest channel, saturation depends on how far apart those two are, and hue depends on which channel is largest. Hue is rounded to whole degrees and the percentages to whole numbers.
How it works
Standard RGB to HSL conversion.
Examples
- rgb(59, 130, 246)
hsl(217, 91%, 60%) Hex: #3B82F6
- rgb(255, 87, 51)
hsl(11, 100%, 60%) Hex: #FF5733
Common colours: RGB to HSL
| RGB | HSL |
|---|---|
| rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| rgb(0, 0, 128) | hsl(240, 100%, 25%) |
Limitations and assumptions
Runs entirely in your browser. Nothing you enter is uploaded.
Frequently asked questions
Why use HSL instead of RGB?
To make a palette you can keep the hue and change only lightness for tints and shades, or only saturation for muted versions. In RGB the same change means adjusting all three numbers.
Is the conversion exact?
Hue and the percentages are rounded to whole numbers, so converting back can differ by one step in a channel. That difference is too small to see.
How do I convert HSL back to hex?
Use the HSL to hex converter.