Decimal, binary and hexadecimal system, its conversion and how it relates to UI Design.

The 8-point grid

We know 8 takes a lot of important parts in the tech world. Bits and Bytes (8 Bites are 1 Byte), Binary System and Hexadecimal System. So most screen resolutions are divisible by 8.

Decimal system

We usually write numbers in the decimal system (10 digits 0–9)
The following applies: each digit is a multiple of powers of 10
e.g. 180
‍
1 * 10² + 8 * 10¹+ 0 * 10⁰ = 1 * 100 + 8 * 10 + 0 * 1

Binary system

In the binary system this is actually the same, only here there are only 2 digits (0 and 1) The following applies here: the individual digits are multiples of powers of 2
‍
2⁷ 2⁶ 2⁵ 2⁴ 2³ 2² 2¹ 2⁰
128 64 32 16 8 4 2 1
‍
With decimal 180 this results in:
10110100
(128+32+16+4)

Convert decimal to binary

Example 180 is divided by 2 until the result is 0, the remainder (can only be 0 or 1) results in the binary digits right to left.
‍
180/2 = 90 remainder 0
90/2 = 45 remainder 0
45/2 = 22 remainder 1
22/2 = 11 remainder 0
11/2 = 5 remainder 1
5/2 = 2 remainder 1
2/2 = 1 remainder 0
1/2 = 0 remainder 1
‍
Binary: 10110100

Convert decimal to hexacecimal

Programmers often use hex digits as they are shorter than binary digits

The conversion from decimal to hexadecimal (16 digits 0–9 and A-F) goes analog: It is always divided by 16 until the result is 0 the remainder then results in the Hex digits from right to left

180/16 = 11 remainder 4 (hex number 4) 11/16 = 0 remainder 11 (hex number B)
Hexadecimal: B4