This forum is now read-only. Please use our new forums at discuss.codecademy.com.

## CSS: An Overview Forum

# What is Hexadecimal?

**What i do know about Hexadecimal:**

- It is AKA RGB (RedGreenBlue)
- The first two digits (--)---- is the amount of red you want
- The second two digits --(--)-- is the amount of green you want
- The third two digits ----(--) is the amount of blue you want

**What i do not know about Hexadecimal:**

what A-F are for and how it is used

how you would make yellow with R, G, and B

and other things

What i do not know about Hexadecimal:

- what A-F are for and how it is used
- how you would make yellow with R, G, and B
- and other things

This is going to be a nutshell version so buckle up...

If you have had a look at the color article **@tony de araujo** posted, the phrase `8-bit`

will surely have come up. Here's what that refers to:

```
decimal binary hexadecimal
1 0001 01
+ 2 0010 02
+ 4 0100 04
+ 8 1000 08
__________________________
= 15 1111 0F
```

If we add 1 to this we get 0001 0000.

Notice the focus is on groups of 4 'bits'. The math in this frame of reference is very simple. The numbers above are called *low order bits*. They are the lowest in literal value. Move this quartet up to the *higher order* position where 16 is the smallest value, and the whole thing is multiplied by 16 in value:

```
1111 times 0001 0000 = 1111 0000
15 x 16 = 240
```

Add 15 to that and we get 255, or 1111 1111. Notice how many bits? 8.

8 bits is the range of each color palette in legacy terms, which we still use today.

The hexadecimal symbols for 10, 11, 12, 13, 14 and 15:

```
decimal binary hexadecimal
10 1010 0A
11 1011 0B
12 1100 0C
13 1101 0D
14 1110 0E
15 1111 0F
```

When we multiply these by 16 we get,

```
decimal binary hexadecimal
160 1010 0000 A0
176 1011 0000 B0
192 1100 0000 C0
208 1101 0000 D0
224 1110 0000 E0
240 1111 0000 F0
```

Now let's look at the color palettes. We have three, red, green and blue. This traces way back to the advent of color television where there were three color drivers, one to drive each 1/3 of the picture elements which we call pixels today. A third of all screen pixels were red at full intensity, a third were green at full intensity and the remainder were blue at full intensity. All pixels were black at zero intensity.

If we start with the color palettes all at full intensity, we get white. The colors add up to white to our eye. We see white. Maximum intensity. When we begin to subtract palettes from this we get,

```
RGB - B => RG which is yellow ==> #FFFF00
RGB - G => RB which is magenta ==> #FF00FF
RGB - R => GB which is cyan => #00FFFF
```

Notice that each color palette is represented by a `hex pair`

which has a range of 00 to FF.

Last we'll cover converting a decimal value 0 to 255 into a hex pair. Let N = the decimal number. We'll assume the number is 16 or greater.

- Divide N by 16. The quotient will be the value of the high order bits.
- Convert quotient to hex (see chart). append with a
`0`

. This will give`10`

to`F0`

- Convert the remainder to hex, prepend with a
`0`

. This will give`00`

to`0F`

- Add the two to get a hex pair.
`F0`

+`0F`

=`FF`

And we're done. That's the basics in a nutshell. Happy coding!

Addendum:

Here's a joke that's been floating around for half a century at least:

```
There are 10 kinds of people who understand binary arithmetic,
those who do, and those who don't.
```

Then there's the classic,

```
Halloween and Christmas on the same day?
DEC 25 = OCT 31
```

Computers struggle to do decimal, so why shouldn't we struggle to do binary or hex? Why should we? is more like it. We don't have to. There are basic things that we can learn that will help us forever overcome these struggles.

The above 4-bit approach is very suitable as a math model for working with base 16 numbers in relation to base 10, base 2, or by themselves. After a while it becomes second nature. The trick is to relate HEX to BINARY, not decimal. We can do binary in our sleep after a very short while. From there it's no leap to hex. Just look at a 4-bit number and you'll know its hex.

If looking isn't quite enough, then remember this:

```
1 + 2 + 4 + 8 = 15 = 1111 = F
```

It's in the table above in comparison terms. Each bit to the left is double the value. 1, 10, 100, 1000. And we have all the bits we need to fill out one order of magnitude of base 16.

If you are a math nut, then you'll be up on logaritms and the role they play in simplifying base conversion:

```
log2(N) = log10(N) / log10(2)
```

Get the bits and the hexadecimal just flows out from there. You probably won't cover this in any of your courses, but it behooves me to express the above in JavaScript:

```
function getBaseLog(x,y){
return Math.log(y) / Math.log(x);
}
```

Now we run this code so it's in memory. It's flawed at this point, but it does give us a pretty good representation of the binary conversion:

```
Math.pow(2,getBaseLog(2,255)).toString(2)
'11111110.111111111111111111111111111111111111111111111'
```

Pretty good is what I mean. We've got a small issue to deal with here thanks to floating point arithmetic. Since this is primitive analysis I don't feel bad. How can we fix this?

Simple. Use built in functions:

```
Math.pow(2,getBaseLog(2,255)).toString(2)
// boils down to
(255).toString(2)
// '11111111'
```

Simple as pie. Let's throw some out there, like 117 and 239:

```
(117).toString(2)
// '1110101' => 0 + 64 + 32 + 16 + 0 + 4 + 0 + 1
// 7 5
(239).toString(2)
// '11101111' => 128 + 64 + 32 + 0 + 8 + 4 + 2 + 1
// E F
```

##### 1 Comment

I came back to read your joke :) then if the other party didn't get it we could try again like this: "There are 10 kinds of people in the world: those who understand binary, and 9 others." Back in my teens (3-lifetimes ago for most students here) I was in awe with the binary system. That's when we used to hard wire logic gates as school assignments. Good old days where everything was still a mystery.

Here's a great detailed explanation with lots to read:

```
http://en.wikipedia.org/wiki/Web_colors
```

##### 3 Comments

Great read, @tony!

Thanks Roy. Thanks for adding more ingredients to the recipe ( cooking is becoming my new hobby) :)

Oh wow, hexadecimals actually make sense now. Thanks!

I found a great explaination of hexadecimal on khanacademy!

https://www.khanacademy.org/math/pre-algebra/applying-math-reasoning-topic/alternate-number-bases/v/hexadecimal-number-system

## 1 Comment

ArtemisForever over 3 years ago

A nutshell? Unless you're talking about coconuts, I wouldn't really describe that as "in a nutshell"!