HEX to HSL Calculator

How it works

normalise R,G,B to 0–1 · lightness L = (max+min)/2 · saturation S = (max−min)/(1−|2L−1|) · hue H from which channel is the max, ×60°

HEX and RGB describe a colour by how much red, green and blue light to mix; HSL describes the same colour the way people think about it — as a hue on the colour wheel, a saturation (grey to vivid) and a lightness (black to white). Converting starts by scaling the three channels to 0–1. Lightness is the midpoint of the brightest and darkest channel; saturation is their spread, scaled so it does not collapse near black or white; and hue comes from which channel dominates, measured in degrees around a 360° wheel. HSL is often easier to tweak in CSS: nudge the lightness for a hover state, or shift the hue for a colour scheme, without recomputing raw RGB.

Worked example

#3366ff is red 51, green 102, blue 255. Scaled to 0–1 that is 0.2, 0.4, 1.0, so lightness = (1.0 + 0.2) ÷ 2 = 0.6 = 60%. Blue is the maximum, which puts the hue at 225°, and the channel spread gives 100% saturation — so the colour is hsl(225, 100%, 60%), a vivid blue.

Sources: <hsl()> — MDN

Frequently asked questions