HSL to RGB Converter

Convert between HSL (Hue, Saturation, Lightness) and RGB (Red, Green, Blue) color models instantly. Perfect for web design, digital art, and CSS styling.

HSL to RGB
RGB to HSL

HSL Values

Hue (0-360) 220
Saturation (0-100%) 70%
Lightness (0-100%) 50%

RGB Values

Red (0-255) 76
Green (0-255) 130
Blue (0-255) 229
Color Information
HSL Representation
hsl(220, 70%, 50%)
RGB Representation
rgb(76, 130, 229)
Hex Color Code
#4c82e5
CSS Usage Examples
color: hsl(220, 70%, 50%); /* Text color */
background-color: rgb(76, 130, 229); /* Background color */
border-color: #4c82e5; /* Border color */
box-shadow: 0 4px 10px rgba(76, 130, 229, 0.5); /* Shadow with alpha */
Color Harmonies

Understanding HSL and RGB Color Models

HSL (Hue, Saturation, Lightness) and RGB (Red, Green, Blue) are two different ways to represent colors in digital design. While RGB is hardware-oriented (used by monitors and cameras), HSL is more intuitive for humans to understand and adjust.

HSL Color Model:

  • Hue: The color type (0-360 degrees on the color wheel)
  • Saturation: Intensity of the color (0% = gray, 100% = full color)
  • Lightness: Brightness of the color (0% = black, 50% = normal, 100% = white)

RGB Color Model:

  • Red: Amount of red (0-255)
  • Green: Amount of green (0-255)
  • Blue: Amount of blue (0-255)

Conversion Formulas

HSL to RGB Conversion:

1. Convert H (0-360) to (0-1) range: h' = H / 360

2. Calculate intermediate values:

C = (1 - |2L - 1|) × S

X = C × (1 - |(h' × 6) mod 2 - 1|)

m = L - C/2

3. Determine RGB based on hue segment (0-5)

4. Add m to each component: R = (R' + m) × 255, etc.

RGB to HSL Conversion:

1. Convert RGB (0-255) to (0-1) range: r = R/255, g = G/255, b = B/255

2. Find max = max(r,g,b), min = min(r,g,b)

3. Calculate lightness: L = (max + min) / 2

4. Calculate saturation:

If max = min: S = 0

Else if L ≤ 0.5: S = (max - min) / (max + min)

Else: S = (max - min) / (2 - max - min)

5. Calculate hue:

If max = min: H = 0

Else if max = r: H = ((g - b) / (max - min)) mod 6

Else if max = g: H = (b - r) / (max - min) + 2

Else if max = b: H = (r - g) / (max - min) + 4

H = H × 60 (convert to degrees)

Practical Applications

1

Web Design: HSL is often easier to work with in CSS because you can adjust lightness and saturation without changing the hue. This makes it simpler to create color variations for hover states, shadows, and gradients.

2

Digital Art: When painting digitally, artists often find HSL more intuitive than RGB. Adjusting the hue allows for color shifts, while saturation and lightness control intensity and brightness independently.

3

Data Visualization: HSL is excellent for creating color schemes where you need consistent saturation and lightness across different hues, making charts and graphs easier to read and interpret.

Common Color Values

Color Name HSL RGB HEX
Pure Red hsl(0, 100%, 50%) rgb(255, 0, 0) #ff0000
Pure Green hsl(120, 100%, 50%) rgb(0, 255, 0) #00ff00
Pure Blue hsl(240, 100%, 50%) rgb(0, 0, 255) #0000ff
Yellow hsl(60, 100%, 50%) rgb(255, 255, 0) #ffff00
Cyan hsl(180, 100%, 50%) rgb(0, 255, 255) #00ffff
Magenta hsl(300, 100%, 50%) rgb(255, 0, 255) #ff00ff
White hsl(0, 0%, 100%) rgb(255, 255, 255) #ffffff
Black hsl(0, 0%, 0%) rgb(0, 0, 0) #000000
Gray hsl(0, 0%, 50%) rgb(128, 128, 128) #808080

Frequently Asked Questions

HSL is often preferred for web design because it's more intuitive. With HSL, you can easily create color variations by adjusting the lightness and saturation while keeping the same hue. This is useful for creating hover effects, gradients, and consistent color schemes. However, RGB is still widely used and supported, so it's good to understand both.

HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value, also called HSB for Hue, Saturation, Brightness) are similar but have key differences. In HSL, lightness represents how much white or black is mixed with the color. In HSV, value/brightness represents the brightness of the color as it appears. HSL is often considered more perceptually uniform, meaning equal changes in parameters result in equal perceived changes in color.

In some programming environments and APIs, HSL values are represented with saturation and lightness as decimals between 0 and 1 instead of percentages (0-100%). Our converter uses percentages because they're more intuitive for humans, but it's important to know that both representations are valid. To convert: percentage = decimal × 100, or decimal = percentage ÷ 100.

HSL makes it easier to create accessible color combinations. For text contrast, ensure there's sufficient difference in lightness between text and background colors (aim for at least 4.5:1 contrast ratio for normal text). You can keep the same hue and saturation while adjusting lightness to create accessible color variations. Many online contrast checkers can help verify your color choices meet accessibility standards.

Yes, HSL is fully supported in all modern browsers and CSS frameworks. The hsl() and hsla() functions are part of the CSS Color Module Level 3 specification and have been supported for many years. You can use HSL colors in CSS just like RGB colors: color: hsl(220, 70%, 50%); or with alpha transparency: color: hsla(220, 70%, 50%, 0.5);