this post is still a draft as I'm working on the examples design and ux

We don't often think (or know) about it, but our everyday use of numbers is only one representation of values amongst many.

If I ask you for 12 dollars, you'll understand what quantity twelve represents and how 1 and 2 work together to represent 12.

This is because we learnt to use the digits 0 to 9 and combine them to form numbers.

We could decide to use only 0 and 1 instead, in which case twelve would be represented by 1100. You've probably heard of this system - it's called binary.

Just like we use different alphabets, words and languages to communicate ideas, there is an infinite amount of digits, systems and ways to represent values.

I just mentioned the decimal and binary systems. You probably heard of hexadecimal, often used for html color codes. You can even build your own.

All those systems work the same way and you can go from one to another. Let's see how all this works!

Here you can have some fun sliding the numbers and see how binary, decimal and hexadecimal relate to each others!

Decimal

Since we are used to count using decimals, let's start with it. This system uses 10 digits, from 0 to 9. We call it its base. So decimal is base-10.

Counting until 9 is pretty straight forward, since it uses one single digit. You probably know how to count beyond 9, and how to write 10, 11, 123, 456, etc. But how does it actually work?

Imagine that we have a 3-digit rolodex, [0][0][0].

Start from the right-most roll and switch the different ones until you reach the number you want to represent.

So to represent 3, you'd turn the right-most roll from 0 to 3, ending with [0][0][3].

To represent 10, you'd turn the right-most roll from 0 to 9. Then as you turn it once more, it would get back to 0, at which point you'd add one turn to the roll on its left, switching it from 0 to 1, ending with [0][1][0] would be shown. Continuing like that allows you to go up to [9][9][9] at which point our rolodex would need additional rolls. You get the point!

Now that we can write numbers, how do we read them?

Looking at 456, someone who doesn't know the decimal system might think that the value represented is 4 + 5 + 6 = 15. How is 1 representing 100? and 2, 20?

If you look at digit positions from right to left, and starting from 0 (like arrays), we can count the value from 456 the following way:

• 6 is in position 0: 6 * 10⁰ = 6
• 5 is in position 1: 5 * 10¹ = 50
• 4 is in position 2: 4 * 10² = 400
  
• 400 + 50 + 6 = 456

Binary

Now that we got the basics for decimals, let's see how we can apply the same things with only two digits, 0 and 1, using the binary system.

Let's try to use our three digits rolodex and try to write five in binary.

We start with [0][0][0] and roll once. We get [0][0][1]. Then we add one and have [0][1][0]. We can see we are moving positions much faster, but it works exactly the same way as decimals.

If we do this 5 times, we'll end up with [1][0][1].

Let's now try to read binary.

We have 101, how do we count this?

• 1 is in position 0: 1 * 2*0 = 1
• 0 is in position 1: 0 * 2¹ = 0
• 1 is in position 2: 1 * 2² = 4
• 1 + 0 + 4 = 5

Counting any base

As we've seen with decimals and binary, we were able to use the same formula to count. We get the sum of each d * b^p with d a digit, b the base and p the digit's position.

Here is a table showing a preview of the value of each position. Multiply it by the actual digit in it.

	3	2	1	0
Binary	8	4	2	1
Decimal	1000	100	10	1
Hexa	4096	256	16	1

Let's use this table to write a few numbers in hexadecimal, since we haven't worked with this system yet!

	3	2	1	0
	4096	256	16	1
fifteen	0	0	0	F
one hundred sixty	0	0	A	0
seven thousand fifty eight	1	B	F	2

An example with web colors

We started with an example showing the relation between binary, decimal and hexadecimal. Let's see another example here, helping you converting colors between hexa and decimal.

Hopefully now you'll understand a bit better how they relate!