#58a6ff, rgb(88, 166, 255), hsl(211, 100%, 67%). These are all the same color—the blue we use for links on BuildNextStack. But which format should you use, and when?
HEX (Hexadecimal)
HEX is the most common format. #RRGGBB, where each pair is a hex value from 00 to FF. #58a6ff is 88 red, 166 green, 255 blue.
Pros: Compact, familiar, easy to copy from design tools.
Cons: Hard to adjust lightness or saturation mentally.
RGB and RGBA
rgb(88, 166, 255) is the same as HEX. rgb(red, green, blue) with values 0-255. Add an alpha channel: rgba(88, 166, 255, 0.5) for 50% opacity.
Pros: Explicit, good for programmatic color manipulation.
HSL and HSLA
hsl(211, 100%, 67%) is Hue, Saturation, Lightness. Hue is 0-360 (red is 0, green is 120, blue is 240). Saturation and Lightness are percentages.
Pros: Intuitive! Want a lighter version? Increase lightness. More saturated? Increase saturation. This is how human beings think about color.
I use HSL for any color I might need to adjust dynamically.
When to Use What
Design specs: Keep whatever format the designer used.
CSS variables: HSL works great for theming—you can easily create lighter/darker variants.
Opacity: Use rgba() or hsla() rather than opacity property when you want to affect only the color, not the element.