Developer Tools

HEX to HSL

Convert hexadecimal color codes to HSL (hue, saturation, lightness) values. Useful for CSS colors, design tokens, and color theory exploration.

Color picker

HEX color code

HSL result

hsl(12, 70%, 49%)

Hue: 12° | Saturation: 70% | Lightness: 49%

Color swatch

HEX#D64A26

RGBrgb(214, 74, 38)

HSL12°, 70%, 49%

What is the HEX to HSL?

HEX to HSL conversion translates six-digit hexadecimal color codes (like #FF5733) into three-component HSL values where Hue is the color wheel position (0–360°), Saturation is color intensity (0–100%), and Lightness is brightness (0–100%). HSL is often more intuitive for design work because adjusting saturation or lightness doesn't require recalculating the entire color like it does in HEX format.

How it works

The converter first decodes the HEX code into red, green, and blue values (0–255 each). These RGB values are then normalized to 0–1 range and fed through the HSL algorithm: Hue is determined by which RGB component is largest; Saturation and Lightness are calculated from the max and min RGB values and their relationships. The result is three easy-to-manipulate values that CSS, SVG, and design tools natively understand.

Lightness = (Max + Min) / 2; Saturation = (Max − Min) / (1 − |2L − 1|); Hue = determined by which RGB max determines the segment on the color wheel (0–360°)

Max and Min are the largest and smallest of the three normalized RGB values. Lightness tells you overall brightness; Saturation measures how vivid the color is; Hue anchors it to a position on the 360° color wheel. Higher saturation = more vivid; lower lightness = darker.

Input	Result	Notes
#FF5733	hsl(11, 100%, 60%)	A bright orange-red; high saturation and mid-range lightness make it pop in UI
#808080	hsl(0, 0%, 50%)	Neutral gray; 0% saturation means no hue (achromatic)
#1E90FF	hsl(217, 100%, 48%)	Dodger blue; a primary color commonly used in web interfaces

Input

Result

Notes

#FF5733

hsl(11, 100%, 60%)

A bright orange-red; high saturation and mid-range lightness make it pop in UI

#808080

hsl(0, 0%, 50%)

Neutral gray; 0% saturation means no hue (achromatic)

#1E90FF

hsl(217, 100%, 48%)

Dodger blue; a primary color commonly used in web interfaces

How to use the HEX to HSL

Paste or type your HEX color code (with or without the # symbol) into the input field

Click 'Convert' or watch the result update in real time

Read the HSL output as hsl(H, S%, L%) or copy the individual H, S, L values

Use the HSL values in your CSS, design tool, or color manipulation library

Adjust Hue to rotate the color, Saturation to make it more or less vivid, or Lightness to brighten or darken

Benefits

Simplifies color design workflows by converting HEX into a more intuitive HSL format

Enables quick accessibility tweaks—boost lightness for contrast without changing hue

Supports CSS color() functions and SCSS/Less color manipulation

Eliminates manual calculation errors when working with color harmonies or gradients

Useful for building color palettes where you need consistent hue but varying saturation and lightness

Tips & common mistakes

Common mistakes

Forgetting the # symbol—most converters accept 6-digit hex without it, but double-check

Assuming HSL lightness 50% is always a 'pure' color—it's the midpoint between darkest and lightest, not maximum saturation

Mixing RGB and HSL in the same workflow without confirming the conversion—always validate in your design tool

Ignoring hue wrapping—HSL hue is circular, so 360° and 0° are the same color

Tips

To create a lighter version of your color, convert to HSL, keep H and S the same, and raise L (e.g., 50% to 70%)

Use the Hue value to find complementary colors: the opposite hue is always H + 180° (or H − 180°)

Many CSS preprocessors let you write hsl() directly; this tool helps you verify your math before deployment

For accessibility, aim for at least 4.5:1 contrast ratio by adjusting Lightness—use a contrast checker alongside this tool

Frequently asked questions

Why use HSL instead of HEX?

HSL separates color (Hue) from brightness (Lightness) and vividness (Saturation), making it easier to create color variations and maintain consistency in design systems. HEX is just RGB in hex notation—harder to tweak intuitively.

Can I convert HSL back to HEX?

Yes—use our HSL to HEX converter (the reverse process). Most design tools also handle both natively.

Do all browsers support hsl() in CSS?

Yes, all modern browsers (and IE 9+) support hsl() and hsla() in CSS. CSS Color Module Level 4 also supports the newer hsl(H S L) syntax without commas.

What if my HEX code is 3 characters (e.g., #F57)?

Expand it to 6 digits by doubling each character: #F57 becomes #FF5577. Most converters handle this automatically.

Is there a difference between hsl() and hsla()?

hsla() includes an alpha channel (opacity) as a fourth value, e.g., hsla(11, 100%, 60%, 0.8). hsl() is opaque (alpha = 1).

How do I use HSL in a design tool like Figma or Adobe XD?

Most design tools accept hsl() values in color input fields or let you toggle to HSL sliders. Paste the HSL result into the color picker's text field or manually set H, S, L sliders.