1.4 : HTML Colors : Next Section

1.3 : Base-16

Hexadecimal and Base 10

Now we can move onto base-16, which is more commonly called hexadecimal. Converting from is the same process. The biggest difference in hexadecimal is how we represent the digits. We know that in a number base B, each digit is a value between 0 and B-1. In base-10 we use digits 0-9. In binary we use 0 and 1. In hexadecimal, B-1=15. This proposes a new issue. The numbers 10-15 are two digits. We can't use two digits as one digit. To address this, we use letters as digits. A represents 10, B represents 11, etc. The table below has the digits and their corresponding values.


Decimal	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
Hexadecimal	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

Now that we know how to represent a hexademical number, it's much easier to see how to get the base-10 magnitude of a hexadecimal number. Let's consider the hexadecimal number 3F4


Digit	3	F	4
Power	16²	16¹	16⁰
Value	(3 * 16²)	(15 * 16¹)	(4 * 16⁰)
	768	240	4

The computation is performed exactly the same as before. The Value is equal to the Digit multiplied by the Power meaning that 3F4 is equal to (3 * 16²) + (15 * 16¹) + (4 * 16⁰). We multiply 15 by 16¹ because 15 corresponds to F on the table. When we add all the values, we find that 768 + 240 + 4 = 1022 showing that 3F4₁₆ = 1022₁₀. As you can see, only 3 digits in hexadecimal gave us a value that would need 4 digits in base-10.

Hexadecimal and Binary

We've been covering how to convert numbers in any base to base-10. What if we want to convert a hexadecimal number to binary or vice-versa? Would we have to convert the number to base-10 and then convert the resulting base-10 number? For many number bases, perhaps, but we have a bit of an advantage with hexadecimal and binary.

Let's think about the numbers we're dealing with here. We have 2, 10, and 16. Let's play that one game from Sesame Street, one of these things is not like the others, one of these things is not the same. Which number is the odd one out? Believe it or not, it's 10. 16 is a power of 2; 2⁴ = 16. We can also write this as 2⁴ = 16¹. You may ask, why is this relevant? Well if we look at how we build number bases, each digit is an increasing power. Since 16¹ = 2⁴, we can say that one hexadecimal digit is equivalent to four binary bits. Look at the following table to see which bits correlate to which hexadecimal digits. Spoiler Alert: The binary numbers are equal to 0-15.


Binary	0000	0001	0010	0011	0100	0101	0110	0111	1000	1001	1010	1011	1100	1101	1110	1111
Hexadecimal	0	1	2	3	4	5	6	7	8	9	A	B	C	D	E	F

So how can we use this knowledge in practice? Let's say we have the number 1111000011110000. That's a rather large number that not even I want to do the math for. The conversion is a lot easier than you'd expect.


	`1111000011110000₂`
	`1111₂ 0000₂ 1111₂ 0000₂`	Break into groups of four
	`F₁₆ 0₁₆ F₁₆ 0₁₆`	Covert groups of four to base-16
	`F0F0₁₆`

There! Easy as can be! Instead of trying to convert a massive 16 bit number, we just split it into multiple 4 bit numbers, convert them individually, then put it back together.

We can apply this to base-4 too. See how 2² = 4¹ meaning that two binary digits is equal to one base-4 digit. This can be further expanded one when we realize that 2⁴ = 4² = 16¹. We already saw that four binary digits are equivalent to one hexadecimal digit. Now we also see that four binary digits are equivalent to two base-4 digits. Taking it another step further, we can see that two base-4 digits are equivalent to one hexadecimal digit. In all these bases, we can use the same split-convert-reconstruct method to convert quickly between bases.

This also works for numbers that aren't powers of two. The same process can be done on base-3 and base-9 (3² = 9¹). It would also work for base-7 and base-49 (7² = 49¹) (base-49 would require uppercase and lowercase letters to be used as digits).

Color Codes

A very common use of hexadecimal numbers is to represent colors. There are many different ways to define color. The way you'll see the most in this class is through RGB values. RGB values are primarily represented in base-10 and hexadecimal.


	rgb(255,255,255)
	#FFFFFF

In RGB, there are the three base colors: red, green, and blue. We mix different amounts of these primary colors to make all the other colors. To define an amount of a color, we use a value in [0₁₀, 255₁₀]. 255₁₀ may seem like a wierd number to use as the cap, but it's not random because [0₁₀, 255₁₀] = [0₁₆, FF₁₆].

Below is a simple chart showing how the colors mix. Obviously there are many more than these 7 colors. Take note how the secondary colors are Cyan, Magenta and Yellow: the colors your printer uses.

rgbcircles

Since there are 256 values for each of the three colors (including 0), we can make 256*256*256 different colors. That's 16,777,216 different colors! Obviously there are so many colors to make and I don't have room to display each of the over 16 million colors. I went through and did the basic ROY G BIV rainbow below. The next section has a list of all the colors with names recognized by web browsers.

RGB	Hexadecimal	Name
0,0,0	#000000	Black
255,0,0	#FF0000	Red
255,165,0	#FFA500	Orange
255,255,0	#FFFF00	Yellow
0,128,0	#008000	Green
0,0,255	#0000FF	Blue
75,0,130	#4B0082	Indigo
238,130,238	#EE82EE	Violet
255,255,255	#FFFFFF	White

Just for fun, I added an RGB Color changer. Just enter different values into the boxes to change the color. Try and see if you can match the colors from this website.



Red	Green	Blue
255	255	255

Practice

	Hexadecimal to Decimal
	How would the hexadecimal value be represented in base-10?

	Hexadecimal to Binary
	How would the hexadecimal value be represented in binary?

	Hexadecimal to Base-4
	How would the hexadecimal value be represented in base-4?

	Binary to Hexadecimal
	How would the binary value be represented in hex?

Back To Top