RGB to HSL Color Converter

Convert RGB color values to HSL format instantly. Get the hue, saturation, and lightness representation of any RGB color for use in modern CSS.

RGB Values

Enter values between 0 and 255

HSL Result

Enter valid RGB values to see HSL result

Why Convert RGB to HSL?

RGB tells you what goes into a color (red, green, blue intensities). HSL tells you what the color actually is (hue), how vibrant it is (saturation), and how light or dark it is (lightness). For CSS work, HSL is often more intuitive — you can adjust lightness without changing the base hue.

How the Conversion Works

The algorithm finds the maximum and minimum RGB values to calculate lightness as their average. Saturation depends on how far apart max and min are relative to lightness. Hue is determined by which channel dominates and how the other two compare.

For example, rgb(255, 87, 51) becomes hsl(11, 100%, 60%). The hue of 11° puts it in the orange-red range, 100% saturation means it's fully vibrant, and 60% lightness puts it in the medium-bright range.

When HSL Is More Useful Than RGB

Creating Color Variations

Want a darker version of hsl(217, 91%, 60%)? Just reduce lightness: hsl(217, 91%, 40%). In RGB, you'd need to calculate proportional reductions across all three channels.

CSS Hover States

Define your base color as a CSS variable in HSL. On hover, use the same hue and saturation but adjust lightness. No need to define separate colors.

Finding Complementary Colors

Add 180 to the hue value. hsl(200, 80%, 50%) becomes hsl(380, 80%, 50%), which wraps to hsl(20, 80%, 50%) — a warm orange complement to the cool blue.

Programmatic Color Adjustments

Building a theme switcher? Adjust lightness values across your entire palette programmatically. Much cleaner than manipulating RGB triples.

Understanding HSL Values

Hue (0-360°): The actual color on the color wheel. 0° is red, 120° is green, 240° is blue. Values wrap around, so 360° equals 0°.

Saturation (0-100%): How vibrant vs. gray the color is. 100% is the purest form of that hue. 0% is a shade of gray (no hue at all).

Lightness (0-100%): How light or dark. 0% is black, 100% is white, 50% is the "normal" version of the color.

Frequently Asked Questions

Why is my hue value 0 when the color looks red?

Because 0° is pure red. A hue of 0 and a hue of 360 are identical — both are red. The scale is circular.

What does 0% saturation look like?

Pure gray, with no color tint. The lightness value determines whether it's dark gray, medium gray, or light gray. rgb(128, 128, 128) converts to hsl(0, 0%, 50%) — the hue is undefined (shown as 0) because there's no actual hue.

Can I use decimal values in HSL?

Yes, CSS accepts decimals: hsl(217.5, 91.3%, 60.2%). This tool rounds to whole numbers for simplicity, but you can manually add precision if needed.

How do I convert HSL back to RGB?

Use our HSL to RGB Converter tool. The conversion is reversible — you can go back and forth without losing information.

Does CSS support HSL in all browsers?

Yes, HSL is supported in all modern browsers including IE9+. It's part of the CSS Color Module Level 3 specification and has been standard for over a decade.

What's the difference between HSL and HSV?

Both use hue and saturation, but HSL uses "lightness" (average of max and min) while HSV uses "value" (just the max). HSL is more intuitive for CSS work. Use our HSL to HSV Converter if you need to translate between them.

Practical CSS Examples

Button with hover state:

.btn {
  background: hsl(217, 91%, 60%);
}
.btn:hover {
  background: hsl(217, 91%, 50%);
}

Theme-aware colors with CSS variables:

:root {
  --primary-h: 217;
  --primary-s: 91%;
  --primary-l: 60%;
}
.element {
  background: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
}

Other Free Color Tools

Search tools