How Hex Color Codes Work (and How to Read Them at a Glance)

A hex color code like #1B31E7 looks arbitrary until you learn the pattern. Then it becomes readable at a glance: you can tell not just what color it is, but whether it is light or dark, saturated or gray, warm or cool — all without opening a color picker.

Hex codes are the native color format of the web, and understanding them saves a surprising amount of time, whether you are editing a stylesheet, tweaking a design token, or picking colors from a screenshot.

The structure: six digits, three pairs

A hex code is the hash symbol followed by six characters. Each character is a digit in base 16 — 0 through 9, then A through F, where A is 10 and F is 15. That gives each position 16 possible values.

The six digits are really three pairs, and each pair encodes one color channel:

• The first pair is red.
• The second pair is green.
• The third pair is blue.

Each pair is a hexadecimal number from 00 to FF, which maps to a decimal value from 0 to 255 — exactly the range used by RGB. So #1B31E7 is red 1B (27), green 31 (49), blue E7 (231): a strong blue. Hex and RGB are the same information in two notations, which is why the two formats always agree. Our color format reference covers how they relate to each other and to HSL and LAB.

Reading a hex code at a glance

You do not need to convert the numbers to get useful information. A few patterns reveal a lot:

• High digits mean bright. Because the scale runs from 0 to F, digits from 8 to F in a channel push that channel to the strong end. #FFFFFF is white (all channels maxed); #000000 is black (all channels zero).
• Equal-ish pairs mean gray or near-gray. When the three pairs are close in value — #888888, #3A3A3A — the result is a neutral, because no single channel dominates.
• One dominant pair means a tinted neutral. #F5F0E6 has red and green higher than blue, so it reads as a warm off-white. #E6F0F5 leans cool.
• Roughly balanced but low means dark. #1A1A2E is a very dark navy: all channels are low, but blue is highest.

With practice you can estimate lightness and hue from the digits themselves, which is handy when scanning a palette looking for an outlier.

Shorthand: three digits instead of six

CSS allows a three-digit shorthand when each of the three pairs has two identical digits. #FFFFFF collapses to #FFF, #AABBCC to #ABC, and #1B31E7 stays six digits because its pairs differ.

The rule is simple: if every pair is a doubled digit, the browser expands it by repeating each digit. #F0A becomes #FF00AA. The shorthand is convenient for pure and symmetric colors, but most real brand colors need the full six digits.

Alpha: the fourth pair

Modern CSS adds an optional fourth pair for transparency, written as #RRGGBBAA — or #RGBA in shorthand. The alpha pair uses the same 00–FF scale, where 00 is fully transparent and FF is fully opaque.

So #1B31E780 is the same blue at roughly 50% opacity. This is the hex equivalent of the rgba() function, and it is increasingly common in design-token systems because it keeps everything in one notation. If you use alpha in hex, note that the first two characters of the last pair handle the coarse transparency and the last two add precision — a subtlety that catches people out.

Where hex codes cause trouble

• Case does not matter. #1b31e7 and #1B31E7 are identical. Some teams standardize on lowercase or uppercase for tidiness, but the browser treats them the same.
• Missing the hash. In CSS the # is required. In some design tools the hash is optional or added automatically, which is why copied values sometimes look different between apps.
• Confusing hex with the sRGB gamut. A hex code names a color inside the standard sRGB space. Wide-gamut displays can show colors outside it, which is why color(display-p3 ...) exists. A hex value is unambiguous within sRGB, but it cannot express every color a modern screen can show.
• Eyeballing contrast. Two hex codes that look different are not guaranteed to have different readability. Contrast is a computed relationship, not a visual guess — use the numbers, following our WCAG contrast guide.

Hex versus RGB versus HSL

All three describe the same colors, and good tools let you switch between them. The choice is about convenience:

• Hex is compact and standard on the web; it is the format you will copy most often.
• RGB spells out the channels as decimal numbers and pairs naturally with rgba() for opacity.
• HSL is the easiest to adjust by hand, because hue, saturation, and lightness are separate — see our HSL explainer for how those three dimensions behave.

Frequently asked questions

How many colors can a hex code represent?

Sixteen million, seven hundred seventy-seven thousand, two hundred and sixteen — 256 possible values for each of the three channels (256 × 256 × 256). With the alpha channel added, far more.

What is the difference between #FFF and #FFFFFF?

None. #FFF is shorthand that the browser expands to #FFFFFF. They are exactly the same white.

Can a hex code have more than six digits?

With alpha it can have eight digits (or four in shorthand). Beyond that, hex is not used — wide-gamut color needs a different notation such as color() with a named color space.

Why do my hex codes look different in different programs?

Usually because one program is showing the value in a different color model or applying a color profile. The code itself is exact; the interpretation can vary. Keeping everything in sRGB avoids most surprises.

Put the format to work

Understanding hex makes your color work faster and more precise. Grab a hex value from our palette generator, extract the exact codes from any image with the image color picker, and step through the format hands-on in the playground when you want to see how changing one pair shifts the whole color.