HEX, RGB and HSL Explained

HEX, RGB and HSL are not three different kinds of color, they are three different ways of writing down the same underlying color space. Any color expressible in one is exactly expressible in either of the others; converting between them is pure arithmetic with no loss of information, not a translation between genuinely different systems.

RGB describes a color as three numbers from 0 to 255 for red, green and blue. HEX writes those same three numbers in base 16 instead of base 10, packed together with a leading #, so #5B8DEF and rgb(91, 141, 239) are the literal same color, just formatted differently. Neither format is more precise than the other since they describe identical values.

HSL stands for hue, saturation and lightness, and describes color the way a person tends to think about it rather than as raw red, green and blue amounts. Hue is the base color itself around a wheel from 0 to 360 degrees, saturation is how vivid or muted it is, and lightness is how close to black or white it is. This is why nudging a color's lightness up or down is trivial in HSL (change one number) but not obvious at all in RGB (all three numbers usually need to change together).

HEX is the most common format in CSS and design tools simply by convention. RGB is useful when a color needs to be manipulated numerically, for example blending two colors together. HSL is usually the easiest to reason about by hand, since generating a set of related shades is as simple as keeping hue and saturation fixed and stepping lightness up or down.

Color Converter takes a color in HEX or RGB and shows it in all three formats at once with a live preview. Try converting a brand color and then adjusting only the lightness value in the HSL result to see how much easier it is to generate a lighter or darker variant that way than by guessing new RGB numbers directly.