HEX, RGB, and HSL explained: What each color format actually encodes

They all describe the same underlying color

For ordinary CSS colors, HEX and RGB are two notations for sRGB channel values. HSL is another coordinate system over that color space. Conversion is mathematical, but rounded HSL percentages may not reproduce the original integer RGB triplet exactly, and colors outside sRGB require additional context.

What the HEX digits actually mean

A 6-digit HEX code like #2563eb is three 2-digit hexadecimal (base-16) numbers back to back: 25 for red, 63 for green, eb for blue. Each pair ranges from 00 (none) to ff (full intensity, 255 in decimal); 25 in hex equals 37 in decimal, 63 equals 99, and eb equals 235, which is exactly the RGB value for the same color. An optional 4th pair (an 8-digit HEX code) adds an alpha channel for transparency, using the same 00–ff scale.

Why HSL is often easier to hand-edit

Say you want a lighter version of a blue. In RGB, "lighter" means increasing all three channels together while keeping their ratio roughly constant; not something you can do by eye without recalculating three numbers. In HSL, lightness is its own independent axis: keep the hue and saturation exactly the same and just raise the lightness percentage, and you get a lighter version of the identical color with zero risk of accidentally shifting the hue. That's why HSL shows up often in design tools and CSS custom-property systems built around programmatically generating color shades and tints from one base hue.

What the alpha channel actually controls

Alpha controls transparency, not brightness; a color at 50% alpha isn't a darker version of the color, it's the same color shown at half opacity, letting whatever is behind it show through. That's why a semi-transparent white can still look "light" even at a low alpha value against a dark background, while the exact same color at the exact same alpha looks different against a light background; the alpha value alone doesn't determine the final on-screen result, what's behind it does too.

Conversion details

Is 3-digit HEX (like #fff) really the same as 6-digit? Yes; each digit is simply duplicated: #fff expands to #ffffff, #2a5 expands to #22aa55. It's shorthand, not a different color space.

Within standard sRGB notation, RGB and HSL cover the same gamut. The number of distinct stored values depends on precision; HSL itself is not inherently limited to 24-bit color.

Whole-number HSL values discard precision. Converting back can shift an RGB channel by one or more units, depending on rounding and implementation.

HEX, RGB, and HSL are three windows onto the same color, not three competing standards; which one to use comes down to which axis you need to control (exact bytes, or intuitive hue/lightness), not which one is more "correct."