TechCompare LogoTechCompare
Showing centimeters. Press to switch to inches.Showing inches. Press to switch to centimeters.

Hex to HSL converter: find hue, saturation and lightness from a hex code

By TechCompare · Updated · How we check

#F59E0B converts to hsl(38, 92%, 50%). All three HSL numbers come from the same red, green and blue channels, so they describe one color in a different form.

  • HSLhsl(38, 92%, 50%)
  • RGBrgb(245, 158, 11)
  • CMYKcmyk(0%, 36%, 96%, 4%)
This exact #F59E0B swatch, pre-loaded. Convert to every format, adjust the HSL, or pair it against a second color.
Edit in the full tool

HSL describes a color with hue, saturation and lightness instead of red, green and blue. A hex code stores the red, green and blue, so the converter first reads the three pairs, then works out the HSL numbers. For #F59E0B the answer is hsl(38, 92%, 50%). Paste your own code above to see the HSL values with the RGB and CMYK rows beside them.

Conversion
HEX to HSL
Example: #F59E0B
Category
Web Formats
Color knowledge base

How this is calculated

Start with the largest and smallest of the three channels. Lightness is the halfway point between them, and saturation measures how far apart they are, scaled to the room left at that lightness. A gray with no spread has no saturation. For #F59E0B, lightness is 50% and saturation is 92%.

Hue is a spot on the color wheel: 0 is red, 120 is green and 240 is blue. The largest channel picks the section of the wheel, and the gap between the other two moves the hue toward the next color. For #F59E0B, red is the largest channel and green comes next, so the hue sits between red and yellow at 38 degrees. The CSS Color 4 spec gives the sample code for these steps.

A gray has all three channels equal, so there's no spread and no real hue. The gray #808080 converts to hsl(0, 0%, 50%), with hue 0 and saturation 0%. Writing hsl(38, 92%, 50%) back as hex gives #F59F0A, not #F59E0B. The HSL numbers are rounded to whole numbers, so keep the hex as the source of truth. The HSL to Hex page covers the other direction.

Verdict

Keep the hex code as the record of the color, and reach for HSL when you want to adjust it by hand. Changing one HSL number can make a color lighter, darker or more muted. Hex doesn't give you that kind of single control. The HSL color model page shows how that works in CSS.

More Color scenarios

Hex to RGB
A hex color code is three RGB numbers written in base 16.
View details
RGB vs CMYK
Screens add light and print adds ink. See one color in both, and why a plain CMYK formula can't promise a print match.
View details
HSL color model
Hue, saturation and lightness, with three live sliders and a table of common colors in hex, RGB and HSL.
View details

Related guides

Hex to RGB
The red, green and blue numbers this conversion starts from.
View guide
HSL to Hex
Turn hue, saturation and lightness back into a hex code.
View guide
HSL color model
What each HSL number means and how CSS writes it.
View guide

Frequently asked questions

Is HSL the same as HSV?
No. HSV and HSB are a different model with a different third value. This converter writes HSL only.
What hue does a gray get?
The converter shows 0. A gray has no hue, and at 0% saturation the hue number can't change the color, so that value is only a placeholder. Any hue would give the same gray.
Why do two hex codes give the same HSL?
Rounding to whole numbers causes it. #FE0000 and #FF0000 are one step apart in the red channel. Both come out as hsl(0, 100%, 50%). HSL has far fewer whole-number values than hex has codes, so some codes always share one.
How do I work out the hue by hand?
Find the largest channel and the gap between the largest and smallest. For red, take green minus blue over the gap and multiply by 60. For green, take blue minus red over the gap, add 2, then multiply by 60. For blue, take red minus green over the gap, add 4, then multiply by 60. If the answer is negative, add 360. Take #4F46E5, where blue is the top channel, so the blue rule gives 243 degrees after rounding.

Related tools

Contrast Checker

Check color contrast ratios for WCAG AA/AAA accessibility compliance.

Use tool

JSON Formatter

Validate, format, and minify JSON. Browse it as a tree, run JSONPath queries, compare two documents, or validate against a JSON Schema.

Use tool

Aspect Ratio Visualizer

Visually compare width differences between 16:9, 21:9, and 32:9 monitors.

Use tool