HSL to RGB Converter

Convert HSL color values to RGB instantly with live color preview. Free online HSL to RGB converter tool.

°
%
%
Swap

How to convert HSL to RGB?

HSL (Hue, Saturation, Lightness) is an intuitive color model that represents colors in a way that's closer to how humans perceive them. Hue represents the color type (0-360°), Saturation represents color intensity (0-100%), and Lightness represents how light or dark the color is (0-100%).

The conversion from HSL to RGB involves calculating intermediate values and mapping them to RGB coordinates. This tool performs the conversion automatically, showing you the resulting RGB values and hex code.

What is HSL color model?

HSL stands for Hue, Saturation, and Lightness. It's a cylindrical color model that represents colors in a more intuitive way than RGB. Hue (0-360°) represents the color type on a color wheel, Saturation (0-100%) represents color intensity, and Lightness (0-100%) represents how light or dark the color is. At 0% lightness, any color becomes black; at 100%, any color becomes white.

Why use HSL instead of RGB?

HSL is more intuitive for color selection and manipulation. It's easier to create color variations, shades, and tints by adjusting saturation and lightness values. Many designers prefer HSL for creating color schemes because it's more aligned with how humans perceive and describe colors. However, RGB is still necessary for display and web implementation.

How does Hue work in HSL?

Hue is represented as a degree on a color wheel from 0 to 360. Red is at 0° (and 360°), green at 120°, and blue at 240°. The colors between these primary hues create a smooth gradient around the wheel. By adjusting the hue value, you can shift a color to any other color in the spectrum while maintaining its saturation and lightness.

What's the difference between HSL and HSV?

Both HSL (Hue, Saturation, Lightness) and HSV (Hue, Saturation, Value) are cylindrical color models, but they differ in how they represent brightness. HSL's lightness goes from black (0%) through the pure color (50%) to white (100%), while HSV's value goes from black (0%) to the brightest version of the color (100%). HSL is often preferred for color manipulation as it's more symmetrical.

Common HSL to RGB Conversions

Preview Color HSL RGB Hex
  Black (0°, 0%, 0%) (0, 0, 0) #000000
  White (0°, 0%, 100%) (255, 255, 255) #FFFFFF
  Red (0°, 100%, 50%) (255, 0, 0) #FF0000
  Lime (120°, 100%, 50%) (0, 255, 0) #00FF00
  Blue (240°, 100%, 50%) (0, 0, 255) #0000FF
  Yellow (60°, 100%, 50%) (255, 255, 0) #FFFF00
  Cyan (180°, 100%, 50%) (0, 255, 255) #00FFFF
  Magenta (300°, 100%, 50%) (255, 0, 255) #FF00FF
  Silver (0°, 0%, 75%) (191, 191, 191) #BFBFBF
  Gray (0°, 0%, 50%) (128, 128, 128) #808080