Hex Color Codes Explained: How to Read #FF5733
A hex color code is six hexadecimal digits that spell out exactly how much red, green, and blue light to mix on screen. #FF5733 means FF of red (255), 57 of green (87), and 33 of blue (51) — a full-red, one-third-green, one-fifth-blue blend, which is why it renders as a warm coral-orange.
How the six digits map to red, green, and blue
Every color on a screen is built by mixing three light channels: red, green, and blue (RGB). A hex code is nothing more than three two-digit numbers written back to back — one pair per channel — prefixed with a #.
Hexadecimal is base-16 counting. Where decimal runs 0–9, hexadecimal runs 0–9 and then A–F, so one hex digit stores sixteen values and two hex digits store 16 × 16 = 256 values — exactly the 0–255 range of a single RGB channel. That is why hex codes contain letters: A means 10, C means 12, and F means 15.
For #FF5733, the three pairs decode like this:
| Pair | Hex math | Decimal | Role in #FF5733 |
|---|---|---|---|
| FF | 15 × 16 + 15 | 255 | Red — maxed out |
| 57 | 5 × 16 + 7 | 87 | Green — about a third (34%) |
| 33 | 3 × 16 + 3 | 51 | Blue — about a fifth (20%) |
The conversion formula is always the same: first digit × 16, plus the second digit. FF is the largest possible pair — 15 × 16 + 15 = 255 — which is why FF appears in so many vivid colors: it means that channel is fully on.
The relative sizes of the three numbers tell you what the color looks like. In #FF5733, red dominates completely, green adds a warm push toward orange, and the low blue keeps the result bright rather than muddy. Bump green up to FF for #FFFF33 and you slide from orange into yellow; drop red to 33 for #3357FF and you land in a deep blue, because blue is now the strongest channel.
Two useful reference points fall out of this system. With 256 values per channel and three channels, screens can display 256 × 256 × 256 = 16,777,216 colors. And whenever all three pairs are equal — #000000, #808080, #FFFFFF — the color is a pure neutral: black, mid-gray, or white. Equal pairs are the fastest way to spot a gray hiding in a stylesheet.
Step-by-step: read any hex code in 30 seconds
Step 1 — Strip the # and split into three pairs. #FF5733 becomes FF | 57 | 33. The order is always red, green, blue — RGB.
Step 2 — Convert each pair to decimal. Multiply the first digit by 16 and add the second. Remember the letter values: A = 10, B = 11, C = 12, D = 13, E = 14, F = 15. For 57 that is 5 × 16 + 7 = 87.
Step 3 — Judge the mix by the sizes. The biggest number dominates the color; roughly equal numbers pull toward gray. 255 / 87 / 51 clearly leans red-orange, and you can predict the hue before ever rendering it.
Step 4 — Check whether the pairs are close to each other. #336699 decodes to 51 / 102 / 153: three different values, rising from red to blue, so it is a muted steel blue. If all three pairs were identical, you would be looking at a gray.
Step 5 — Reverse-engineer colors you like. When you find a color in a screenshot or a poster, use an eyedropper tool to grab its hex value, then decode the pairs to understand why it works — is it red-dominant? Low blue? Nearly neutral? This turns color inspiration into a repeatable formula instead of guesswork.
After decoding five or ten real codes by hand, the mapping becomes automatic: you will glance at #228B22 and see "green doubled up" (34 / 139 / 34, forest green) without doing the math.
What do 3-digit shorthand codes like #F53 mean?
Shorthand codes are an abbreviation allowed only when both digits of each pair are identical: each digit simply doubles. #F53 expands to #FF5533 — F doubles to FF, 5 doubles to 55, 3 doubles to 33. #FFF is white, #000 is black. The reverse does not hold: #FF5733 cannot be shortened, because neither pair is a doubled digit (57 is not 55).
What about 8-digit codes like #FF573380?
The extra pair at the end is the alpha channel — opacity. #FF573380 is coral-orange at hex 80 = 128 out of 255, roughly 50% transparent; #FF5733FF is fully opaque and visually identical to #FF5733. Modern CSS supports 8-digit hex everywhere, but some older design tools and image formats still expect only 6 digits, so check before pasting.
Why does my hex color look different when printed?
Screens emit light (additive RGB), while printers lay down ink on paper (subtractive CMYK), and the two systems cover different ranges of color. Very bright, saturated screen colors — neon greens, electric blues — simply have no ink equivalent, so the printer approximates and the result looks duller. For brand work, never specify a color by hex alone: pair the hex value with a matching Pantone or CMYK value so print and screen stay consistent.
The takeaway
Hex codes look cryptic until you realize they are just three numbers in a trench coat: split the six digits into pairs, multiply the first digit by 16, and the mystery color turns into plain RGB arithmetic you can do in your head. Next time a stylesheet shows #FF5733, decode it — full red, a third green, a fifth blue, coral-orange. When you want the conversion done instantly, or need to flip a hex value into RGB or HSL for CSS tweaks, the free color converter handles any format you paste in.