HEX to HSL Converter

Convert HEX color codes to HSL values instantly in your browser.

Convert any HEX color code to HSL instantly with this free online HEX to HSL converter. Type a hex value such as #4f46e5 (or pick a color with the swatch) and get the matching hsl() string and raw hue, saturation, and lightness values right away. It supports 3-digit shorthand, full 6-digit hex, and 8-digit hex with alpha — and everything runs in your browser with nothing to install.

What is a HEX to HSL converter?

A HEX to HSL converter turns a hexadecimal color code into the HSL color model: hue, saturation, and lightness. Hex codes like #4f46e5 are compact and common in CSS, but HSL is far more intuitive to work with — you can shift the hue around the color wheel, dial saturation up or down, or lighten and darken a color just by changing one number. This tool reads any valid hex code and shows you the exact hsl() value behind it.

How to convert HEX to HSL

A hex code is first split into red, green, and blue channels (each a 0–255 number), then those RGB values are converted into HSL. Hue is an angle from 0 to 360 degrees on the color wheel, while saturation and lightness are percentages from 0% to 100%. For example, #4f46e5 becomes hsl(243, 75%, 59%). Shorthand like #f0c is expanded to #ff00cc first.

  1. Type or paste a HEX color code into the HEX field (the # is optional).
  2. Read the hsl() string and the raw H, S, L values, updated as you type.
  3. Use the color picker if you'd rather choose a color visually.
  4. Click Copy to copy the format you need.

Why use this HEX to HSL converter?

  • 100% free with no ads, sign-up, or limits.
  • Instant conversion as you type.
  • Supports 3-digit shorthand, 6-digit, and 8-digit hex with alpha.
  • Copy the hsl() string, the hsla() string, or the raw H, S, L numbers.
  • Runs entirely in your browser — your colors never leave your device.

Frequently asked questions

How do I convert a HEX color to HSL?

First convert the hex code to RGB by splitting it into three pairs of digits, then convert RGB to HSL: hue as an angle (0–360°), and saturation and lightness as percentages. For example #4f46e5 becomes hsl(243, 75%, 59%). This tool does all the math automatically.

Why use HSL instead of HEX?

HSL is easier to reason about than hex. Because hue, saturation, and lightness are separate, you can create lighter or darker shades, more muted or vivid variants, and harmonious palettes just by adjusting one value — which is much harder to do directly with hex codes.

Does it support shorthand hex like #f0c?

Yes. Three-digit shorthand is expanded by doubling each digit, so #f0c is treated as #ff00cc before being converted to HSL.

Can it convert hex with transparency (alpha)?

Yes. If you enter an 8-digit hex code like #4f46e5cc, the last pair is read as the alpha channel and the result is shown as an hsla() value with the alpha between 0 and 1.

Do I need the # symbol?

No. You can paste a hex code with or without the leading #; both 4f46e5 and #4f46e5 work.