ToolNimba
Home
Unit Converters Math & Numbers Finance & Money Health & Fitness Text Tools SEO Tools Developer Tools Color Tools Generators Image Tools Education & Grades Date & Time Construction & Home YouTube Tools
Blog All tools (A to Z)

🎨 Hex to HSL Converter, Convert Hex Colors to HSL Instantly

Shihab Mia By Shihab Mia · Updated 2026-08-01

Hue (H)

219°

Saturation (S)

100%

Lightness (L)

60%

RGB

51, 123, 255

This hex to HSL converter turns any hex color code into its exact hue, saturation, and lightness values, along with a ready-to-paste CSS hsl() string and a live swatch so you can see the color before you use it. Type a hex value with or without the "#" and the conversion updates instantly, using the same max/min/delta math browsers use internally. It is built for designers and developers who need HSL values for theming, color palettes, or CSS variables without opening a design app.

What is the Hex to HSL Converter?

A hex color code like #337BFF packs three values, red, green, and blue, into six hexadecimal digits, two per channel, each ranging from 00 to FF (0 to 255 in decimal). HSL describes the same color differently: hue is the position on a 360 degree color wheel, saturation is how intense or muted the color is as a percentage, and lightness is how close the color sits to black or white, also as a percentage. Designers often prefer HSL over hex because it maps more naturally to how people think about color, "a slightly darker version of this blue" is a lightness tweak in HSL, but a non-obvious digit change in hex.

The hex to HSL conversion happens in two steps. First, the hex string is split into its R, G, B components and each is normalized to a 0-1 range by dividing by 255. Second, the standard max/min/delta algorithm finds the largest and smallest of the three normalized channels. Lightness is the average of the max and min. Saturation depends on how far apart the max and min are relative to the lightness. Hue is calculated from which channel (red, green, or blue) held the maximum value, using a piecewise formula that produces a raw hue between 0 and 6, which is then multiplied by 60 to land in the familiar 0 to 360 degree range.

This is exactly the calculation this hex to HSL converter runs on every keystroke. It parses your hex input, whether you typed 3 digits like #37F or the full 6 digit form, normalizes the RGB channels, and applies the max/min/delta formula to output hue in degrees and saturation and lightness as percentages. The result is shown as individual H, S, and L values plus a complete hsl(H, S%, L%) string you can copy straight into a stylesheet.

Knowing how to convert hex to HSL matters most when you are building a color system. If your brand color is a hex code but you want a family of lighter and darker shades for hover states, borders, or backgrounds, HSL makes that trivial, you keep the hue and saturation fixed and only change the lightness percentage. That single insight, once you have the HSL numbers from a hex code, is why this conversion is such a common step in CSS custom properties and design tokens.

When to use it

  • Converting a brand hex color into HSL so you can generate lighter and darker shades by adjusting only the lightness percentage.
  • Building CSS custom properties (--brand-h, --brand-s, --brand-l) from an existing hex palette for easier theming.
  • Checking the saturation and lightness of a color pulled from a design file to match it against accessibility contrast guidelines.
  • Translating a hex value from a style guide or screenshot into HSL for use in a Tailwind, Sass, or CSS-in-JS color scale.

How to use the Hex to HSL Converter

  1. Type or paste a hex color into the input, with or without the leading "#" (3-digit or 6-digit hex both work).
  2. Read the Hue, Saturation, and Lightness values update instantly in the results grid, along with the equivalent RGB values.
  3. Check the live color swatch to confirm it matches the color you expected.
  4. Copy the ready-made CSS hsl() string with the Copy button and paste it directly into your stylesheet.

Formula & method

Normalize R, G, B to 0-1 by dividing each by 255. Let max = largest of R, G, B and min = smallest. Lightness L = (max + min) / 2. If max equals min, Hue = 0 and Saturation = 0 (a gray). Otherwise let delta = max - min; Saturation S = delta / (2 - max - min) when L > 0.5, otherwise S = delta / (max + min). Hue depends on which channel is max: if R is max, H = 60 x (((G - B) / delta) mod 6); if G is max, H = 60 x ((B - R) / delta + 2); if B is max, H = 60 x ((R - G) / delta + 4). Multiply S and L by 100 for percentages.

Worked examples

Convert the hex color #337BFF (a medium blue) to HSL.

  1. Split into channels: R = 0x33 = 51, G = 0x7B = 123, B = 0xFF = 255.
  2. Normalize: R = 51/255 = 0.2, G = 123/255 = 0.482, B = 255/255 = 1.0.
  3. Find max = 1.0 (blue), min = 0.2 (red), so delta = 0.8.
  4. Lightness L = (1.0 + 0.2) / 2 = 0.6, so 60%.
  5. Since blue is max, H = 60 x ((0.2 - 0.482) / 0.8 + 4) = 60 x 3.647 = about 219 degrees; S = 0.8 / (2 - 1.0 - 0.2) = 1.0, so 100%.

