RGB to HSL Converter
RGB to HSL Converter turns red, green and blue channel values into hue, saturation and lightness. HSL makes it easy to adjust a color's brightness or vividness without changing its hue.
Enter each RGB channel and the matching HSL string appears instantly, alongside HEX and a live swatch.
rgb(124, 58, 237)#7c3aedhsl(262, 83%, 58%)How to use RGB to HSL Converter
- 1
Enter RGB values
Set the R, G and B channels, each from 0 to 255.
- 2
Read the HSL value
The matching hsl() string updates live, with HEX shown too.
- 3
Copy the HSL string
Paste it straight into your stylesheet.
RGB versus HSL
RGB describes a color by how much red, green and blue light it mixes. HSL describes the same color by its hue (an angle on the color wheel), saturation (how vivid it is) and lightness (how bright it is).
Neither is more 'correct' — they are two coordinate systems for the same sRGB space. HSL just happens to line up better with how people think about adjusting a color.
Why designers reach for HSL
To make a color lighter in RGB you would have to raise all three channels by the right amounts. In HSL you simply increase the lightness. That makes HSL ideal for generating tints, shades and accessible contrast variants.
Convert your RGB values to HSL, make your adjustment, then convert back to whatever format your code needs.
Frequently asked questions
- What range do RGB values use?
- Each channel runs from 0 to 255.
- What do the HSL numbers mean?
- Hue is an angle from 0 to 360 degrees, while saturation and lightness are percentages from 0 to 100.
Last updated: