All About That “Base” — or, how to understand Binary & Hexadecimal
Thanks to Melinda for the title inspiration!
If you’ve ever worked in computer science before, you’ve at least heard of binary, and have probably seen a hexcode somewhere for color values.
Students/junior devs especially may have never had to learn the magic behind these two numerical systems.
However, the basics behind these two systems aren’t too difficult to understand, and help you figure out how we use numbers normally as well.
Similarly to those learning their second language, it might seem completely alien at first. But as you delve deeper, not only do you begin to understand more about a new language, but about how language works in general.
Freakin’ Numbers, How Do They Work?
Before we delve into binary & hex, let’s start by taking a numerical look under the hood. Here is the number one hundred and seventy five.
175
We all know what this is. But on a microscopic level, what does this string of 3 numbers mean? How could we break this down? Well, to start, let’s talk about bases.
You may have heard the term “base-10” before. Basically, if English is the language you’re using to read this, then base-10 is the language you’re using to read numbers. On a basic level (heh), these means each digit in a number has 10 potential values- 0, 1, 2, 3, 4, 5, 6, 7, 8, and 9. Once we’ve exhausted those numbers, we move onto the next place, resetting back to 0. Keep this in the back of your mind — we’ll come back to this when we talk about binary & hex.
Going back to 175, let’s break it down into its three places: 1, 7, and 5. Elementary school math taught us that in 175,the 7 is in the “tens” place, and 1 is in the “hundreds” place.
In other words, 175 is the equivalent to 100 + 70 + 5.
This may seem really obvious to us, but we’re going to break this down a little bit more, so it’s important to mention.
In reality, each place represents a power of 10. By that, we mean exponents! Most often we use exponents to square a number (i.e. 6² is equal to 6 * 6, or 36). That being said — a number is just the result of exponents, multiplication, and addition. Let’s talk about that.
When we think about something like the “tens” place — like the 7 in 175 — this is a representation of the number 7, multiplied by a power of 10. In this case, 5 is equivalent to 5 * 1 (or 10⁰), 70 is 7 * 10 (or 10¹), and 100 is 1 * 100(or 10²).
This is a very weird concept to grasp your head around, but once you’ve figured it out, you will understand the basis of numbers. Here’s a quick graphic I created to attempt to bridge the gap.
This can be applied to every place in a number, no matter how far we go. If we wrote 17,592.235, we could think of it as every single digit multiplied to the appropriate power of 10, then all added up together.
Applying This to Binary — aka, base-2
Everything so far may seem a little weird, but at the end of the day, makes sense. Like, of course 20 + 5 is 25. But what about when we start working outside of what we know? What if we worked with a different language of numbers, like binary?
Recall the nerdy t-shirt I saw in high school from the top of this page. ‘There are 10 types of people in the world. Those who can understand binary, and those who can’t.” From this, you might be able to figure out that 10 in binary is equivalent to 2 in “normal numbers” (base-10).
Let’s jump right into the wolf’s den with a crazy string of numbers. 11010110. This is a number in binary, equivalent to 214.
Whoa. What?
Binary is a funky way of saying base-2. Let’s go back to what we mentioned before — in base-10, 175 is just 100 (1*10²)+ 70 (7*10¹)+ 5 (5*10⁰). Whatever our base is — that is how many numbers we have to work with in each place. That is what we are raising to a power, to figure out what the full number is.
In binary, each place can only contain a 0 or a 1 — two numbers. And each place, starting with the ones place, is just that number multiplied by a power of 2. For example — 1101 can be broken down to:
1101
(1*2³) + (1*2²) + (0*2¹) + (1*2⁰)
(1*8) + (1*4) + (0*2) + (1*1)
8 + 4 + 0 + 1= 13
1101 = 13
Yeah, it’s still a little weird to read. Read it over a few times. Hopefully it makes sense. But don’t feel weird if it doesn’t. There is a lot going on here.
Let’s go back to our disgusting number from earlier, and try to break it down.
Finally, Hex(adecimal) —aka, base-16
Reducing the amount of numbers we have available is easy, but what about if we had more than 10 numbers? Welcome to the funky world of hexadecimal. Recall in base-10, we use 0–9 (10 numbers) to represent a singular place. In hex, we use those ten numbers (0–9), plus an additional 6 represented by letters — a, b, c, d, e, and f. a = 10, b = 11, c = 12, d = 13, e = 14, f = 15. Now we have sixteen numbers: 0–15.
Knowing that, let’s tackle a hex number. How about b4? Remember that every place is going to be represented by a power of 16, not 10 or 2. Let’s break it down!
b4
(b * 16¹) + (4 * 16⁰)
(11 * 16¹) + (4 * 16⁰)
(11 * 16) + (4 * 1)
176 + 4 = 180
b4 = 180
Before writing this article, I did not know that. Heh. Get it?
Here’s one more chart for a slightly larger number — let’s say, uh… f4c?
So… why is this important? & A quick recap
Why is this important?
- Binary is commonly used nowadays for “flags” & “bitwise operations” — since 0 or 1 is a boolean value, many conditional statements can be written based on a binary number!
- Hexadecimal is commonly used in color creation — colors will often be written as RGB (red green blue) values, a series of three numbers between 0 and 255, each number representing how much of the corresponding basic color is in the final color. However, instead of writing a color as (255, 0, 255), we can write each value as a 6 number hex value, with each two places representing each separate basic color. I.e. 255, 0, 255 is instead written as #ff00ff.
A quick recap…
- When we’re working with a “base”, that represents what each place in a number is multiplied by. The addition of all the places is what our final number is.
- Each place is multiplied by a power of the base number, with the “ones place” being multiplied by the base to the power of 0. (Remember that any number to the power of 0 is 1!) Each higher place raises that power by 1, and each lower place lowers that power by 1.
Yeah. I know this is difficult stuff to parse. But hopefully some of it made sense to you, and you can navigate more advanced code a bit easier because of it!
