Dev Tools, 7 tools

Converters, 4 tools

Text Tools, 5 tools

Color Tools, 2 tools

Generators, 3 tools

Image Tools, 4 tools

PDF Tools, 6 tools

Calculators, 4 tools

Open tools · 0

About

HEX to HSL

Paste a hex colour code and copy it as hsl(): #6366f1 is hsl(238.7, 83.5%, 66.7%). Each number keeps one decimal, because rounded to whole numbers, nine colours in ten come back as a different hex. HSB, the form design programs show, is on the line below, and OKLCH, whose lightness follows the eye, further down.

What it does

  • Hue is an angle from 0 to 360, saturation and lightness are percentages: #336699 is hsl(210, 50%, 40%).
  • Every hsl() written here reads back to the hex it came from: all 16,777,216 of them were checked.
  • A grey has no hue, so #808080 is hsl(0, 0%, 50.2%): any hue at 0% saturation is the same grey.
  • An eight-digit code keeps its alpha: #6366f180 comes out as hsla(238.7, 83.5%, 66.7%, 0.502).
  • A three-digit code is read in full first, so #abc is hsl(210, 25%, 73.3%).
  • An hsl() pasted back in is read with commas or spaces, so the lighter or darker colour you made shows its hex.
  • On a phone, the main button copies the hsl() straight away.

How to use it

  1. Paste the hex code, with or without its #.
  2. Copy the HSL line.
  3. For a lighter or darker version, change the last number and paste it back to read its hex.

What it does not do

  • Lightness that looks even: 50% in HSL is bright yellow and dark blue alike, so for steps that look equal, use the OKLCH line.
  • HSB written for a stylesheet: CSS has no hsb() or hsv(), so that line is for design programs only.

Questions

Why does hsl(239, 84%, 67%) give a slightly different hex?

Because rounding moved it. #6366f1 is hsl(238.7, 83.5%, 66.7%); rounded to whole numbers it becomes #6467f2, one step off in every channel. Rounded that way, nine colours in ten change and over a third move two steps or more; kept to one decimal, none of the 16,777,216 does.

Is HSL the same as HSB or HSV?

No. They share the hue and nothing else: #6366f1 has 83.5% saturation in HSL and 58.9% in HSB, and 66.7% lightness against 94.5% brightness. Design programs such as Photoshop show HSB and CSS takes HSL, so numbers copied from one to the other change the colour.

Why do two colours with 50% lightness look so different?

HSL’s lightness is arithmetic on red, green and blue, not what the eye sees: pure yellow, hsl(60, 100%, 50%), and pure blue, hsl(240, 100%, 50%), share it. Their OKLCH lightness is 96.8% and 45.2%.

How is hex turned into HSL by hand?

Read each channel as a fraction of 255. Lightness is the mean of the largest and smallest, saturation their difference divided by 1 − |2L − 1|, and the hue says which channel leads. For #336699 the largest is 0.6 and the smallest 0.2: lightness 40%, saturation 50%.

Everything here runs in your browser. Nothing you type, paste or open is uploaded, and there is no account and no queue. How that works.

Often used with

All toolsAbout utilbrewPrivacy