BYTETOOLS

HSL to RGB Converter

Convert HSL values to RGB with live hue, saturation and lightness sliders. See the color swatch update in real time and copy the rgb() and HEX output.

24
100
50

RGB

rgb(255, 102, 0)
#ff6600

What is the HSL to RGB Converter?

The HSL to RGB Converter turns hue, saturation and lightness into red, green and blue channel values.

  • Live hue, saturation and lightness sliders
  • Instant rgb() and HEX output
  • Real-time swatch preview
  • Exact numeric HSL values shown
  • One-click copy for each format
  • Client-side, free and offline-capable

How to use the HSL to RGB Converter

  1. 1

    Drag the Hue slider to choose the base color (0–360°).

  2. 2

    Adjust Saturation and Lightness to taste.

  3. 3

    Watch the live swatch and the rgb() and HEX outputs update.

  4. 4

    Copy the rgb() or HEX value with its Copy button.

About the HSL to RGB Converter

The HSL to RGB Converter turns hue, saturation and lightness into red, green and blue channel values. Drag the three sliders — hue from 0° to 360°, saturation and lightness from 0% to 100% — and watch the swatch and the rgb() output update in real time, with the HEX equivalent shown alongside.

Because HSL maps directly to how people reason about color, the sliders double as a small exploration tool: fix a hue and sweep lightness to build a tonal scale, or sweep hue at a steady saturation and lightness to generate evenly balanced categorical colors, then read off the RGB you need.

The conversion is computed locally in your browser. Nothing is uploaded, the tool is free, and it works offline once loaded.

Frequently asked questions

How do you convert HSL to RGB?

The standard method computes a chroma value from saturation and lightness, then uses the hue to distribute that chroma across the red, green and blue channels, and finally adds a lightness offset. The result is three channels from 0 to 255. This tool runs that algorithm live.

What HSL values make a pastel color?

Pastels are high-lightness, moderate-saturation colors. Try lightness around 85–90% with saturation between 50% and 80%, then sweep the hue slider to build a matching pastel set while keeping those values fixed.

Why does changing hue sometimes barely change the color?

When saturation is very low the color is nearly gray, so hue has little visible effect. At extreme lightness values near 0% or 100% the color approaches black or white regardless of hue. Keep saturation above about 30% and lightness near 50% to see hue changes clearly.

Can I get HEX output as well as RGB?

Yes. The tool shows both the rgb() value and the equivalent HEX code, each with its own copy button, so you can use whichever format your stylesheet or design tool prefers.

What RGB does hsl(120, 100%, 50%) produce?

That is pure green: rgb(0, 255, 0), or #00ff00. Hue 120° is green on the wheel, 100% saturation makes it fully vivid, and 50% lightness is the pure, undarkened color.

Guides for HSL to RGB Converter

Related tools