Super Boring Tools

Search tools

Find a tool by name or what it does.

Hex to HSL Converter

Turn a hex code into HSL, HSLA, and RGB with a live swatch and one-click copy for every format.

3, 6, or 8 digit hex, with or without the #. Converted live as you type, all in your browser.

239°
Hue
84%
Saturation
67%
Lightness
1
Alpha

Formats

HSLhsl(239, 84%, 67%)
HSLAhsla(239, 84%, 67%, 1)
RGBrgb(99, 102, 241)
HEX#6366f1

How to convert a HEX color to HSL

  1. Enter a hex color

    Type or paste a hex code with or without the leading #, or open the color picker to choose one visually.

  2. Read the values

    The separate hue, saturation, and lightness values, a preview swatch, and ready-to-paste hsl(), hsla(), rgb(), and hex strings all update live.

  3. Copy a format

    Use the copy button on any row to grab a single format, or Copy all to take every one at once.

Why use this tool

Every format from one hex

A single hex code produces its HSL, HSLA, and RGB forms plus a normalised hex string, all at the same time.

Separate hue, saturation, lightness

Hue in degrees and saturation and lightness in percent are shown as individual values, which is the exact conversion most people come here for.

Type it or pick it

Enter a hex code by hand or choose a color visually with the picker; the two stay in sync as you go.

Alpha channel aware

An 8-digit hex carries its transparency into the hsla() output and into the swatch, which sits on a checkerboard so it shows.

Runs entirely in your browser

Everything happens on your device; nothing is uploaded.

About this tool

This converter turns a HEX color code into its HSL, HSLA, and RGB equivalents. Type a hex value with or without the leading #, in short form like #f43, standard 6-digit form, or 8-digit form that includes an alpha channel, or use the color picker to choose one visually. The individual hue, saturation, and lightness values, a live swatch, and ready-to-paste hsl(), hsla(), rgb(), and hex strings all update on every keystroke.

HSL describes a color as a hue angle from 0 to 360 degrees plus saturation and lightness as percentages, which makes it easy to nudge how vivid or how bright a color is in a stylesheet without hunting for a new hex code. You might convert a brand hex to HSL to build a lighter hover state, to shift only the hue, or to fade a color with an hsla() alpha. Shorthand hex expands automatically, an alpha byte in an 8-digit code carries through to the hsla() output, and an unrecognised value shows a short message instead of a wrong answer.

Everything runs on your device, so the colors you enter are never uploaded. Conversion is only one part of working with color: to go the other way use hsl to hex, the color converter reads RGB, HSL, and HSV in either direction, and the contrast checker tests a foreground and background pairing against WCAG rules.

Frequently asked questions

What hex formats can I enter?
You can enter 3, 4, 6, or 8 hex digits, with or without the leading #. Shorthand like #f43 expands to #ff4433, and an 8-digit code such as #ff443380 adds an alpha channel.
What do the HSL numbers mean?
HSL describes a color as three parts: hue, an angle from 0 to 360 degrees around the color wheel, then saturation and lightness, each a percentage from 0 to 100. So #6366f1 is hue 239, saturation 84 percent, lightness 67 percent.
Does it keep transparency?
Yes. If your hex includes an alpha channel, it is preserved: the HSLA output carries the alpha value and the swatch renders over a checkerboard so the transparency is visible. Fully opaque colors also expose an hsla() form with an alpha of 1.
Why does the color picker drop my alpha?
The built-in color picker only understands 6-digit hex, so choosing a color sets the hue, saturation, and lightness and makes it fully opaque. To keep an alpha channel, type the 8-digit hex into the field instead.
Is my data uploaded anywhere?
No. Everything runs in your browser; nothing is sent to a server.

Related tools