HEX and RGB are the same information, just formatted differently. #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. There's no conversion “logic” here beyond a base conversion; they're interchangeable representations of the exact same color.
HSL is a different mental model, not just a different format
RGB describes color as a mix of three light channels — which is how a screen actually produces color, but not how people usually think about it. HSL (hue, saturation, lightness) matches intuition better: hue is a position on the color wheel (0-360°), saturation is how vivid vs. gray, lightness is how close to black or white.
This is why “make it 10% darker” or “same color, less saturated” is a genuinely annoying edit in RGB — you have to adjust all three channels proportionally and it's easy to shift the hue by accident. In HSL, it's a one-value change: lower the L for darker, lower the S for less saturated, hue stays untouched.
#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 actually gets used
- HEX — CSS, design tools, anywhere you're copy-pasting a color value from a design file
- RGB — canvas/image manipulation, anywhere you're doing math on individual channels
- HSL — building a color palette or theme, where you want to generate consistent shades/tints of a base hue programmatically
Alpha channel naming is inconsistent
8-digit hex with alpha (#3B82F6CC) puts alpha as the last two digits. rgba() and hsla() put alpha as the last function argument, but as a 0-1 float, not 0-255 or a percentage — rgba(59, 130, 246, 0.8), not rgba(59, 130, 246, 80%) (though modern CSS color syntax does now also accept a percentage form with a space-separated argument list — worth checking which syntax your target browser support actually requires before assuming either one works everywhere).