Binary and hexadecimal

Why this matters

Computers store everything, from numbers and text to images and programs, as patterns of bits: 0s and 1s. You will meet binary and its compact cousin hexadecimal in colour codes (#FF8800), memory addresses, network masks (255.255.255.0), file permissions, error codes and debugging tools. Being able to convert between bases makes those numbers readable instead of mysterious.

Place value, revisited

Our everyday decimal system is base 10: each place is worth 10 times the place to its right.

347 = 3 × 100 + 4 × 10 + 7 × 1

Any whole number can be written in another base by changing what each place is worth.

Binary: base 2

Binary uses only the digits 0 and 1, and each place is worth twice the one to its right:

1011₂ = 8 + 0 + 2 + 1 = 11 in decimal.

A single binary digit is a bit. Eight bits make a byte, which can hold 2⁸ = 256 different values, from 0 (00000000) to 255 (11111111).

Binary to decimal: the doubling method

Read the bits left to right. Start at 0; for each bit, double the running total and add the bit.

For 1011: 0 → 0×2+1 = 1 → 1×2+0 = 2 → 2×2+1 = 5 → 5×2+1 = 11.

This method needs no table of powers and is exactly how a computer program does it.

Decimal to binary: repeated division

Divide by 2 and record the remainders; read them bottom to top.

Convert 13:

• 13 ÷ 2 = 6 remainder 1
• 6 ÷ 2 = 3 remainder 0
• 3 ÷ 2 = 1 remainder 1
• 1 ÷ 2 = 0 remainder 1

Reading upward: 13 = 1101₂. Check: 8 + 4 + 0 + 1 = 13.

Hexadecimal: base 16

Long binary strings are hard to read, so programmers group bits into fours. Four bits have 16 possible values, which is base 16, or hex. Hex needs 16 digits, so after 0 to 9 it uses letters: A = 10, B = 11, C = 12, D = 13, E = 14, F = 15.

Binary to hex: split into groups of four from the right and convert each group. 1101 0110₂ = D6₁₆.

Hex to decimal: use place values of 16. 2F₁₆ = 2 × 16 + 15 = 47.

Worked example: a web colour

The colour #FF8800 is three bytes: red FF, green 88, blue 00.

• FF = 15 × 16 + 15 = 255 (full red)
• 88 = 8 × 16 + 8 = 136 (about half green)
• 00 = 0 (no blue)

That is a bright orange, rgb(255, 136, 0).

In code

Languages write other bases with prefixes: 0b for binary and 0x for hex.

console.log(0b1011);                 // 11
console.log(0xff);                   // 255
console.log((13).toString(2));       // "1101"
console.log((214).toString(16));     // "d6"
console.log(parseInt("2F", 16));     // 47

Python has the same ideas: bin(13), hex(214) and int("2F", 16).

Common mistakes

• Reading remainders top to bottom. In repeated division, the last remainder is the most significant bit.
• Thinking 10 in binary means ten. 10₂ is two. Write the base as a subscript or prefix when it might be unclear.
• Grouping hex digits from the left. Group bits in fours from the right, padding with zeros on the left.
• Mixing up bits and bytes. 8 bits = 1 byte.

Quick recap

• Binary is base 2: places are worth 1, 2, 4, 8, 16, ...
• Binary to decimal: double and add, left to right. Decimal to binary: divide by 2, read remainders upward.
• Hex is base 16, digits 0 to F; one hex digit = four bits, one byte = two hex digits.

Try it

In the Do tab, finish a binary-to-decimal converter using the doubling method. A decimal-to-hex helper is already written so you can chain them.