NineClip Free Tools

HEX to HSL Converter

Convert a hex color into adjustable HSL — hue, saturation and lightness — the designer-friendly way to tweak a color.

Color Tools● Free No upload Instant

Loading HEX to HSL Converter…

Your browser is preparing the tool. It runs 100% locally.

Quick Answer

Paste a hex color and this returns its HSL — hue in degrees (0–360), plus saturation and lightness as percentages — like #06B6D4 → hsl(189°, 94%, 43%). HSL is a designer-friendly way to read a color: hue says which color it is, saturation how vivid, lightness how light. That makes adjusting a color far more intuitive than editing raw hex.

What the HEX to HSL Converter Does

Type a hex color and the tool shows it in HSL — the hue angle, the saturation percentage and the lightness percentage — plus the CSS hsl() string. It takes three- or six-digit hex, repaints a swatch, and recalculates as you type. It opens on #06B6D4, a bright cyan.

HSL earns its keep when you want to change a color rather than just record it. Need a darker shade? Lower the lightness. A muted version? Drop the saturation. A complementary hue? Add 180 to the hue angle. A raw hex hides all of that; HSL puts it on three readable dials.

How It Works

First the tool reads the hex as RGB — the same base-16 split the HEX-to-RGB tool uses — then transforms those three numbers into HSL, a cylinder where the angle around it is hue, the distance from the centre is saturation, and the height is lightness.

Lightness comes out as the midpoint of the brightest and darkest channel; saturation is how far apart those two are, relative to that lightness; hue is the angle of whichever channel dominates. The three results are rounded to whole numbers and shown alongside the ready-to-paste hsl() string.

Data source & conversion logic

No data is fetched. The tool reads the hex as an sRGB color, then applies the standard RGB-to-HSL geometry from the CSS Color specification — finding the maximum and minimum channels and deriving hue, saturation and lightness — all in the page.

  1. Step 1. Read the hex as red, green and blue (0–255), expanding three-digit shorthand first.
  2. Step 2. Scale the three channels to a 0–1 range and find the brightest (max) and darkest (min).
  3. Step 3. Set lightness to the average of max and min.
  4. Step 4. Set saturation from how far max and min are apart, relative to that lightness — 0 if they're equal, which means a gray.
  5. Step 5. Set hue to the angle (0–360°) of whichever channel is the max, then show H°, S%, L% and the hsl() string.

Hex to HSL (via RGB)

R, G, B scaled to 0–1; max, min of the three; Δ = max − min L = (max + min) / 2 S = Δ / (max + min) for darker colors (L ≤ 50%) S = Δ / (2 − max − min) for lighter colors (L above 50%) H = 60° × the hue sector of the dominant channel
Worked examples
#FF0000 → rgb(255, 0, 0) → hsl(0°, 100%, 50%) (pure red)
#06B6D4 → rgb(6, 182, 212) → hsl(189°, 94%, 43%)

When max and min are equal the color is a gray, so saturation is 0 and hue is undefined — reported as 0°. All three values are rounded to whole numbers, so a hex → HSL → hex round-trip can shift by a step.

Technical Details

InputHex #RRGGBB or #RGB shorthand
OutputH (0–360°), S and L (0–100%) plus hsl()
RouteHex → RGB → HSL
Lightness(max + min) / 2 of the channels
RoundingWhole degrees and percentages
GraySaturation 0, hue reported as 0°
ReversibleApproximate — values are rounded
Where it runsIn your browser, live

Standards & references

  • HSL color model — a cylindrical transform of RGB: hue 0–360°, saturation and lightness 0–100%, with lightness defined as the midpoint of the brightest and darkest channel.
  • CSS Color — hsl() — the hsl() string the tool outputs is standard CSS functional notation, valid in any stylesheet.
  • sRGB — the hex is read as an sRGB color before the HSL geometry is applied, so the numbers describe that same sRGB color.

Accuracy & Limitations

HSL here is rounded to whole degrees and percentages. That's fine for CSS, but it means a hex → HSL → hex round-trip can land a step off the original. For an exact, reversible pair, use HEX and RGB instead.

HSL is a simple transform of sRGB, not a perceptual space. Two colors at the same lightness number can look noticeably different in brightness to the eye — yellow reads far lighter than blue at the same L. That's a known limitation of HSL, not a fault in the tool; for perceptually even ramps, designers now reach for newer spaces like OKLCH.

For a pure gray, where red, green and blue are equal, hue has no meaning. The tool reports 0°, which is the usual convention, and saturation is 0.

