HEX to HSL Converter

How Hex Colour Codes Work

A hex colour code is a shorthand for RGB values written in base‑16 (hexadecimal). The full six‑digit form, such as #1E90FF, splits into three pairs: 1E (red), 90 (green), and FF (blue). Each pair ranges from 00 (0 in decimal) to FF (255 in decimal). That gives 256 possible values per channel, for a total of 16,777,216 colours. The leading # is conventional but optional; the page accepts either.

The three‑digit shorthand, like #abc, expands each digit to a pair by doubling it: #abc becomes #aabbcc. So #abc is equivalent to #aabbcc. That is an old CSS convention that remains widely supported. The page handles both forms transparently.

Hex is compact and machine‑friendly, but it encodes colour in a raw additive model. Changing one digit to make a colour lighter or darker requires understanding how that digit affects the RGB triplet – not intuitive for humans. That is why HSL exists.

What HSL Actually Measures

HSL stands for hue, saturation, lightness. Unlike hex or RGB, which describe colour as a mix of red, green, and blue light, HSL describes colour the way people perceive it.

• Hue (0–360) is the position on a colour wheel: 0° is red, 120° is green, 240° is blue, and the rest of the spectrum falls in between.
• Saturation (0%–100%) is the intensity of the colour. 0% is a shade of grey (no colourfulness), 100% is the purest version of that hue.
• Lightness (0%–100%) is how much light the colour appears to have. 0% is always black, 100% is always white. 50% is the “pure” hue at normal brightness.

That structure makes HSL far more useful for human‑driven tasks. To darken a colour, you reduce lightness. To make it more vivid, you increase saturation. The hue stays the same unless you deliberately rotate it. In hex, darkening a colour by reducing all three RGB channels equally will shift the hue slightly (because the relative proportions change). HSL avoids that trap.

Why HEX‑to‑HSL Conversion Exists

Developers and designers frequently encounter a hex code from a brand guideline or design mockup and need to adjust it for interaction states. For example, a button background might be #4f46e5. A hover state that is slightly lighter and more saturated is trivial to produce in HSL, but painful to guess in hex. The conversion provides the HSL equivalent: around hue 244°, saturation 74%, lightness 57%. From there, raising lightness to 65% yields a lighter version of the same hue.

The page is built for exactly that workflow. It shows the HSL value instantly, plus the colour in RGB, HSV, CMYK, and LAB, so you can copy whichever format your current toolchain expects.

The Mathematics Behind the Conversion

Converting a hex colour to HSL is a two‑step process. First, the hex code is decoded into RGB decimal values. For a six‑digit code #RRGGBB, take each pair as a two‑digit hexadecimal number and convert to an integer between 0 and 255. For the three‑digit shorthand, expand each digit to a pair first.

The second step transforms RGB into HSL. The formula is standard and defined in the CSS Color Module Level 4 specification. Here is the core logic:

1. Normalise the RGB values to the range by dividing each by 255.
2. Find the minimum and maximum values among the three channels.
   • min = min(R, G, B), max = max(R, G, B)
   • delta = max - min
3. Lightness = (max + min) / 2
4. Saturation:
   • If delta is 0, saturation = 0 (the colour is grey; hue is undefined, often set to 0).
   • Otherwise:
     • If lightness ≤ 0.5, saturation = delta / (max + min)
     • If lightness > 0.5, saturation = delta / (2 - max - min)
   • Multiply by 100 to get a percentage.
5. Hue:
   • If delta is 0, hue = 0.
   • Otherwise:
     • If max is red, hue = 60 * ((G - B) / delta mod 6)
     • If max is green, hue = 60 * ((B - R) / delta + 2)
     • If max is blue, hue = 60 * ((R - G) / delta + 4)
   • If the result is negative, add 360. Final hue is in degrees.

For a worked example, take #1E90FF (DodgerBlue). RGB decimal values: R=30, G=144, B=255. After normalisation: R≈0.1176, G≈0.5647, B=1.0. Min=0.1176, max=1.0, delta≈0.8824. Lightness = (0.1176+1.0)/2 = 0.5588 → 55.88%. Since lightness > 0.5, saturation = 0.8824 / (2 - 0.1176 - 1.0) ≈ 0.8824 / 0.8824 = 1.0 → 100%. Hue: max is blue, so hue = 60 * ((0.1176 - 0.5647)/0.8824 + 4) = 60 * ((-0.4471)/0.8824 + 4) = 60 * (-0.5068 + 4) = 60 * 3.4932 ≈ 209.6°. So HSL is (210°, 100%, 56%), which matches the page’s output.

