Open any stylesheet or design file and you will see colours written like #3DDC84. That string is the most common way to specify a colour on screen, and once you see what the six characters mean it stops being a magic code and becomes simply three numbers. This article unpacks exactly how RGB and hex describe a colour — and why they are really the same thing in two costumes.
To convert in either direction as you read, use the RGB → HEX and HEX → RGB converters.
How a screen makes colour
Every pixel on your display is three microscopic lights — one red, one green, one blue. By varying how brightly each one shines and letting your eye blend them, the pixel can show essentially any colour. This is additive colour: you start from black (all lights off) and add light. Red + green = yellow, all three at full = white, all three off = black. RGB is just a way of writing down how bright each of those three lights should be.
The three numbers: 0 to 255
Each channel’s brightness is a number from 0 (off) to 255 (full). Why 255? Because each value is stored in 8 bits, and 8 bits hold 256 possibilities (0–255). Three channels of 256 levels give 256 × 256 × 256 ≈ 16.7 million colours.
| Colour | RGB |
|---|---|
| Black | rgb(0, 0, 0) |
| White | rgb(255, 255, 255) |
| Pure red | rgb(255, 0, 0) |
| Yellow | rgb(255, 255, 0) |
| Mid grey | rgb(128, 128, 128) |
Notice that when all three channels are equal you always get a shade of grey — colour comes from the channels being different.
From RGB to hex: base-16
A hex code is those same three numbers written in hexadecimal (base-16) instead of decimal. Hex uses sixteen digits — 0–9 then A–F for 10–15 — and the reason it is used for colour is neat: a value 0–255 fits in exactly two hex digits (00 to FF). So three channels become six characters:
Take #3DDC84:
| Pair | Hex | Decimal | Channel |
|---|---|---|---|
| RR | 3D | 61 | Red |
| GG | DC | 220 | Green |
| BB | 84 | 132 | Blue |
So #3DDC84 is identical to rgb(61, 220, 132) — a vivid green. Converting a pair is just “first digit × 16 + second digit”: 3D = 3×16 + 13 = 61. (If the base-16 idea is new, the same maths underlies every number base.)
The 3-digit shorthand
CSS allows a 3-digit form like #F0A. It expands by doubling each digit: #F0A → #FF00AA. It only works when each channel is a repeated digit, so #FFF = white and #000 = black, but a colour like #3DDC84 has no valid shorthand. It is purely a convenience for round values.
Adding transparency: #RRGGBBAA
Modern CSS extends hex with a fourth pair for alpha (opacity): #RRGGBBAA, where 00 is fully transparent and FF fully opaque. So #3DDC8480 is that green at about 50% opacity (80 = 128 of 255). The 4-digit shorthand #RGBA works the same way as the 3-digit one. Alpha is the same concept that lets images have transparent backgrounds.
In practice
RGB and hex are the right tool whenever you need to specify or store an exact colour: a brand colour, a CSS variable, a value pasted between tools. What they are not good at is adjusting a colour by feel — making it lighter or less saturated means changing all three numbers in non-obvious ways. For that, designers switch to HSL or HSV, and for gradients and accessibility to the perceptual models. Move between all of them with the colour converters, and see the whole landscape in Color Spaces Explained.
Frequently asked questions
What does a hex color code mean?
A hex code like #3DDC84 is the red, green and blue values of a colour written in base-16. It splits into three pairs — 3D, DC, 84 — which are 61, 220 and 132 in decimal: the amount of red, green and blue light from 0 to 255. So #3DDC84 is rgb(61, 220, 132).
Why do RGB values go from 0 to 255?
Each channel is stored in 8 bits, and 8 bits can represent 256 distinct values: 0 through 255. Three 8-bit channels give 256 × 256 × 256 ≈ 16.7 million colours, more than the eye can distinguish in one image.
What is the difference between #FFF and #FFFFFF?
They are the same colour. The 3-digit shorthand expands each digit by doubling it, so #F0A becomes #FF00AA. It only works when each channel pair is a repeated digit; otherwise you must write the full six digits.
What does the extra pair in #RRGGBBAA do?
It is the alpha channel — opacity — from 00 (fully transparent) to FF (fully opaque). #3DDC8480 is the same green at 50% opacity. The 8-digit hex form is supported in modern CSS.
How do I convert a hex code to RGB by hand?
Split it into three pairs and convert each from base-16 to a normal number: for each pair, multiply the first digit by 16 and add the second (where A–F are 10–15). For #3DDC84, "3D" = 3×16 + 13 = 61, "DC" = 220, "84" = 132, giving rgb(61, 220, 132). A converter tool does this instantly in both directions.
Why does my colour look slightly different on another screen?
The same RGB values can render differently because screens vary in calibration, brightness and colour gamut. An uncalibrated phone, laptop and TV will each show #3DDC84 a little differently. For colour-critical work, designers calibrate their monitors and may use a wider colour space, but for everyday web use the small differences rarely matter.
Is RGB the same as the colours used in printing?
No. Screens use RGB — adding red, green and blue light. Printers use CMYK — layering cyan, magenta, yellow and black ink, which absorbs light instead of emitting it. Some bright RGB colours simply cannot be reproduced in CMYK ink, which is why a vivid on-screen colour can look duller when printed.