## CSS: An Overview Forum View Course

• 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 A-F are for and how it is used

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

• and other things

• 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!

##### 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"!

1 vote

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

tony de araujo almost 4 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.

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

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

Roy almost 4 years ago