HEX, RGB or HSL: Which Color Format to Use
Every color on the web can be written three common ways, and they all mean exactly the same thing to the browser. #8b5cf6, rgb(139, 92, 246) and hsl(262, 83%, 66%) paint an identical pixel. The difference is not what they render — it is what they let you think about.
HEX is for storing and pasting
A hex triplet is just three bytes written in base 16: two digits of red, two of green, two of blue. It is compact, it copies cleanly, it survives being pasted into a Slack message or a spreadsheet without ambiguity, and it is what almost every design tool hands you. That is its entire job. What it is not is legible — nothing about #8b5cf6 tells you it is a mid-light violet, and nothing about it tells you how to make it slightly darker.
RGB is for math and transparency
The same three channels, written in decimal. Reach for RGB when a number needs arithmetic done to it — blending two colors, computing a luminance, feeding a canvas — and when you need an alpha channel, since rgb(139 92 246 / 40%) is the most widely understood way to write a translucent color. Beyond that, RGB has the same readability problem as hex: the three numbers are physical (how much of each phosphor) rather than perceptual (how it looks).
HSL is for editing
HSL splits a color into the three questions a designer actually asks: which hue, how saturated, how light. That makes it the only one of the three you can adjust with intent. Want the same color, one step darker for a hover state? Drop the lightness. Want a muted version for a disabled control? Drop the saturation. Want the complement? Add 180 to the hue. Try doing any of those to a hex string in your head.
This is also why a palette built by rotating the hue while holding saturation and lightness constant looks like a family, and one built by nudging hex digits looks like an accident. The palette generator works entirely in HSL for exactly this reason.
So which do you ship?
A reasonable default: think in HSL, store in hex, and use RGB when you need alpha or arithmetic. In a modern CSS file, custom properties make this easy — define your tokens once in whichever form is clearest to edit, and let everything else reference the token rather than repeating a literal.
A note on the newer formats
CSS also supports lab(), lch() and oklch(), which are perceptually uniform in a way HSL is not: in HSL, two colors with the same lightness value can look obviously different in brightness, because HSL's "lightness" is a geometric convenience rather than a measurement of perceived light. If you are building a system where "same lightness" must actually mean "same apparent lightness", OKLCH is worth the learning curve. For everyday work, HSL remains the fastest thing to reason about, and it is supported everywhere.
Whichever you prefer, the color converter will turn any of them into the others, live, and give you a link to the exact color you landed on.