Result: #337BFF converts to hsl(219, 100%, 60%)

Convert the 3-digit shorthand hex #E33 (a warm red) to HSL.

  1. Expand the shorthand: #E33 becomes #EE3333.
  2. Split into channels: R = 0xEE = 238, G = 0x33 = 51, B = 0x33 = 51.
  3. Normalize: R = 0.933, G = 0.2, B = 0.2. Max = 0.933 (red), min = 0.2, delta = 0.733.
  4. Lightness L = (0.933 + 0.2) / 2 = 0.567, so about 57%.
  5. Since red is max, H = 60 x (((0.2 - 0.2) / 0.733) mod 6) = 0 degrees; S = 0.733 / (2 - 0.933 - 0.2) = 0.846, so about 85%.

Result: #E33 converts to hsl(0, 85%, 57%)

Common hex colors and their exact HSL equivalents

HexColorHSL
#FFFFFFWhitehsl(0, 0%, 100%)
#000000Blackhsl(0, 0%, 0%)
#FF0000Redhsl(0, 100%, 50%)
#00FF00Greenhsl(120, 100%, 50%)
#0000FFBluehsl(240, 100%, 50%)
#808080Grayhsl(0, 0%, 50%)
#FFA500Orangehsl(38.8, 100%, 50%)
#800080Purplehsl(300, 100%, 25%)

How each HSL component behaves

ComponentRangeWhat it controls
Hue (H)0 to 360 degreesThe base color, its position on the color wheel (0 = red, 120 = green, 240 = blue).
Saturation (S)0% to 100%Color intensity: 0% is fully gray, 100% is the most vivid version of the hue.
Lightness (L)0% to 100%How close to black (0%) or white (100%) the color is; 50% is the purest form of the hue.

Common mistakes to avoid

  • Forgetting that hue wraps at 360 degrees. Hue is circular, 0 and 360 degrees are the same red. If a calculation produces a negative hue, add 360 to bring it back into range, otherwise CSS may render an unexpected color.
  • Using the wrong saturation formula for light vs dark colors. Saturation is calculated differently depending on whether lightness is above or below 50%. Using a single formula for both cases produces saturation values that are subtly wrong for very light or very dark colors.
  • Rounding H, S, and L too early. Rounding intermediate values before finishing the calculation can shift the final hue by several degrees. Always compute with full precision and round only the final H, S, and L for display.
  • Assuming HSL and HSB/HSV are the same model. HSL (lightness) and HSV/HSB (brightness) look similar but use different math for the third component. A color converted to HSL will not have the same "L" number as its HSV "V", so mixing formulas from the two models gives wrong results.

Glossary

Hex color code
A 6-digit (or 3-digit shorthand) base-16 representation of a color, two digits each for red, green, and blue, for example #337BFF.
HSL
A color model expressing color as Hue (0-360 degrees), Saturation (0-100%), and Lightness (0-100%), designed to match how people intuitively describe color.
Hue
The base color itself, expressed as an angle on a 360 degree color wheel, where 0 is red, 120 is green, and 240 is blue.
Saturation
The intensity or purity of a color as a percentage; 0% is a shade of gray and 100% is the most vivid version of that hue.
Lightness
How close a color is to black or white, as a percentage; 0% is always black, 100% is always white, and 50% is the pure, undiluted hue.
Max/min/delta algorithm
The standard method for converting RGB to HSL: find the largest and smallest of the three normalized RGB channels, then derive lightness, saturation, and hue from their relationship.

Frequently asked questions

How do you convert hex to HSL?

Split the hex code into R, G, B values, normalize each to a 0-1 range by dividing by 255, then apply the max/min/delta algorithm to get lightness from the average of the max and min, saturation from their difference, and hue from which channel was largest. This tool does that automatically when you type a hex value.

What does HSL stand for?

HSL stands for Hue, Saturation, and Lightness. Hue is the base color in degrees (0-360), saturation is color intensity as a percentage, and lightness is how close the color is to black or white, also as a percentage.

Can I convert a 3-digit hex code like #FFF?

Yes. This converter automatically expands shorthand 3-digit hex codes, so #FFF becomes #FFFFFF before the HSL calculation runs, giving the same result as typing the full 6-digit code.

Why would I use HSL instead of hex in CSS?

HSL makes it easy to create color variations by changing a single number: increase lightness for a lighter shade, decrease it for a darker one, or adjust saturation for a muted version, all while keeping the same hue. Hex codes do not offer that direct control.

Does the hue value ever go above 360 degrees?

No, valid hue values always fall between 0 and 360 degrees since hue represents a position on a circular color wheel. If a raw calculation produces a negative or out-of-range number, 360 is added or subtracted to normalize it.

Is this hex to HSL conversion exact or approximate?

It is mathematically exact, using the same max/min/delta formula that browsers and design tools use internally. The displayed H, S, and L values are rounded to whole numbers for readability, but the underlying calculation has full precision.