HEX and RGB carry the same information in different notation. #3B82F6 is rgb(59, 130, 246): each pair of hex digits is one channel (red, green, blue) as a 0-255 value, written in base 16 instead of base 10. Converting between the two is a base conversion and nothing more. They describe exactly the same color.
HSL is a different mental model
RGB describes color as a mix of three light channels. Screens produce color that way, but most people don't think about it that way. HSL (hue, saturation, lightness) is closer to how you'd describe a color out loud. Hue is a position on the color wheel (0-360°), saturation is how vivid or gray it is, and lightness is how close it sits to black or white.
That's why “make it 10% darker” or “same color, less saturated” is an annoying edit in RGB. You have to adjust all three channels in proportion, and it's easy to shift the hue by accident. In HSL it's one value: lower L to darken, lower S to desaturate, and the hue stays where it was.
#3B82F6 → hsl(217, 91%, 60%) // darker, same hue and saturation: hsl(217, 91%, 40%) // less saturated, same hue and lightness: hsl(217, 40%, 60%)
Where each format gets used
- HEX: CSS, design tools, anywhere you copy a color value out of a design file
- RGB: canvas and image manipulation, anywhere you do math on individual channels
- HSL: building a palette or theme, where you want code to generate consistent shades and tints of a base hue
Alpha channel naming is inconsistent
8-digit hex with alpha (#3B82F6CC) puts alpha in the last two digits. rgba() and hsla() put alpha in the last argument, but as a 0-1 float rather than 0-255 or a percentage: rgba(59, 130, 246, 0.8), not rgba(59, 130, 246, 80%). Modern CSS color syntax also accepts a percentage form with a space-separated argument list, so check which syntax your target browsers support before assuming either one works everywhere.