Hex vs RGB vs HSL: which should you use?
Three notations, the same colors underneath. Here's when each one actually makes your work easier.
Open the palette generator →They're the same color, three ways
Hex (#3b82f6) packs red, green and blue into six hexadecimal digits, two per channel, 0–255 each. RGB (rgb(59 130 246)) writes those same three channel values in plain decimal. HSL (hsl(217 91% 60%)) describes the same color by hue — a 0–360° position on the color wheel — saturation and lightness instead of raw channel mixes. Converted correctly, all three point at the identical pixel; they're just different ways of writing it down.
When hex wins
Hex is the most compact and the most universally pasted-around format — design tools, brand guidelines and most component libraries default to it. It's the right choice when copying a color between tools or documenting a fixed brand palette, since there's no ambiguity about channel order the way there sometimes is with shorthand RGB.
When RGB(A) wins
RGB's real advantage is the alpha channel: rgba(59, 130, 246, 0.4), or the modern rgb(59 130 246 / 40%), lets you specify transparency inline, which hex can only do with an extra two-digit suffix that's far less readable. RGB is also the natural format if you're doing math on raw channel values in code — image processing, canvas pixel manipulation, and similar tasks.
When HSL wins
HSL is what you want when adjusting a color rather than picking a new one — need it 15% darker for a hover state, or the same hue but less saturated for a disabled state? With HSL that's just changing the lightness or saturation number directly, instead of recalculating three separate RGB channels by hand. That's exactly why GenHub's palette tool generates harmonies — complementary, analogous, triadic — by rotating hue in HSL space internally, even though it displays the result as hex.
Converting between them
You don't need to do this by hand — GenHub's palette tool shows hex, RGB and HSL for every swatch simultaneously and lets you copy any of the three with one click, so you can grab whichever format the project in front of you actually needs without a separate converter.
FAQ
Is one format more 'accurate' than the others?
No — hex, RGB and HSL are lossless conversions of the same color; none loses precision versus the others at standard 8-bit-per-channel color.
Can CSS mix formats in the same stylesheet?
Yes, freely — a browser resolves hex, rgb() and hsl() to the same underlying color regardless of which you use, so there's no compatibility issue mixing them.
Why do some hex codes have 8 digits instead of 6?
The extra two digits are an alpha (opacity) channel, for example #3b82f666 for roughly 40% opacity — supported in all current browsers, just less common than plain 6-digit hex.
Which format should I use for a design system?
Hex for documented brand tokens — it's what most tools expect when pasted — and HSL if your system needs programmatic light/dark or state variants derived from a base color.
Does the browser render one format faster than another?
No meaningful difference — the browser parses whichever format you write and resolves it to the same internal color representation before painting a single pixel.