HEX, RGB, and HSL are three ways CSS lets you specify the same color. HEX is compact and common in design tools; RGB is closer to how screens actually mix red, green, and blue light; HSL (hue, saturation, lightness) is often more intuitive to adjust by hand, since you can change lightness or saturation without recalculating three separate numbers.
How it works
A 6-digit HEX code is really three 2-digit hex numbers back to back: one each for red, green, and blue, each ranging from 00 to FF (0-255 in decimal). A 3-digit shorthand like #2B6 doubles each digit, so it expands to #22BB66 before conversion.
RGB is simply those same three values written in decimal instead of hex: rgb(43, 110, 74) is the same color as #2B6E4A.
HSL is derived from the RGB values using the standard colorimetric formula: hue is the angle around a color wheel (0-360°), saturation is how vivid vs. gray the color is, and lightness is how close to black or white it is.
A worked example
The HEX color #20524A (this site's accent color) converts to rgb(32, 82, 74) and hsl(170, 44%, 22%), a dark, muted teal-green.
Questions people ask
Why do I sometimes see a 4th value, like RGBA or HSLA?
The "A" stands for alpha: opacity, from 0 (fully transparent) to 1 (fully opaque). This converter handles the three color channels; add an alpha value separately in your CSS if you need transparency, e.g. rgba(32, 82, 74, 0.5).
Which format should I use in my CSS?
All three render identically. It's purely a matter of convenience. HSL is often easiest to hand-tune (e.g. darken a color by lowering the lightness percentage) without reaching for a color picker, which is why many design systems define their palette in HSL even if they also export HEX values.
Why did my 3-digit HEX code expand to 6 digits?
Shorthand HEX (#2B6) is a shortcut where each digit is doubled to form the full value (#22BB66). It can only represent 16 shades per channel instead of 256, which is why it's mainly used for simple, saturated colors.