CODDY Tool

HEX to HSL

Convert a hex colour code to HSL.

Turn a hex value into hue, saturation and lightness — the format to use when you want to adjust a colour rather than just record it. Shows RGB, CMYK and OKLCH at the same time.

Everything you enter stays in this browser tab. Nothing is sent to our servers, logged or stored.

This is one of the thingsColor Converterdoes — open it for everything else it supports.

Loading tool…

What Color Converter supports

  • HEXThe web default, with optional alpha.
  • RGBRed, green and blue from 0 to 255.
  • HSLHue, saturation and lightness.
  • HSVThe model behind most colour pickers.
  • CMYKFour-colour process, for print.
  • OKLCHPerceptually even; modern CSS.

About HEX to HSL

HSL describes a colour the way a person would: which colour it is (hue, an angle from 0 to 360), how vivid it is (saturation) and how light it is (lightness). RGB and hex describe how much of each primary a screen should emit, which is precise and almost impossible to reason about by hand.

The practical benefit is editing. Making a colour 10% darker in HSL means changing one number. In hex it means converting to RGB, scaling three channels, and converting back — and the result usually shifts hue slightly because the channels do not scale evenly.

One caveat worth knowing: HSL lightness is not perceived lightness. Yellow and blue at 50% lightness look nothing alike in brightness. If you are generating a colour scale where the steps must look even, OKLCH — also shown here — is the format designed for that.

How to convert HEX to HSL

  1. Paste your hex code

    Any hex form works, including the three-digit shorthand and the eight-digit form with alpha.

  2. Read the HSL value

    The highlighted row gives hue in degrees, with saturation and lightness as percentages, ready for CSS.

  3. Edit it directly

    Drag the lightness slider to make a colour lighter or darker without shifting its hue — the reason to work in HSL in the first place.

Frequently asked questions

What do the three HSL numbers mean?

Hue is a position on the colour wheel in degrees: 0 is red, 120 is green, 240 is blue. Saturation runs from 0% (grey) to 100% (fully vivid). Lightness runs from 0% (black) through 50% (the pure hue) to 100% (white).

Why does 50% lightness look different for different hues?

Because HSL lightness is a geometric midpoint, not a perceptual one, and the eye is far more sensitive to green light than to blue. Yellow at 50% looks bright, blue at 50% looks dark. OKLCH exists specifically to fix this.

Is HSL supported everywhere in CSS?

Yes, in every browser, in both hsl(240, 68%, 57%) and the newer hsl(240 68% 57%) syntax. The space-separated form takes alpha after a slash, replacing hsla().

Should I store colours as HSL in my CSS?

It is a reasonable choice, and it makes hover and disabled states easy to derive by nudging lightness. The alternative worth considering is OKLCH, which offers the same convenience and, unlike HSL, keeps perceived brightness consistent across hues.

Related tools

All Color & Design Tools

Color Converter

Color & Design Tools

Convert a colour between HEX, RGB, HSL, HSV, CMYK and OKLCH.

HEX to RGB

Color & Design Tools

Convert a hex colour code to RGB values.

RGB to HEX

Color & Design Tools

Convert RGB values to a hex colour code.

Color Palette Generator

Color & Design Tools

Build harmonious colour palettes from one base colour, ready to copy as CSS.

Contrast Checker

Color & Design Tools

Check any colour pairing against the WCAG AA and AAA contrast requirements.

HEX to HSL is free to use with no account, no watermark and no usage limits. Last updated 14 August 2026.