HEX to HSL Converter

What the three HSL numbers describe

HSL arranges every sRGB color inside a cylinder. Hue is the angle around it: 0° sits at red, then 60° yellow, 120° green, 180° cyan, 240° blue and 300° magenta, coming back to red at 360°. Saturation is the distance from the gray core — 0% is colorless, 100% is as vivid as sRGB allows. Lightness is the height: 0% is always black, 100% is always white, and the most intense version of a hue lives at 50%.

No color is gained or lost in the process. HSL is only a different coordinate system laid over the identical set of colors a HEX code can express, chosen because angles and percentages line up with how people talk about color — “warmer”, “washed out”, “a bit darker”.

Why designers adjust HSL instead of RGB channels

Suppose your brand blue is #3564c4 and you need a pressed-state variant. Darkening it in RGB means scaling three interlocked numbers by just the right ratio — misjudge one channel and the hue itself drifts toward purple or teal. In HSL the same edit is a single slider: leave hue and saturation alone and pull lightness down a few points.

• Hover and pressed states — nudge lightness up or down by 8–12 points while hue stays locked.
• Disabled and muted variants — cut saturation instead of overlaying gray, which keeps the UI family coherent.
• Tint and shade scales — hold hue and saturation constant, then step lightness from about 95% down to 15% for a 50–900 palette.
• Theming — expose hue as a single CSS custom property and derive an entire accent range from it.

Worked example: #3564c4 by hand

The pairs of #3564c4 decode to red 53, green 100, blue 196. From there the algorithm needs the largest channel (196), the smallest (53), and their gap, 196 − 53 = 143.

• Lightness is the midpoint of max and min: (196 + 53) ÷ 2 = 124.5, and 124.5 ÷ 255 ≈ 48.8% — call it 49%.
• Saturation (with lightness below 50%) divides the gap by max + min: 143 ÷ 249 ≈ 0.574, so 57%.
• Hue, since blue is the largest channel, is 60 × (4 + (53 − 100) ÷ 143) = 60 × 3.671 ≈ 220.3°, rounded to 220°.

Result: hsl(220, 57%, 49%) — a blue whose angle confirms what the swatch shows, just twenty degrees shy of pure blue at 240°.

Common HEX codes as HSL

Hues in the table are rounded to whole degrees — orange, for instance, computes to 38.8°. Fully saturated web colors tend to land on tidy angles, which makes HSL pleasant for eyeballing relationships between shades.

Reading an HSL value fluently

With a little practice an HSL triple becomes readable without any preview. The hue names itself in rough 30-degree steps — anything near 220 is a business-suit blue, 10 leans tomato, 160 lands on spearmint green. Saturation then tells you how loud the color is, and lightness hints at what can sit on top of it: below roughly 45% white text usually holds up, above 60% dark text does. Try calling a code before you paste it in — the live swatch grades your intuition immediately, and the skill transfers to every stylesheet you review.

The honest caveat: HSL lightness is not human lightness

HSL treats all hues as equals, and human eyes simply don’t. hsl(60, 100%, 50%) (yellow) and hsl(240, 100%, 50%) (blue) share the identical 50% lightness, yet their measured relative luminance is about 0.93 versus 0.07 — the yellow is blindingly bright while the blue is almost as dark as text. Two practical consequences: never judge text readability from HSL numbers, and expect palette steps built on equal lightness increments to look uneven across hues.

The modern fix is OKLCH, whose lightness axis is perceptually uniform — that same yellow scores roughly 0.97 there and the blue only 0.45, matching what you actually see. The format list under this converter already prints the OKLCH value, and the dedicated HEX to OKLCH converter digs deeper when you are building accessible ramps.

Round-tripping and rounding drift

Converting back is where whole-number HSL bites. The exact coordinates of #3564c4 are hsl(220.28°, 57.4%, 48.8%); once rounded to hsl(220, 57%, 49%) and converted again you get #3665c4 — red and green each off by one. That difference is invisible in a swatch but real to snapshot tests, canvas comparisons and brand-compliance checkers. Treat the HEX code as the source of truth and derive HSL from it, or keep one decimal place when you must store HSL.

The math on this page is done client-side; no color you enter is ever uploaded to a server. Once you’ve settled on a lightness pair for text and background, run it through the contrast checker to confirm the WCAG ratio before it ships.