HEX, RGB and HSL: web color codes explained
The same color on the web can be written three ways — #3b6ef6, rgb(59,110,246), or hsl(220,91%,60%). They describe the identical pixel; they just think about color differently. Here's what each means and when to use it.
RGB — mixing light
Screens make color by mixing Red, Green, and Blue light. RGB gives each channel a value from 0 to 255. rgb(255,0,0) is full red; rgb(0,0,0) is black (no light); rgb(255,255,255) is white (all light). It maps directly to how a display works, which is why it's the foundation underneath the others.
HEX — the same thing, compact
A HEX code is just RGB written in base-16. #3b6ef6 breaks into three pairs: 3b (red), 6e (green), f6 (blue) — each pair a 0–255 value in hexadecimal. It's the most common form in CSS and design tools because it's short and copy-pastes cleanly. A fourth pair (#3b6ef6cc) adds transparency.
HSL — the human-friendly one
HSL describes color the way people actually think:
- Hue (0–360°) — which color, around a wheel: 0 red, 120 green, 240 blue.
- Saturation (0–100%) — how vivid vs. gray.
- Lightness (0–100%) — how dark vs. light.
This makes HSL brilliant for adjusting color. Want a darker version of a button? Lower the lightness and keep hue and saturation. Want a matching palette? Rotate the hue. Doing that in HEX or RGB means guesswork.
Which to use
- Copying a brand color or pasting into CSS? → HEX.
- Need transparency, or coming from a design tool? → RGB / RGBA.
- Building a palette or tweaking shades? → HSL.
Since they're interchangeable, the practical move is to convert between them freely: pick a color however you like, then export whichever format your code needs.