HEX to HSL Converter

How to use the HEX to HSL Converter

Type or paste a hex color such as #0F766E or #abc into the HEX field, or choose one with Pick colour.

The HSL field updates as you type and shows hsl(h, s%, l%), or hsla() when the hex code includes alpha.

Copy the value with the button next to the field, then adjust the lightness or saturation to derive related colors.

Convert HEX to HSL for easier color tweaks

A HEX to HSL converter rewrites a hex code as hue, saturation and lightness, the CSS color model that is easiest to adjust by hand. Where #0F766E tells you almost nothing at a glance, hsl(175, 77.4%, 26.1%) reads as "a fairly saturated, dark blue-green".

What the three HSL numbers mean

Hue is an angle on the color wheel: 0° red, 120° green, 240° blue, returning to red at 360°.
Saturation is the distance from grey, from 0% to 100%.
Lightness runs from 0% (always black) to 100% (always white); 50% is the most vivid version of the hue.

The conversion, step by step

The hex code is first decoded to RGB and each channel divided by 255. With max and min as the largest and smallest of those fractions and d = max − min:

L = (max + min) / 2
S = d / (1 − |2L − 1|)          (0 when d = 0)
H = 60 × ((G − B) / d mod 6)    if max is R
    60 × ((B − R) / d + 2)      if max is G
    60 × ((R − G) / d + 4)      if max is B

Applied to #0F766E:

#0F766E → rgb(15, 118, 110)
R = 0.0588   G = 0.4627   B = 0.4314
max = 0.4627 (G)   min = 0.0588   d = 0.4039
L = (0.4627 + 0.0588) / 2        = 0.2608 → 26.1%
S = 0.4039 / (1 − |0.5216 − 1|)  = 0.7744 → 77.4%
H = 60 × ((0.4314 − 0.0588) / 0.4039 + 2) = 175.3 → 175
→ hsl(175, 77.4%, 26.1%)

Hue is rounded to a whole degree, saturation and lightness to one decimal place. Greys have no hue (d is 0), so white, black and every grey come out as hsl(0, 0%, L).

Why designers convert to HSL

Once a brand color is in HSL, a family of related colors is a matter of changing one number. Keep hue and saturation and move lightness: hsl(175, 77.4%, 90%) is a pale background tint and hsl(175, 77.4%, 18%) a darker pressed state. Adding 180° to the hue gives the complementary color.

That is why HSL is popular in CSS custom properties and theme systems, where storing hue, saturation and lightness separately lets you derive light and dark variants from a few variables. For a ready-made ladder of tints and shades, try the HEX colortone generator.

Transparency and precision

If the hex code has an alpha byte, such as #0F766E80, the result keeps it: hsla(175, 77.4%, 26.1%, 0.502). Because the HSL numbers are rounded, converting back usually returns the same hex code but can occasionally land one step away in a channel. Keep the original hex as your source of truth and use HSL for deriving variations; the HSL to HEX converter handles the return trip.

HSL lightness is not perceived brightness

Equal lightness values don't look equally bright across hues. hsl(60, 100%, 50%) (yellow) appears far lighter than hsl(240, 100%, 50%) (blue), although both have 50% lightness. Check text contrast with a proper contrast measurement rather than trusting the L value. And if you are typing values into a design app's color picker, you probably want HEX to HSV instead.

Frequently asked questions

Is HSL the same as HSV or HSB?

No. They share the same hue, but saturation is defined differently and HSL lightness is unrelated to HSV value. For example, #FACC15 is hsl(48, 95.8%, 53.1%) but hsv(48, 91.6%, 98%).

Can I use hsl() directly in CSS?

Yes. hsl() is supported by all browsers. Modern CSS also accepts the space-separated form hsl(175 77.4% 26.1%) and an optional alpha after a slash.

Why is the hue 0 for white, black and grey?

When red, green and blue are equal there is no dominant color, so hue is undefined. By convention it is written as 0 with 0% saturation; only the lightness matters.

Why do other tools show slightly different HSL numbers?

Tools round differently. Some round saturation and lightness to whole percentages, while this one keeps one decimal place. Differences of a fraction of a percent describe the same color.