The Hexadecimal Number System

2. Hook

You've opened Photoshop, or typed a colour into CSS, or picked a highlight in a text editor's theme. You've seen codes that look like this:

#FF5733 · #1A1A2E · #00BFFF

Six characters. Two letters, four digits — sometimes more letters, sometimes none. No one ever explains what they mean. You copy them, paste them, and move on.

Here's the question: why are colours written like this? Why not as the three numbers a computer actually uses? Why not as the raw bits a computer actually stores? What is the point of this in-between form that no other counting system in your life uses?

By the end of this lesson you'll decode #FF5733 on sight — and understand why every serious computing context (web development, networking, debugging, assembly code) picks hex over the alternatives.

3. Why this matters

Hex shows up wherever bytes need to be read by humans. A short list, all drawn from real engineering:

• Web colours — background: #FF5733; in CSS.
• MAC addresses — 00:1A:2B:3C:4D:5E on the back of every network card.
• Memory addresses — when a program crashes, the debugger prints locations as 0x7FFE43A0.
• Error codes — Windows "blue screen" codes like 0x0000007B, HTTP status 0x190 (= 400).
• Assembly and machine code — instructions are printed in hex because it matches how bytes sit in memory.

Real-world anchor. The dark navy colour behind the lesson panels on this site is #1A1A2E. By the end of this lesson you'll know, without looking anything up, that that means 26 red, 26 green, 46 blue — and you'll see it in the binary exactly the way your GPU does.

4. Prerequisites refresher

This lesson builds directly on Lesson 1 — The Binary Number System. You need to be comfortable with:

• Converting an 8-bit binary number to denary (place values 128, 64, 32, …, 1).
• Converting a denary number 0–255 to 8-bit binary.
• The fact that one byte is 8 bits, covering the range 0 to 255.

If those feel shaky, spend five minutes on Lesson 1 before continuing — the hex method here collapses if the binary underneath is not solid.

30-second recap — a 4-bit group (called a nibble) has place values $8, 4, 2, 1$. It can represent any denary value from 0 to 15. Remember this — it is the whole trick of this lesson.

5. Intuition pass

Three ways to write the same number

Consider the number 243. There are three ways a computer can describe it:

All three are the same quantity. They describe the same pattern of bits in memory. They're written differently because different audiences need different things out of them.

• Denary is short but it hides which bits are on.
• Binary shows every bit but takes eight characters per byte, and your eye gets lost.
• Hex is compact (two characters for a byte, always) and lines up perfectly with the bits underneath. One hex digit covers exactly 4 bits — exactly half a byte — exactly one nibble.

The sixteen hex digits

Base 16 means you need 16 different symbols. You already have 0–9. The standard hex convention extends with the first six letters of the alphabet:

Worth memorising. The leap from 9 to A is the part that trips people up — remember that after 9 we need six more symbols, so we reuse A through F. F = 15 is the biggest single hex digit, the same way 9 is the biggest single denary digit.

Try it on real colours

The tool below is the best way to make hex click. Every web colour is three bytes glued together — one for red, one for green, one for blue. Each byte is written as two hex digits. Drag the sliders, or click a preset.

Try these, in order:

1. Click Red. What are the three hex pairs? What does that tell you?
2. Click White. Now all three are FF. Why does that make sense? (Hint: what is FF in denary?)
3. Drag the R slider to 128. What happens to the hex? Why is it 80, not a rounder-looking number?

6. Formal pass

Definitions

• Hexadecimal (hex) is a base-16 positional number system. Its 16 digits are 0–9 and A–F, with values 0 through 15 respectively.
• A nibble is a group of 4 bits. It can hold any of $2^4 = 16$ values — which is exactly one hex digit's range.
• The prefix 0x (in code) or # (in CSS) signals that what follows is a hex number. 0xFF is hex FF; FF on its own is ambiguous unless context makes it clear.

Positional notation

An $n$-digit hex number $h_{n-1} h_{n-2} \ldots h_1 h_0$ has the denary value:

where each $h_i$ is a value from 0 to 15. The place values, from right to left, are $1, 16, 256, 4096, \ldots$ — powers of 16.

For a 2-digit hex number, the place values are:

So the hex number A7 equals $A \times 16 + 7 \times 1 = 10 \times 16 + 7 = 167$ in denary.

Range

With $n$ hex digits, you have $16^n$ patterns, representing values 0 to $16^n - 1$.

• 1 hex digit → 16 patterns → range 0 to 15.
• 2 hex digits → 256 patterns → range 0 to 255. Same as 8 bits. Same as 1 byte.
• 4 hex digits → 65,536 patterns → range 0 to 65,535. Same as 16 bits. Same as 2 bytes.
• 8 hex digits → 4.29 billion patterns. Same as 32 bits. The size of an IPv4 address.

That correspondence — $n$ hex digits = $4n$ bits — is the reason hex exists.

