Hex to HSL

Paste a hex code. The swatch updates as you type, and the HSL, RGB, HSV, and CMYK values appear below.

Hex color

#5b9dff

How hex and HSL relate

A hex color is just RGB written in base 16 — #5b9dff means red 91, green 157, blue 255. HSL describes the same color in a way that matches how people think about color: hue (where on the color wheel), saturation (how vivid), and lightness (how close to black or white). Converting from hex to HSL is a coordinate change, not a change of color — the pixel on screen is identical.

The HSL values shown here round hue to whole degrees and saturation/lightness to whole percentages, which is what CSS accepts and what design tools like Figma, Sketch, and Adobe apps display. The conversion is exact up to that rounding.

Why designers work in HSL instead of hex

  • Lightness is a dial. Changing l in HSL produces a predictable tint or shade. Doing the same in hex means recalculating three channels by hand.
  • Saturation is a dial. Turning a vivid color into a muted one is a single number change, not a per-channel adjustment.
  • Hue arithmetic builds palettes. A complementary color is h + 180; a triadic palette is h + 120 and h + 240. No hex math needed.
  • CSS takes HSL directly. color: hsl(214, 100%, 68%) is as valid as the hex form.

What the lightness ramp shows

The strip below the swatch keeps the input's hue and saturation fixed and sweeps lightness from 90% down to 10%. It's a visual answer to "what happens if I lighten or darken this color?" — the same thing a designer does when generating a hover state or a disabled variant.

HSL vs HSV vs CMYK

  • HSL puts white at 100% lightness and any color at 50%. It matches the CSS model.
  • HSV (also called HSB) puts the full-brightness color at 100% value and black at 0%. It's the model most color pickers and design tools use internally.
  • CMYK is the subtractive color model used in print. The values here are a naive conversion — real print-ready CMYK requires an ICC profile, so treat these as a starting point, not production numbers.

Questions

Does this tool support alpha / transparency?

Yes. Four-digit (#abcd) and eight-digit (#aabbccdd) hex codes are parsed, and the last pair becomes the alpha value. When the color has alpha, the RGB and HSL rows switch to rgba() and hsla() forms automatically, and the hex output includes the alpha byte.

Why does a gray color show hue 0?

Hue is the position on the color wheel. A perfect gray has no position — it's the exact center. When saturation is 0 the hue is undefined, and every implementation (including this one) reports it as 0. Changing the hue of a gray produces no visible change.

Why doesn't my HSL value match Figma exactly?

Figma, Sketch, and Adobe round HSL slightly differently. This tool uses the standard CSS rounding (round half away from zero) and shows whole numbers. The underlying color is identical — a 1% difference in the displayed lightness is a rounding artifact, not a different color.

Can I convert HSL back to hex here?

Not in this tool — it's a one-way hex → HSL conversion. But every output row is directly pasteable into CSS, so the HSL value you copy is already the form you'd use in a stylesheet. If you need a full HSL slider, a different tool for that is a separate concern.