BYTETOOLS

HSL to HEX Converter

Convert HSL values to HEX and RGB with live hue, saturation and lightness sliders. Watch the color swatch update in real time and copy the color codes.

217
91
60

HEX

#3c83f6

RGB

rgb(60, 131, 246)

HSL

hsl(217, 91%, 60%)

What is the HSL to HEX Converter?

The HSL to HEX Converter turns hue, saturation and lightness values into a HEX color code and its rgb() equivalent.

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

How to use the HSL to HEX 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 HEX / RGB outputs update.

  4. 4

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

About the HSL to HEX Converter

The HSL to HEX Converter turns hue, saturation and lightness values into a HEX color code and its rgb() equivalent. Drag the three sliders — hue from 0° to 360°, saturation and lightness from 0% to 100% — and watch the swatch and output codes update in real time.

Because HSL maps directly to how people think about color, the sliders double as a mini color-exploration tool: lock a hue and sweep lightness to build an entire tonal scale, or sweep hue at fixed S/L to generate evenly balanced categorical colors.

The conversion is computed locally in your browser. Nothing is uploaded and the tool is completely free.

Frequently asked questions

How do I convert HSL to HEX?

HSL is first converted to RGB using the standard chroma formula, then each RGB channel (0–255) is written as a two-digit hexadecimal pair. For example hsl(24, 100%, 50%) becomes rgb(255, 102, 0) which is #ff6600. This tool performs both steps instantly.

What HSL values make a pastel color?

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

Why does changing hue sometimes barely change the color?

When saturation is very low, the color is close to gray, so hue has little visible effect. And 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.

What is the HEX code for hsl(0, 100%, 50%)?

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

Can I get RGB output as well as HEX?

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

Guides for HSL to HEX Converter

Related tools