Why hex, specifically?

You could imagine a base-8 (octal) system, or base-4, or base-32. Why did base-16 win?

Two reasons. First: bytes are 8 bits, and 8 splits neatly into two groups of 4 — so two hex digits is exactly one byte. No wasted space, no awkward overflow. Second: four bits fits one "familiar-sized" digit — you can glance at a byte and read off its two halves instantly once you know the 16 symbols. Octal (base 8) would take three digits per byte and feel cramped; base-32 would need too many unfamiliar symbols.

Hex hit the sweet spot for the hardware word sizes that won out in the 1970s, and everything since has followed.

7. Application pass

The 4-bit grouping method

The reason hex is easy to work with is that you never need to convert through denary. Binary and hex translate directly, nibble by nibble.

• Binary → hex: split the binary into 4-bit groups from the right. Convert each group to one hex digit using the table from Section 5.
• Hex → binary: write each hex digit as its 4-bit binary equivalent, concatenated.

That's the whole method. Watch it happen live — click any bit below and see the hex update:

Try making these binaries and reading off the hex:

1. 11111111 → what hex? (Should be a familiar value.)
2. 00001111 → what hex? Why does the left nibble being all 0s give a leading 0 in hex?
3. 10101010 → what hex? Toggle a single bit and see how much the hex changes.

Worked example: hex → denary

Convert A7 to denary using positional notation.

The only trick is remembering that A = 10. Everything else is arithmetic.

Worked example: denary → hex

Convert 200 to hex.

1. How many 16s fit into 200? $16 \times 12 = 192$ fits, but $16 \times 13 = 208$ is too big. So the left (16s) digit is 12.
2. 12 in hex is C.
3. Remainder: $200 - 192 = 8$. So the right (1s) digit is 8.
4. Answer: C8. Verify: $C \times 16 + 8 = 192 + 8 = 200$. ✓

A third method exists — go via binary. Convert 200 to 8-bit binary (11001000), split into nibbles (1100 1000), convert each to hex (C and 8). Same answer, C8. Use whichever feels faster; both are correct.

Back to the anchor

The dark navy panel colour from Section 3 was #1A1A2E. Now you can decode it without tools:

• 1A = $1 \times 16 + 10 = 26$ red
• 1A = 26 green
• 2E = $2 \times 16 + 14 = 46$ blue

So #1A1A2E is rgb(26, 26, 46) — low on everything, slightly more blue than the other two, which is why it reads as a cool dark navy rather than neutral grey.

8. Summary

Six things worth remembering in six months:

1. Hex is base 16. Digits are 0–9 and A–F, where A=10, B=11, C=12, D=13, E=14, F=15.
2. 2 hex digits = 1 byte = 8 bits. This is the single reason hex exists.
3. Binary ↔ hex is direct. Each 4-bit nibble maps to exactly one hex digit. Never route through denary unless it helps you.
4. Hex → denary: multiply each digit by its place value (16s, 1s) and add.
5. Denary → hex: find how many 16s fit in, convert to a hex digit; the remainder is the second digit.
6. Hex shows up wherever humans read bytes: web colours, MAC addresses, memory addresses, error codes.

9. Quiz

Seven questions, mixed types. Expect about 10 minutes.

10. Further practice

Work through these problems — solutions in practice-solutions.md.

1. Convert 3F to denary.

2. Convert BE to denary.

3. Convert 100 (denary) to hex.

4. Convert 254 (denary) to hex.

5. Convert binary 11100110 to hex.

6. Convert hex D2 to binary.

7. The hex colour #1E90FF ('Dodger Blue') has three channel values. Convert each pair to denary and state which channel dominates.

8. Explain in two sentences why one hex digit corresponds to exactly one nibble (4 bits), and why this makes hex–binary conversion faster than denary–binary conversion.

Extension (A* territory): A MAC address is 48 bits long. How many hex digits does that take? How many possible MAC addresses exist? (Your phone's MAC is one of them.)

11. Further reading

Pedagogy and framings adopted here:

• Better Explained — "Another Look at Hexadecimal." Kalid Azad's argument for hex as "the right size for humans reading bytes" directly informed the three-way comparison in Section 5.
• Bartosz Ciechanowski — Colour Spaces. The best interactive explainer ever written about how RGB actually works, if you want to go deeper than what this lesson covers.
• CSS Tricks — CSS Color Values. Practical reference for all the ways colour is written on the web; the inspiration for choosing hex colour as the real-world anchor.

Syllabus and exam resources:

• Cambridge IGCSE Computer Science (0478) Syllabus 2026–2028, Section 1.1. Names hex explicitly; requires conversion both to and from binary and denary.
• Watson & Williams, Cambridge IGCSE Computer Science Coursebook (2nd ed.), Chapter 1. Standard treatment; uses the same 4-bit grouping method.

Version 1 — published 2026-04-24.