HSL Color Converter
Convert HSL colors
Results
About This Tool
The HSL to RGB Converter helps you convert colors between HSL (Hue, Saturation, Lightness) and RGB (Red, Green, Blue) formats. HSL is often more intuitive for designers as it separates color properties.
Enter HSL values and instantly see the equivalent RGB, HEX, and other color formats. Perfect for web design, CSS styling, and digital art.
How It Works
How to Use This Converter
Using our HSL converter is simple:
- Enter HSL values - Input Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%).
- Or use the color picker - Select a color visually and see all format values.
- View conversions - Instantly see RGB, HEX, HSV, and CMYK equivalents.
- Copy values - Click to copy any color format to your clipboard.
Formula
HSL to RGB Conversion
The conversion involves these steps:
- Normalize: H (0-360), S (0-1), L (0-1)
- Calculate chroma: C = (1 - |2L - 1|) x S
- Calculate intermediate: X = C x (1 - |H/60 mod 2 - 1|)
- Calculate RGB based on hue sector
- Add lightness adjustment: m = L - C/2
- Final RGB = (R'+m, G'+m, B'+m) x 255
Examples
Examples
Example 1: Pure Red
- HSL: hsl(0, 100%, 50%)
- RGB: rgb(255, 0, 0)
- HEX: #FF0000
Example 2: Sky Blue
- HSL: hsl(200, 80%, 60%)
- RGB: rgb(82, 179, 230)
- HEX: #52B3E6
Example 3: Dark Green
- HSL: hsl(120, 60%, 25%)
- RGB: rgb(25, 102, 25)
- HEX: #196619
Frequently Asked Questions
What is the HSL color model?
HSL stands for Hue (0-360° on the color wheel), Saturation (0-100%, gray to vivid), and Lightness (0-100%, black to white). hsl(0, 100%, 50%) is pure red. HSL is more intuitive than RGB for adjusting colors.
How do I convert HSL to RGB or HEX?
Enter HSL values and the converter instantly shows the equivalent RGB and HEX codes. For example, hsl(210, 80%, 50%) converts to rgb(25, 118, 230) and #1976E6. The conversion involves trigonometric calculations handled automatically.
Why is HSL useful for web developers?
HSL makes color manipulation intuitive. To darken a color, reduce lightness. To desaturate, reduce saturation. To find a complementary color, add 180° to hue. These operations are complex in RGB but simple in HSL.
How do I create a color scheme using HSL?
Start with a base hue. Complementary: add 180°. Triadic: add 120° and 240°. Analogous: add ±30°. Keep saturation and lightness consistent for harmony. For example, hsl(210,70%,50%), hsl(30,70%,50%) is a complementary pair.
What is the difference between HSL and HSB/HSV?
HSL and HSB both use hue and saturation, but differ in the third axis. HSL lightness: 0%=black, 50%=pure color, 100%=white. HSB brightness: 0%=black, 100%=pure color. HSL is used in CSS; HSB is common in design tools like Photoshop.
Disclaimer
Disclaimer: This tool provides color conversions based on standard mathematical formulas. Color appearance may vary between different screens and devices due to differences in display calibration and color profiles. All processing happens in your browser; no data is transmitted to any server.
💡 Tips
Tips
- Hue is the color wheel position (0 degrees=red, 120 degrees=green, 240 degrees=blue)
- Saturation controls color intensity (0%=gray, 100%=vivid)
- Lightness controls brightness (0%=black, 50%=pure color, 100%=white)
- HSL is great for creating color variations by adjusting one property
- Use HSL in CSS for easier color manipulation