Gigi Tools

HSL Color Converter

Convert between HSL, HEX, and RGB color codes with live preview

Enter HSL Values
Color Preview
Conversion Result
HEX#3C83F6
RGBrgb(60, 131, 246)
HSLhsl(217, 91%, 60%)
Reverse Convert: HEX → HSL

Enter a HEX color code to automatically convert to HSL values and update the sliders above

How to Use

  1. Drag the sliders or enter values directly to adjust H (Hue), S (Saturation), L (Lightness)
  2. View the corresponding HEX, RGB, HSL codes and color preview in real time
  3. Click the "Copy" button next to each format to copy the color code
  4. You can also enter a HEX code below to reverse convert to HSL

FAQ

What is the HSL color model?

HSL stands for Hue, Saturation, and Lightness. Hue is a 0-360 degree color wheel (0°=red, 120°=green, 240°=blue), Saturation 0-100% ranges from grayscale to full color, and Lightness 0-100% ranges from black to white. HSL is more intuitive than RGB for color adjustments.

What's the difference between HSL and HSV/HSB?

Both HSL and HSV (also called HSB) use hue, but define brightness differently. In HSL, L=50% is the pure color, L=0% is black, L=100% is white. In HSV, V=100% is the pure color, V=0% is black. HSL is more common in web design since CSS natively supports the hsl() function.

Why are the reverse-converted HSL values slightly different from the original?

This is because RGB uses discrete values (integers 0-255), while HSL conversion involves floating-point math. When converting HSL → RGB → HSL round-trip, rounding errors may cause H, S, L values to differ by 1-2 degrees/percent. This difference is virtually imperceptible in practice.