HEX vs RGB — differences, a side-by-side table, and when to use each.
HEX and RGB are not different color spaces — they are two ways of writing the same RGB color. #FF5733 and rgb(255, 87, 51) are identical. The choice between them is about notation, alpha handling and readability, not the colors themselves.
A HEX code writes an RGB color in base-16, as #RRGGBB — two hex digits each for red, green and blue (00–FF, i.e. 0–255). It is compact and copy-paste friendly, which is why design tools and CSS use it everywhere. An optional fourth pair (#RRGGBBAA) adds alpha transparency.
The rgb() notation writes the same red, green and blue channels in decimal, as rgb(255, 87, 51). It is easier to read and to manipulate in code, and modern CSS lets you add alpha inline — rgb(255 87 51 / 50%) — making it convenient when opacity is part of the value.
| HEX | RGB | |
|---|---|---|
| Color space | RGB (sRGB) | RGB (sRGB) |
| Notation | Hexadecimal, #RRGGBB | Decimal, rgb(r, g, b) |
| Channel range | 00–FF (0–255) | 0–255 or 0–100% |
| Alpha / opacity | #RRGGBBAA (8 digits) | rgb(r g b / a) or rgba() |
| Readability | Compact | Human-readable channels |
| Easy to edit in code | Less so | Yes (numeric channels) |
| CSS support | Universal | Universal |
Use HEX when you want a short, portable token to copy between design tools and code. It's the default in most pickers and the most common way to write brand colors in a stylesheet.
Use rgb() when you're computing or animating colors in code (decimal channels are easier to math on), or when you want alpha transparency inline. It's also clearer to read when you need to see the individual channel values at a glance.