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

CSS: An Overview Forum

View Course

207 points
530674ba8c1ccc5c30000820_785830332
Submitted by
Madsen
about 3 years ago

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


2 votes

permalink

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.

  1. Divide N by 16. The quotient will be the value of the high order bits.
  2. Convert quotient to hex (see chart). append with a 0. This will give 10 to F0
  3. Convert the remainder to hex, prepend with a 0. This will give 00 to 0F
  4. Add the two to get a hex pair. F0 + 0F = FF

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

8084 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
about 3 years ago

1 Comment

54733a0a9c4e9d907d0093aa_299182120 ArtemisForever almost 3 years ago

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


1 vote

permalink

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

8084 points
5958b8ebe12813a2a3000034_980106998
Submitted by
Roy
about 3 years ago

1 Comment

5533b41186f55278520000c6_295543857 tony de araujo about 3 years ago

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.


0 votes

permalink

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

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

2946 points
5533b41186f55278520000c6_295543857
Submitted by
tony de araujo
about 3 years ago

3 Comments

5958b8ebe12813a2a3000034_980106998 Roy about 3 years ago

Great read, @tony!

5533b41186f55278520000c6_295543857 tony de araujo about 3 years ago

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

54733a0a9c4e9d907d0093aa_299182120 ArtemisForever almost 3 years ago

Oh wow, hexadecimals actually make sense now. Thanks!


0 votes

permalink

207 points
530674ba8c1ccc5c30000820_785830332
Submitted by
Madsen
over 2 years ago