Boneyard Tools

HSL to RGB Converter

Enter a color in HSL and see it as RGB right away, with a live swatch so you can check the result. The conversion runs entirely in your browser.

How to convert HSL to RGB

  1. Type or paste your HSL color, either as hsl(217, 91%, 60%) or just 217, 91, 60.
  2. Read the matching rgb() value as it updates live next to a color swatch.
  3. Copy the rgb() string with the copy button to use it in CSS or your design tool.

Examples

Primary red

hsl(0, 100%, 50%)
rgb(255, 0, 0)

A common brand blue

hsl(217, 91%, 60%)
rgb(59, 130, 246)

Frequently asked questions

What are HSL and RGB?

HSL describes a color by hue (0 to 360 degrees around the color wheel), saturation (0 to 100 percent), and lightness (0 to 100 percent). RGB describes the same color as amounts of red, green, and blue, each from 0 to 255. Both can point to the same on-screen color.

What input formats does this accept?

You can paste a full CSS value like hsl(217, 91%, 60%), or just the three numbers as 217, 91, 60. The percent signs and the hsl() wrapper are optional, so either style works.

Where is RGB used?

rgb() is widely supported in CSS and is the native model for screens, image formats, and most graphics and design software. HSL is handy for picking and tweaking colors, while RGB is what many tools and files expect.

Why do the numbers get rounded?

RGB channels are whole numbers from 0 to 255, so the converted values are rounded to the nearest integer. That can shift a channel by one unit, but the result is visually identical and matches what browsers render.

What happens when saturation is zero?

With saturation at 0 percent the color is a neutral gray and the hue no longer matters. For example, hsl(123, 0%, 50%) and hsl(0, 0%, 50%) both convert to rgb(128, 128, 128).

Is my color data sent anywhere?

No. The conversion runs entirely in your browser, so the colors you enter never leave your device.

Related tools