Real-World Use Cases

Building tints and shades

Hold the hue and saturation steady and step the lightness up or down to generate a consistent shade ramp from one color.

Muting or intensifying a color

Change only the saturation to make a color calmer or more vivid without shifting which color it is.

Finding related hues

Shift the hue angle to reach a complementary color (add 180°) or analogous neighbours (±30°) for a quick scheme.

Reading a color at a glance

See 'a vivid cyan, fairly light' in the numbers, instead of decoding a hex string in your head.

When to use it — and when not to

Good for

  • Adjusting a color by hue, saturation or lightness
  • Generating tint and shade ramps from one base
  • Understanding what a hex color actually is
  • Writing readable, tweakable CSS color tokens

Not the best choice for

  • An exact, reversible round-trip
  • Perceptually uniform color work
  • A print-accurate CMYK reference

Need an exact round-trip? Use HEX to RGB. Want perceptual uniformity for accessible ramps? Look at OKLCH. Building a whole scheme at once? Try the color palette generator.

Frequently Asked Questions

What do the HSL numbers mean?
Hue is an angle from 0 to 360 degrees that picks the color (red near 0, green near 120, blue near 240). Saturation is how vivid it is, from 0 percent (gray) to 100 percent. Lightness runs from 0 percent (black) through the pure hue at 50 percent to 100 percent (white).
Why convert a hex color to HSL?
Because HSL is built for adjusting colors. The three numbers map to things you actually want to change — which color, how vivid, how light — so tweaking a shade or building a palette is far easier than nudging hex digits.
How do I make a color darker or lighter?
Change the lightness. Keep the hue and saturation the same and lower L for a darker shade or raise it for a lighter tint — that's the usual way to build a ramp of one color.
How do I make a color less intense?
Lower the saturation. Reducing S moves the color toward gray while keeping the same hue and lightness, which mutes it; raising S makes it more vivid.
Does it accept three-digit hex shorthand?
Yes. A shorthand like #0BD is expanded to #00BBDD before conversion, exactly as the longer form would be.
Why is the hue 0° for grays, blacks and whites?
Because when red, green and blue are equal there's no dominant channel, so hue is mathematically undefined. The convention — and what this tool shows — is 0°, with saturation at 0 percent.
Is HSL the same as HSB or HSV?
No. They share a hue, but HSL's lightness and HSV's value (brightness) are defined differently, so the saturation and third number won't match between them. This tool outputs HSL, the model CSS uses.
Can I convert HSL back to the exact hex?
Roughly, not exactly. Because the HSL values are rounded to whole numbers, converting back can shift the color by a step. When you need a guaranteed round-trip, use HEX and RGB, which map exactly.
Is HSL perceptually uniform?
No. It's a straightforward transform of sRGB, so equal lightness numbers don't always look equally bright — yellow appears lighter than blue at the same L. For perceptually even results, newer spaces like OKLCH are a better fit.
What's the hsl() string for?
It's the CSS form of the same color, like hsl(189, 94%, 43%), ready to paste into a stylesheet. Modern CSS reads HSL natively, so you can use it directly instead of a hex.
Is my color sent anywhere?
No. The hex is read and converted entirely in your browser; nothing you enter is uploaded.
What ranges do the three values use?
Hue is 0 to 360 degrees, and saturation and lightness are each 0 to 100 percent. The tool rounds all three to whole numbers.

References

Lightness is the midpoint of the brightest and darkest channel and the values are rounded to whole numbers — great for CSS, but use HEX and RGB when you need an exact round-trip.

PopularHot

Color Picker

Use Color Picker to choose and convert color precisely — instant and free.

ColorOpen Tool
Popular

HEX to RGB Converter

Use HEX to RGB Converter to choose and convert color precisely — instant and free.

ColorOpen Tool
Trending

Color Palette Generator

Use Color Palette Generator to choose and convert color precisely — instant and free.

ColorOpen Tool
Trending

Gradient Generator

Use Gradient Generator to choose and convert color precisely — instant and free.

ColorOpen Tool
Editor's Pick

Contrast Checker

Use Contrast Checker to choose and convert color precisely — instant and free.

ColorOpen Tool

RGB to HEX Converter

RGB to HEX Converter with copy-ready values for design and front-end work.

ColorOpen Tool

Ready to try the HEX to HSL Converter?

It is free, private and runs entirely in your browser — no sign-up, no uploads, no limits.

Use the tool now Explore Color Tools