HEX to HSL Converter: The Complete Guide

What is HEX to HSL Conversion?

HEX to HSL conversion is the process of translating a hexadecimal color code into its corresponding Hue, Saturation, and Lightness values. While HEX is the most common format for defining colors in CSS and design tools, HSL provides a more intuitive model for manipulating colors programmatically or by hand.

The HEX to HSL Converter tool takes any valid hex color and instantly returns the HSL equivalent, along with a live color preview and copy-to-clipboard functionality. It also displays the individual H, S, and L components for fine-grained adjustments.

The Conversion Formula

Converting HEX to HSL involves a multi-step mathematical process. Here's how it works under the hood:

Step 1: HEX to RGB

First, split the hex code into its red, green, and blue components. Convert each from hexadecimal (base-16) to decimal (base-10). For #6325d6:

R = 0x63 = 99
G = 0x25 = 37
B = 0xD6 = 214

Step 2: Normalize to 0-1 Range

Divide each value by 255:

R' = 99 / 255 = 0.388
G' = 37 / 255 = 0.145
B' = 214 / 255 = 0.839

Step 3: Find Min, Max & Delta

max = max(R', G', B') = 0.839
min = min(R', G', B') = 0.145
delta = max - min = 0.694

Step 4: Calculate Hue (H)

Hue is calculated based on which color channel is the maximum:

If max = R': H = 60 * (((G - B) / delta) mod 6)
If max = G': H = 60 * ((B - R) / delta + 2)
If max = B': H = 60 * ((R - G) / delta + 4)

For #6325d6 (max = B):
H = 60 * ((0.388 - 0.145) / 0.694 + 4)
H = 60 * (0.243 / 0.694 + 4)
H = 60 * (0.35 + 4)
H = 60 * 4.35 = 261°

Step 5: Calculate Saturation (S) & Lightness (L)

L = (max + min) / 2 = (0.839 + 0.145) / 2 = 0.492 → 49.2%
S = delta / (1 - |2 * L - 1|) = 0.694 / (1 - |2 * 0.492 - 1|) = 0.694 / 0.984 = 0.705 → 70.5%

Final Result

HSL(261, 71%, 49%)

Understanding HSL Values

Once you understand the three components of HSL, you can read and modify colors intuitively without ever looking up a color picker:

Hue (0–360)

Hue is the base color, measured in degrees around a color wheel. The canonical reference points are: 0° = Red, 60° = Yellow, 120° = Green, 180° = Cyan, 240° = Blue, 300° = Magenta, 360° = Red again (full circle).

Saturation (0–100%)

Saturation controls the intensity. At 0%, the color is completely gray (no color). At 100%, the color is at its most vivid. Decreasing saturation is how you create muted or disabled variants of a color.

Lightness (0–100%)

Lightness controls brightness. At 0%, any color is black; at 100%, any color is white. The "pure" form of a color is at 50% lightness. Decreasing lightness creates shades (add black), increasing it creates tints (add white).

/* A purple at full saturation, varying lightness */
--l-10: hsl(261, 70%, 10%);  /* very dark purple */
--l-30: hsl(261, 70%, 30%);  /* dark purple */
--l-50: hsl(261, 70%, 50%);  /* pure purple */
--l-70: hsl(261, 70%, 70%);  /* light purple */
--l-90: hsl(261, 70%, 90%);  /* very light purple */

HSLA & Alpha Transparency

HSLA extends HSL with an alpha channel for opacity. The syntax is:

hsla(hue, saturation%, lightness%, alpha)

Where alpha is a value between 0 (fully transparent) and 1 (fully opaque).

/* Semi-transparent brand purple */
background: hsla(261, 71%, 49%, 0.8);

/* Even more transparent */
border-color: hsla(261, 71%, 49%, 0.3);

/* Almost invisible */
box-shadow: 0 0 0 4px hsla(261, 71%, 49%, 0.15);

Unlike HEX, which requires a separate 8-digit format with alpha (#6325d6CC), HSLA keeps the alpha value as a simple decimal that is easy to read and adjust.

When to Use HSL Over HEX

The key insight: HEX is a reference format (good for static values), while HSL is a manipulation format (good for values that need to change or relate to each other). Use the HEX to HSL Converter to translate between the two as needed.

Practical Examples

Building a Color Palette from a Single Brand Color

Given a brand hex #6325d6, convert it to HSL and generate a full palette:

/* Base: hsl(261, 71%, 49%) */
--brand-light:  hsl(261, 30%, 75%);  /* desaturated, light */
--brand:        hsl(261, 71%, 49%);  /* original */
--brand-dark:   hsl(261, 71%, 30%);  /* darker */
--brand-muted:  hsl(261, 30%, 49%);  /* muted (grayer) */
--brand-bg:     hsl(261, 50%, 92%);  /* background tint */

Hover & Active States

A common pattern: darken the lightness on hover, lighten on active:

.btn { background: hsl(261, 71%, 49%); }
.btn:hover { background: hsl(261, 71%, 40%); }
.btn:active { background: hsl(261, 71%, 55%); }

With HEX, you would need to look up each variant separately. With HSL, the pattern is immediately clear.

Creating Tints and Shades for Data Visualization

When building a chart with multiple series, use HSL to vary the hue while keeping saturation and lightness consistent:

--series-1: hsl(0, 70%, 50%);   /* red */
--series-2: hsl(45, 70%, 50%);  /* orange */
--series-3: hsl(90, 70%, 50%);  /* yellow-green */
--series-4: hsl(180, 70%, 50%); /* cyan */
--series-5: hsl(270, 70%, 50%); /* purple */

Color Workflow Best Practices

• Start with HEX, convert to HSL for theming: Most design tools export HEX. Use the converter to get HSL values, then build your theme around the HSL model.
• Use HSLA for overlays and shadows: The alpha channel in HSLA makes it trivial to create semi-transparent colors for modals, tooltips, and shadow effects.
• Keep hue values consistent within a palette: All variants of a single brand color should share the same hue. Only adjust saturation and lightness.
• Test contrast with lightness: A lightness under 35% generally needs white text; over 65% needs dark text. This rule of thumb helps maintain accessibility.
• Document your palette: Store both HEX and HSL values in your design system documentation. HEX for designers, HSL for developers.