RGB to HSL converter
Enter the red, green and blue values and get HSL values, which make lighter and darker shades easy to build in CSS.
Loading the tool…
Processing and privacy: The result is calculated inside your browser and your data is not sent to any server.
How to use it
- Enter red (r), green (g) and blue (b).
- The result appears straight away and updates as you edit.
- Copy the result, or copy a link that keeps the same values to share it.
How it is calculated
With max and min of R/255, G/255, B/255 and d = max - min: L = (max + min) / 2, S = d / (1 - |2L - 1|), and H = 60 × ((G - B) / d mod 6) when R is largest, 60 × ((B - R) / d + 2) when G is largest, 60 × ((R - G) / d + 4) when B is largest.
Example
Inputs: Red (R) = 30, Green (G) = 144, Blue (B) = 255. Result: HSL code: hsl(209.6, 100%, 55.9%); Hue (H): 209.6 °; Saturation (S): 100 %.
Limits and caveats
- Values in the code are rounded to one decimal, so converting back can shift an RGB channel by 1.
- All values are treated as sRGB, the default web color space, not Display P3 or Adobe RGB.
Questions about this tool
When should I use HSL instead of RGB?
When you want lighter or darker shades of the same color: you change L alone and the hue stays put.
What range do the RGB fields accept?
Each channel takes a whole number from 0 to 255, where 0 means none of that light and 255 means full intensity.
Can I paste the HSL result straight into CSS?
Yes. The hsl() function works in every current browser, and the CSS line in the results is ready to copy as it is.