The page performs this conversion instantly in JavaScript, client‑side, so no data leaves your browser.

Edge Cases, Limitations, and Warnings

Several edge cases affect the tool. Understanding them prevents confusion.

• Invalid input: If you type anything that is not a valid six‑digit or three‑digit hex code (with or without #), the page shows the error: “Enter a hex color like #4f46e5 or #abc.” It does not try to guess or autocorrect.

• No alpha channel: Standard hex codes carry no transparency information. HSLA (HSL with alpha) exists, but the page deals with fully opaque colours only. Converting a hex code with an alpha extension (e.g., #1E90FF80) is not supported; the input must be pure colour.

• Out‑of‑gamut colours: HSL is an abstract colour model that can describe colours outside a particular display’s gamut. When you switch to another colour space like LAB or CMYK and enter a value that cannot be represented on a standard sRGB screen, the page clamps the colour to the nearest displayable colour. Converting that clamped colour back to hex may produce a slightly different code than you started with. That is expected behaviour – the tool warns that CMYK values are an on‑screen estimate and should not be used for professional print without calibration.

• Three‑digit shorthand mapping: #abc expands to #aabbcc. This is correct per the CSS specification, but some designers mistakenly think #abc represents the same colour as #aabbcc with a different channel order. It does not; the digit repetition is required.

• No HSL‑to‑HEX conversion on this page: The tool is one‑way – it only converts hex to HSL. If you need the reverse, you would use a different page on the site.

Who Benefits from This Conversion

Front‑end developers often work with CSS custom properties that store HSL values: --brand-hue: 244; --brand-saturation: 74%; --brand-lightness: 57%;. Then hover states become --brand-lightness: 65%;. Converting a hex brand colour to HSL is the first step.

UI/UX designers think in hue and lightness. They use HSL to build colour scales, monochromatic palettes, and accessible themes. Starting from a hex code given by a client, this page translates it into a format they can reason about.

Accessibility auditors need to check contrast ratios. They often find HSL more intuitive than raw hex or RGB because they can keep hue fixed while raising lightness to meet WCAG AA or AAA thresholds. The page gives them the HSL values they need.

Anyone building a colour palette – whether for a website, a presentation, or a data visualisation – can use HSL to create harmonious colour schemes. Complementary colours are 180° apart on the hue wheel; analogous colours are 30° apart. Those relationships vanish in hex.

Frequently Asked Questions

1. Why does the HSL output sometimes show hue as 0°?
Hue is 0° when the colour is a shade of grey (saturation = 0%). In that case hue is mathematically undefined and the CSS specification sets it to 0. The page follows that convention.

2. Can I use the three‑digit hex code for any colour?
Only for colours where each channel has a repeating digit pair – for example, #aabbcc can be written as #abc. Colours like #1E90FF have different digits in each pair and cannot be abbreviated.

3. Why does the colour change when I go to CMYK and back?
CMYK is a subtractive model for print. The conversion from RGB to CMYK is a mathematical estimate; the reverse conversion (CMYK → RGB) is not exact for all colours. Additionally, some CMYK values represent colours outside the sRGB gamut, so the display clamps them. The page warns that CMYK values are on‑screen estimates.

4. What is the difference between HSL and HSV?
Both use hue (0–360). HSV uses saturation and “value” (brightness), while HSL uses saturation and “lightness”. In HSV, pure colours occur at value = 1.0 and saturation = 1.0. In HSL, pure colours occur at lightness = 50%. The formulas are different, so the same hex colour yields different HSL and HSV numbers.

5. Does this tool work on mobile browsers?
Yes. All processing happens in JavaScript in your browser, with no server requests. It works on any modern browser that supports ES2015.

6. Can I convert a hex code with a hash but no digits?
No. The page requires either six or three hexadecimal digits after the optional #. Entering just # or #1234 will trigger the invalid‑input error.