How to Read HEX Color Codes: Picture a Color from #RRGGBB

Strings like #FF8800 or #A08CC8 show up everywhere in web design and app development. They are called HEX color codes, and they describe a color as three amounts of light: red, green and blue. Once you know the rules, you can look at a code and get a good idea of the color without opening a color picker.

This guide walks through how to read them, step by step.

1. #RRGGBB is three pairs: red, green, blue

After the #, split the six characters into pairs:

First pair (RR): the amount of red
Second pair (GG): the amount of green
Third pair (BB): the amount of blue

Screens create color by adding light together (additive mixing). All three at maximum gives white; all three at zero gives black.

2. Each pair runs from 00 to FF

Each pair is a hexadecimal number. After 0-9 come A (10), B (11), C (12), D (13), E (14), F (15). To convert a pair to decimal, multiply the first digit by 16 and add the second.

00 = 0 (no light)
80 = 8 × 16 + 0 = 128 (about half)
FF = 15 × 16 + 15 = 255 (maximum)

You don't need exact math. Just reading the first digit of each pair as low (0-3), medium (4-B) or high (C-F) already tells you a lot.

3. The basic colors to remember

Color	Code	How to read it
	`#FF0000`	Only red at max → red
	`#00FF00`	Only green at max → green
	`#0000FF`	Only blue at max → blue
	`#FFFF00`	Red + green → yellow
	`#00FFFF`	Green + blue → cyan
	`#FF00FF`	Red + blue → magenta
	`#FFFFFF`	All at max → white
	`#808080`	All equal, medium → gray
	`#000000`	All zero → black

The key idea: when all three pairs are equal, the result is a neutral gray. #333333 is a dark gray and #CCCCCC is a light gray.

4. Picture any color in three steps

Step 1: The largest pair gives the color family

Red highest means reds, oranges or pinks; green highest means greens; blue highest means blues or purples. If two pairs are similarly high, the color sits between them: red and green lean yellow, green and blue lean cyan, red and blue lean magenta.

Step 2: The gap between highest and lowest gives saturation

A big gap means a vivid color; a small gap means a muted color close to gray. #FF3300 is vivid, while #997766 is soft and subdued.

Step 3: The overall size gives brightness

If all pairs are high, the color is light (toward pastel). If all are low, it is dark.

After that, it's practice. Color Master (free on iOS) lets you practice color codes and telling colors apart, over and over, as a game.

5. Try it yourself

Color	Code	How to read it
	`#E8A33D`	Red highest (232), green medium (163), blue low (61) → between red and yellow: an amber orange. Big gap, so it's vivid.
	`#2E5E8A`	Blue highest (138), everything fairly low → a calm, darker blue.
	`#A08CC8`	Blue highest (200), red fairly high (160), all bright → leaning toward purple: a soft lavender. This is this site's accent color.

6. Handy variations

3-digit shorthand: in CSS, #F80 means each digit doubled, the same as #FF8800.
8-digit codes: CSS also accepts #RRGGBBAA, where the last pair is opacity (alpha). #00000080 is roughly half-transparent black.
Case doesn't matter: #ff8800 and #FF8800 are the same color.

7. Numbers and perception don't line up exactly

Half the number does not necessarily look half as bright. On typical screens (sRGB), the relationship between the value and perceived brightness is not linear. Green also tends to look brighter than blue at the same value.

That's why the fastest way to improve is to guess the color from the code, then compare it with the real color, and repeat until your eye and the numbers agree.

Summary

#RRGGBB lists the amounts of red, green and blue, two characters each
00 is the minimum and FF the maximum; the first digit alone is a good estimate
Largest pair = color family, gap = saturation, overall size = brightness
Three equal pairs make a gray

How to Read HEX Color Codes
Picture a Color from #RRGGBB