ع

RGB to HSL Converter

Convert between RGB and HSL with a live preview.

RGB

R
G
B

HSL

H
S %
L %

About the RGB to HSL Converter

HSL describes color as hue, saturation and lightness, which is easier to adjust by hand. Convert in both directions and watch the preview update.

How to use it

  1. Enter RGB values or drag the RGB sliders.
  2. Or enter HSL values or drag the HSL sliders.
  3. Both sets stay synchronized.
  4. Copy rgb() or hsl() CSS strings.

Examples

  • rgb(255, 127, 80) → hsl(16, 100%, 66%)
  • hsl(210, 50%, 40%) → rgb(51, 102, 153)

Frequently asked questions

Why do round trips sometimes differ by 1?
HSL is displayed with whole numbers, so converting back can differ by one unit in a channel because of rounding.
Is HSL perceptually uniform?
No. Two colors with the same HSL lightness can look very different in brightness; yellow appears much lighter than blue.
Can I paste CSS strings?
Yes, paste rgb(...) or hsl(...) into the quick input field.

Related tools

HEX to RGB ConverterConvert HEX to RGB and RGB to HEX accurately, with validation.HSV ConverterConvert between HSV, HEX, RGB and HSL.Shades GeneratorGenerate tints, tones, lighter and darker shades and saturation variations.