RGB to HSL Converter
Convert red, green and blue values into hue, saturation and lightness for easier color tweaking in CSS.
rgb input
Result · HSL
hsl(344, 100%, 62%)
HEX
#FF3D72
RGB
rgb(255, 61, 114)
HSV
hsv(344, 76%, 100%)
CMYK
cmyk(0%, 76%, 55%, 0%)
How to use: RGB to HSL
- 1
Enter a color
Type a color code or choose a color with the picker — every field accepts the format it shows.
- 2
See it converted
The result updates instantly as you type, together with a live preview of the color.
- 3
Copy the code
Copy the value you need with one click and paste it into your design, CSS or print settings.
RGB versus HSL
RGB builds a color from three light channels, which suits screens but is hard to adjust by hand: making rgb(255, 61, 114) a little darker means changing all three numbers. HSL describes the same color as hue, an angle on the color wheel from 0 to 360°, plus saturation and lightness in percent, so that pink becomes hsl(344, 100%, 62%).
This structure makes HSL ideal for building shades and themes. Keep the hue and saturation and lower the lightness to get a hover or pressed state, raise it for a tinted background, or reduce the saturation for a muted version. All modern browsers accept hsl() in CSS, so you can paste the result directly. The converter rounds values to whole numbers, so converting back may shift a channel by one step.
Everything runs locally in your browser — your images are never uploaded to a server.