Color Converter

Colors on screens are commonly expressed in a few interchangeable notations. HEX represents a color as three pairs of hexadecimal digits for the red, green, and blue channels, packed into a compact string like #3366ff (or the shorthand 3-digit form, #36f). HEX can optionally add a fourth pair for alpha (#RRGGBBAA), though this converter works with the plain 6-digit RGB form rather than that extended variant. RGB expresses the same channels as three decimal numbers from 0-255. HSL instead describes a color by hue, its position on a color wheel from 0-360 degrees, saturation, how vivid it is, and lightness, how close to black or white it is — a model that often maps more intuitively to how people think about adjusting a color, like 'a bit lighter' or 'more saturated.'

Since all three formats describe the same underlying color space, converting between them is a matter of straightforward math rather than any loss of information, aside from minor rounding. This is useful when a design tool or comfortable working model uses HSL but the codebase or CSS needs HEX, or when copying a color value from one system's inspector to paste into another that expects a different format.

Keep in mind that these three formats only describe standard RGB color — none of them capture wider color spaces like Display P3 that modern displays and CSS can use, so converting a color to HSL and back to HEX will reproduce the same sRGB value, not add any additional precision or gamut.