RGB ↔ HSL Converter
Convert RGB channel values to HSL, or HSL back to RGB. Both panels update live and show the matching HEX code alongside.
RGB to HSL
HSL to RGB
How to use the converter
- Enter Red, Green, and Blue values from 0 to 255, or
- Enter Hue (0–360), Saturation, and Lightness (both 0–100%).
- The other format updates instantly, along with the matching HEX code.
- Copy any value with the copy icon next to it.
What the output means
RGB describes a color as red, green, and blue light intensities. HSL describes the same color by hue (its position on the color wheel), saturation (how vivid it is), and lightness (how close to black or white it is) — which makes it easier to create tints, shades, or hue variations of a color by adjusting a single number.
Common use cases
Designers use HSL to build consistent color scales — for example, keeping hue and saturation fixed while stepping lightness to generate a set of shades. Developers convert between the two formats when working with design tokens or CSS color functions.
Frequently asked questions
What ranges are valid for HSL?
Hue is 0 to 360 degrees. Saturation and lightness are each 0 to 100 percent.
Why use HSL instead of RGB?
HSL separates a color's hue from its intensity, making it easier to create lighter or darker variations of the same color by changing just the lightness value.
Is HEX shown too?
Yes, both panels display the equivalent HEX code as a useful additional output.