HSL to RGB Color Converter - Free Online Tool

HSL → RGB Color Conversion

Drag the sliders to adjust HSL values. Real-time preview with RGB, HEX, and CSS code output.

Hue: 200°

Saturation: 70%

Lightness: 55%

RGB rgb(42, 177, 238)

HEX #2AB1EE

CSS hsl() hsl(200, 70%, 55%)

📖 About HSL Color Model

Hue: 0°=red, 120°=green, 240°=blue, 360°=red (full circle).

Saturation: 0%=gray (no color), 100%=most vivid pure color.

Lightness: 0%=pure black, 50%=normal brightness, 100%=pure white.

❓ FAQ

What's the difference between HSL and RGB?

HSL uses Hue, Saturation, and Lightness to describe colors, which is more intuitive for human perception. RGB uses Red, Green, Blue channels, closer to how displays physically work. HSL is better for design and color picking, while RGB is better for programming. This tool lets you convert freely between formats.

What are the valid HSL ranges?

Hue (H): 0-360 degrees (0=red, 120=green, 240=blue). Saturation (S): 0%-100% (0%=gray, 100%=pure color). Lightness (L): 0%-100% (0%=black, 50%=normal, 100%=white).

Is the conversion accurate?

Yes. This tool uses the standard HSL-to-RGB mathematical formula, producing results that exactly match CSS color: hsl() rendering. RGB values are rounded to the nearest integer.

Can I use this for CSS?

Absolutely. The converted values work directly in CSS rgb() or hex color codes. The tool provides one-click copy for CSS-ready code you can paste right into your stylesheets.