🎨 Color Converter

How RGB becomes HSL

The three channels are scaled to 0-1, then lightness is the midpoint of the largest and smallest, and saturation is the spread between them normalised differently above and below mid-lightness:

max, min over (r, g, b);  d = max - min
L = (max + min) / 2
S = L > 0.5 ? d / (2 - max - min) : d / (max + min)

H depends on which channel is the max - the hue sector:
  max is R:  H = (g - b) / d + (g < b ? 6 : 0)
  max is G:  H = (b - r) / d + 2
  max is B:  H = (r - g) / d + 4
then H = H / 6 × 360

Take the default #3B82F6. As fractions that is r 0.2314, g 0.5098, b 0.9647, so max is blue, min is red and d is 0.7333. L is 0.598, and since that is above 0.5, S is 0.7333 / (2 - 0.9647 - 0.2314) = 0.912. Blue is the max, so H is (0.2314 - 0.5098) / 0.7333 + 4 = 3.620, and 3.620 / 6 × 360 = 217.2°. The tool rounds and shows hsl(217, 91%, 60%). Going the other way, HSL is rebuilt through the standard p/q helper, with each channel sampled a third of the circle apart.

Working with the fields

• Any field drives the rest. Whatever you touch is converted to RGB, and RGB is what regenerates the hex, the HSL row and the swatch.
• Shorthand hex is accepted. #fff expands to #ffffff; anything that is not three or six hex digits shows an error instead of guessing.
• Grey has no hue. When max equals min the formula would divide by zero, so H and S are both forced to 0 - #808080 reports hsl(0, 0%, 50%).

Frequently asked questions