A HEX code packs three 8-bit numbers into six hexadecimal digits. Converting HEX to RGB means splitting those digits into pairs and reading each pair as a decimal number between 0 and 255, exactly the values CSS, Figma and image editors expect.
How HEX to RGB conversion works
- Drop the leading # and, if the code has only three digits, double each one: #f53 becomes #ff5533.
- Split the six digits into three pairs: RR, GG and BB.
- Read each pair as a base-16 number and convert it to base 10: FF becomes 255, 57 becomes 87, 33 becomes 51.
- Write the three results as rgb(R, G, B).
Worked example
This conversion is exact. HEX and RGB describe the same sRGB values in a different notation, so nothing is rounded or lost in either direction.
HEX and RGB explained
What is HEX?
A HEX code is a six-digit hexadecimal number that stores the red, green and blue channel of a color behind a leading #. Each pair of digits covers one channel, from 00 (none) to FF (full), which gives the same 16.7 million colors as RGB in a much shorter notation. HEX is the default in CSS, design tools and brand guidelines.
- Syntax:
- #RRGGBB
- Range:
- 00–FF per channel
- Best for:
- CSS, design handoff, brand guidelines
What is RGB?
RGB describes a color as three channels of light (red, green and blue), each from 0 to 255. It mirrors how screens actually work: all three at 255 give white, all at 0 give black. RGB is the right choice whenever you need to calculate with a color, and rgba() adds transparency on top.
- Syntax:
- rgb(R, G, B)
- Range:
- 0–255 per channel
- Best for:
- code, canvas, transparency with rgba()
HEX to RGB reference table
The most common CSS colors, converted from HEX to RGB.
| Color | HEX | RGB |
|---|---|---|
| black | #000000 | rgb(0, 0, 0) |
| white | #FFFFFF | rgb(255, 255, 255) |
| red | #FF0000 | rgb(255, 0, 0) |
| lime | #00FF00 | rgb(0, 255, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| orange | #FFA500 | rgb(255, 165, 0) |
| teal | #008080 | rgb(0, 128, 128) |
| purple | #800080 | rgb(128, 0, 128) |
| gray | #808080 | rgb(128, 128, 128) |