RGB gives you three decimal channels between 0 and 255. Converting to HEX turns each channel into a two-digit hexadecimal number, so the whole color fits into one compact token that every browser, design tool and style guide understands.
How RGB to HEX conversion works
- Take the red channel and divide it by 16: the quotient is the first digit, the remainder the second.
- Write the digits 10 to 15 as the letters A to F, so 255 becomes FF.
- Repeat for green and blue, padding single digits with a leading zero: 5 becomes 05.
- Join the three pairs and put a # in front.
Worked example
Exact, as long as the channels are whole numbers from 0 to 255. Fractional values such as rgb(79.5, 70, 229) are rounded to the nearest integer first, because HEX cannot store anything in between.
RGB and HEX explained
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()
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
RGB to HEX reference table
The most common CSS colors, converted from RGB to HEX.
| Color | RGB | HEX |
|---|---|---|
| black | rgb(0, 0, 0) | #000000 |
| white | rgb(255, 255, 255) | #FFFFFF |
| red | rgb(255, 0, 0) | #FF0000 |
| lime | rgb(0, 255, 0) | #00FF00 |
| blue | rgb(0, 0, 255) | #0000FF |
| yellow | rgb(255, 255, 0) | #FFFF00 |
| orange | rgb(255, 165, 0) | #FFA500 |
| teal | rgb(0, 128, 128) | #008080 |
| purple | rgb(128, 0, 128) | #800080 |
| gray | rgb(128, 128, 128) | #808080 |