toolery

Color converter

Convert a color between HEX, RGB, and HSL formats simultaneously, with a live swatch showing the actual color.

CSS rgb()
—
CSS hsl()
—

How it works

HEX and RGB are the same thing written differently. Both give the intensity of a red, a green, and a blue light from 0 to 255 — HEX just packs each of those bytes into two base-16 digits, so #336699 is literally 51, 102, 153. That is why the shorthand #369 works by doubling each digit rather than padding with zeros. HSL rearranges the same colour into three things a person can actually reason about: hue as an angle around the colour wheel, saturation as how far it is from grey, and lightness as how far it is from black or white. The practical difference shows up when you want a darker version of a colour. In RGB you have to scale three numbers and hope the hue survives; in HSL you drop the lightness and nothing else moves. Hue comes from whichever channel is largest, and saturation and lightness both fall out of the gap between the largest and smallest — which is why a grey, whose channels are all equal, has no meaningful hue at all.

Used this in a paper or lesson?