थाषा लीखती है - रंग

Nov 17, 2008 10:18

Let's talk about color. Or colour. Whichever. This came up in my graphic design class at some point, and I thought I'd give an explanation here in case anyone was interested.

Color for the web is hexadecimal. That means it's base 16. Decimal, base 10, is what we are usually used to.

It's all about place. From right to left, the first place in decimal is worth 1, the second 10, the third 100, and so on. Thus, 163 is 100 + 60 + 3. The concept is similar with other bases. For example, binary, or base 2. In computer science, 0 is always the first number, so binary is either 0 or 1.

0001 = 1
0010 = 2
0011 = 3
0100 = 4

Make sense? Pretty much everything computer related eventually breaks down to binary. It's often used for 'yes/no' situations. Within car electronics, for example, a 1 in a certain spot in the code could mean that the headlamps are on, while a 0 would mean they're off. Even letters like you see here, ASCII values, have binary equivalents. For example, A. A is 65 in decimal, or 1000001 in binary.

Hexadecimal is similar, only it's base 16. So each place has 16 options. Of course, we don't have sixteen separate numerals because we're so attached to decimal, so letters are used, 0 through F. If you ever want to play with this, the calculator that comes with Windows can be changed to scientific mode in the View drop-down menu, and there are radio buttons to convert from one base for all three I've mentioned here.

But why use a base 16 system? That seems wacky, right? Well, actually, hexadecimal is used quite frequently in computer science. Which is shorter, 01000001 or 41 (hex equivalent)? It's a good shorthand for binary; I'll hold myself back from explaining why that is. But it's even more cohesive than that. For this exercise, you'll need to take a look at this: http://www.allprofitallfree.com/color-wheel2.html. Nifty, right? Color for the web, since it's generated by light, is in RGB format (print is usually CMYK or propriety systems). RGB = red green blue. You'll see that for each color, the range of numbers goes from 0 to 255-remember, this is actually 256 options, since you have to include 0. 0 is none and 255 is all, so all zeroes is black and all 255 is white.

Notice that 16 x 16 is 256. The 256 doesn't have so much to do with hexadecimal as it does with the original 8-bit color system, but it does make hexadecimal that much more attractive a choice. So we're back to binary.

A bit means you're looking at binary. It's one number, either 0 or 1. Eight of them strung together (a byte) told you information about the color. So can you guess what 11111111 would be? That's right, white (all on). And what does 11111111 equal in decimal? If you guessed 255, you get a cookie. So that's why 0-255 is used for RGB.

Now, remember that hexadecimal is 0-F. What do you think all eight bits on, or 255, is in hexadecimal? FF is correct!

Now, the trick is that hexadecimal color codes are six places long; it's actually made up of three two-digit bytes. (Each then breaks down into 8 bits.) It's also an RGB color representation. Take a look at the color wheel site I linked. You'll see that if you change the RGB values to all 255, the "HTML code" (hexadecimal) turns to FFFFFF (you'll have to click in another box after changing the number). Now change red to 0. You should get 00FFFF for the hex. What does this mean? Well, it means that the first two digits (or byte) are for red, the second for blue, and the third for green! Pretty nifty, huh?

Now, change the hex to 08FFFF. You'll see the RGB values change to 8, 255, 255. (8 in hex equals 8 in decimal.) Now change it to 80FFFF. The RGB changed to 128, 255, 255. That's because 80 in hex is 128 in decimal. So changing the first digit of each set of two has a greater affect than changing the second.

Something to note is that when coding for the web, you don't always necessarily have to put all six digits. #FFFFFF can be abbreviated #FFF. You can even do things like #C5E, which is really just #CC55EE, or this purply one.

And that's pretty much all you need to know. Actually, it's more than you need to know, but now you know the reasons why it is the way it is.

code, being a dork is fun

Previous post Next post
Up