Colormapped
Color converter

HEX to HSL Converter

Convert a HEX color to hue, saturation, and lightness.

HSL is useful when you want to work with hue, saturation, and lightness as separate controls.

What this tool does

HSL expresses a digital color as hue, saturation, and lightness instead of raw red, green, and blue channels. The tool first reads the HEX value as RGB and then derives HSL from the normalized channels.

Enter the values in the calculator above and choose Calculate. The calculation runs in your browser; the inputs are not intentionally sent to a Colormapped application server.

How it works

  1. Parse the HEX value into RGB channels.
  2. Normalize each RGB channel to 0–1 and find the minimum, maximum, and channel difference.
  3. Use the maximum/minimum relationship to derive lightness and saturation.
  4. Derive hue from the dominant channel and report hue in degrees plus saturation/lightness percentages.

Worked example

Input#5B5CF0
Outputhsl(240 83% 65%)

The displayed percentages are rounded to whole numbers for readability, so converting the rounded HSL value back may shift a channel by one or two integer steps.

When to use it

  • Reason about hue separately from lightness when building UI variants.
  • Inspect whether two colors differ mainly by hue, saturation, or lightness.
  • Prepare a value for HSL-based CSS or design-system adjustments.

Accuracy and limits

  • Displayed HSL components are rounded.
  • HSL lightness is a model component, not a direct measurement of human-perceived brightness.

Useful next steps

HSL to HEX Convert an HSL value back to a six-digit HEX reference. Lighten / Darken Change HSL lightness directly and inspect the resulting HEX. Tints & Shades Compare HSL adjustment with RGB blends toward white and black.