BYTETOOLS

HEX to HSL Converter

Convert HEX color codes to HSL and HSLA instantly. See hue, saturation and lightness values with a live swatch, batch list conversion and copy button.

Result

hsl(217, 91%, 60%)

What is the HEX to HSL Converter?

The HEX to HSL Converter translates hexadecimal color codes into the hsl() format — hue in degrees, saturation and lightness as percentages.

  • Converts 3, 6 and 8-digit HEX to hsl()/hsla()
  • Shows hue (°), saturation (%) and lightness (%)
  • Live color swatch
  • Batch mode for lists of colors
  • One-click copy
  • Private, client-side conversion

How to use the HEX to HSL Converter

  1. 1

    Paste a HEX code such as #3b82f6 into the input.

  2. 2

    Read the hsl() value and verify the live swatch.

  3. 3

    Click Copy to grab the converted value.

  4. 4

    Use Batch mode to convert many codes at once, one per line.

About the HEX to HSL Converter

The HEX to HSL Converter translates hexadecimal color codes into the hsl() format — hue in degrees, saturation and lightness as percentages. HSL is the most intuitive way to reason about color in CSS: shift lightness for hover states, drop saturation for disabled states, rotate hue for theme variants.

The tool accepts 3-, 6- and 8-digit HEX codes (8-digit produces hsla() with alpha) and shows a live swatch so you can confirm the color. Batch mode converts a whole list, one HEX code per line, with copyable output.

Conversion runs 100% locally in your browser — nothing is uploaded and no account is required.

Frequently asked questions

What do the H, S and L values mean?

Hue is the position on the color wheel from 0° to 360° (0° red, 120° green, 240° blue). Saturation is color intensity from 0% (gray) to 100% (vivid). Lightness runs from 0% (black) through 50% (pure color) to 100% (white).

Why use HSL instead of HEX in CSS?

HSL makes color relationships readable and editable. To create a darker hover state you simply lower the lightness value; with HEX you would have to recalculate all three channels. Design systems often define a hue once and derive whole scales by varying S and L.

How is HEX converted to HSL?

The HEX code is first converted to RGB, then the RGB channels are normalized to 0–1 and the standard formula computes hue from the dominant channel, and saturation and lightness from the max and min channel values. This tool does the math instantly and rounds to whole numbers.

What HSL value is pure white or black?

White is hsl(0, 0%, 100%) and black is hsl(0, 0%, 0%). For both, the hue is irrelevant because saturation is 0% — any hue with 0% saturation is a gray determined only by lightness.

Does HSL support transparency?

Yes, via hsla() or the modern hsl(h s% l% / a) syntax. If you paste an 8-digit HEX code, the alpha channel is preserved and the output uses hsla() with the equivalent opacity.

Guides for HEX to HSL Converter

Related tools