HSL to RGB Color Converter

This HSL to RGB Converter is a free online tool that instantly transforms HSL (Hue, Saturation, Lightness) color values into RGB (Red, Green, Blue) format.

HSL Input

Hue (0-360)

220

Saturation (0-100%)

80%

Lightness (0-100%)

60%

RGB Output

RGB: rgb(71, 147, 224)

HEX: #4793e0

Color Preview

H: 220

S: 80%

L: 60%

Copied to clipboard!

How to Use It?

Adjust the Hue slider (0-360) to select your base color.
Set the Saturation level (0-100%) to control color intensity.
Modify the Lightness value (0-100%) to adjust brightness.
Click the “Convert to RGB” button to see your results.
Quickly grab your RGB or HEX values with one tap.
Use the color preview to visualize your final color.

Why Use an HSL to RGB Converter?

Web Development: Convert HSL values to RGB for CSS styling.

Design Consistency: Maintain color accuracy across different platforms.

Time Efficiency: Avoid manual calculation errors and save time.

Accessibility: Ensure color combinations meet contrast requirements.

Learning Tool: Understand the relationship between different color models.

Example

If you input HSL(220, 80%, 60%), This converter will instantly show you the RGB equivalent: rgb(71, 126, 235) and the HEX code: #477eeb.

.button {
  background-color: rgb(71, 126, 235);
  /* or */
  background-color: #477eeb;
}

HSL to RGB Conversion Table

HSL (Hue, Saturation, Lightness)	RGB (Red, Green, Blue)
hsl(0, 100%, 50%) → Pure Red	rgb(255, 0, 0)
hsl(30, 100%, 50%) → Orange	rgb(255, 128, 0)
hsl(60, 100%, 50%) → Yellow	rgb(255, 255, 0)
hsl(90, 100%, 50%) → Yellow-Green	rgb(128, 255, 0)
hsl(120, 100%, 50%) → Green	rgb(0, 255, 0)
hsl(150, 100%, 50%) → Spring Green	rgb(0, 255, 128)
hsl(180, 100%, 50%) → Cyan	rgb(0, 255, 255)
hsl(210, 100%, 50%) → Sky Blue	rgb(0, 128, 255)
hsl(240, 100%, 50%) → Blue	rgb(0, 0, 255)
hsl(270, 100%, 50%) → Purple	rgb(128, 0, 255)
hsl(300, 100%, 50%) → Magenta	rgb(255, 0, 255)
hsl(330, 100%, 50%) → Pink	rgb(255, 0, 128)
hsl(0, 0%, 0%) → Black	rgb(0, 0, 0)
hsl(0, 0%, 50%) → Gray	rgb(128, 128, 128)
hsl(0, 0%, 100%) → White	rgb(255, 255, 255)

Frequently Asked Questions (FAQs)

1. What is HSL color format?

HSL stands for Hue, Saturation, and Lightness. It’s a cylindrical color model that many designers find more intuitive than RGB.

2. Why would I need to convert HSL to RGB?

While HSL is often easier for humans to work with, most digital displays and web browsers use RGB. Conversion is necessary for implementation.

3.Is this converter accurate?

Yes, our tool uses precise mathematical algorithms to ensure 100% accurate conversions between color models.