Hex, RGB, and HSL: How Color Codes Actually Work
Every color on a screen is ultimately just numbers, but which numbers you see — #3B82F6, rgb(59,130,246), or hsl(217,91%,60%) — depends on which of three common systems is being used, and each one exists because it's better suited to a different kind of task.
Hex codes: compact and copy-paste friendly
A hex color code packs red, green, and blue values into a single six-digit string, where each pair of digits (00 to FF) represents one channel's intensity on a base-16 scale. #FF0000 is pure red, #000000 is black, and #FFFFFF is white. Hex is the default in CSS stylesheets and design tools mainly because it's short and unambiguous to paste around.
RGB: the same values, easier to read
RGB expresses the same three channels as plain base-10 numbers from 0 to 255, written as rgb(59, 130, 246). It's functionally identical to hex — a hex code and its RGB equivalent describe the exact same color — but RGB is easier for a human to reason about incrementally, since bumping a value from 130 to 150 is more intuitive than editing hex digits.
HSL: color the way people actually think about it
HSL stands for hue, saturation, and lightness, and it's built around how people naturally describe color rather than how a screen renders it. Hue is the base color on a 360° wheel (0 is red, 120 is green, 240 is blue), saturation is how vivid versus gray it is, and lightness is how close to black or white it is. This makes HSL far easier for building color variations — darkening a color is just lowering the lightness value, no channel math required.
Quick comparison
| Format | Best for | Example |
|---|---|---|
| Hex | CSS, design handoffs, short copy-paste | #3B82F6 |
| RGB | Programmatic color manipulation, transparency (RGBA) | rgb(59,130,246) |
| HSL | Building tints, shades, and palettes by feel | hsl(217,91%,60%) |
A common point of confusion
All three formats can describe the exact same color — converting between them doesn't change what's displayed, only how the value is written. Designers often switch to HSL specifically when generating a palette (say, five lightness steps of one hue), then convert the final values back to hex for production CSS.
Frequently asked questions
No — hex, RGB, and HSL are just different ways of writing the same underlying color value, so converting between them doesn't lose or change any color information.
A fourth value (as in RGBA) adds an alpha channel controlling transparency, from 0 (fully transparent) to 1 (fully opaque) — the RGB values themselves work the same way.