GEM-SET : Girls' E-Mentoring Program : Science | Engineering | Technology
Home
Welcome
Mentors
Partners
Calendar of Events
Daily Digest
Contacts
SET Links
FAQs
Daily Digest Archive

Daily Digest Archive for January 12, 2004

Q: (Initially posted January 9, 2004) FROM STUDENT MEMBER VEE IN IL
I'm studying graphic design right now, and I want to know how the hexadecimal color system works.I know #ffffff mean white and #000000 means black, but why?
How does it read as a color? How do I calculate my own colors?
Thanks in advance.

January 12, 2004
A: FROM MENTOR ESHE PICKETT IN IL
Well, how it works is, those values that you wrote in hexadecimal (hex)are actually representing a binary number. Using hex notation is an easier way to write binary numbers than using decimal (the regular numbers we use every day) notation when working with graphics.

The reason why (and this is a quick and dirty explaination so I can get to the meat of the issue) is because there are hexidecimal values from 0 to F that can easily be written in binary form. 0 is hexidecimal 0, and binary zero (all zeros as you'd written in your question) f is a series of ones (for a list of conversions between binary, hex and decimal visit: http://h18009.www1.hp.com/fortran/docs/vf-html/pg/pg10hbod.htm). So instead of writing out these loooong series of zeros and ones, most opt for the simpler hexadecimal format to represent their binary numbers.

The reason why this is important is because colors at their base level are represnted using a series of bits, a bit can be either 0 or 1. When we have several color channels (red, green, blue (generally for screen) or yellow cyan magenta and black (generally for printing)) each of those can be represented as a 0 or a 1. 0 means the color channel is turned off, 1 means that we are using the color channel. What this means is we can "turn off" a certain color channel by "setting" its representative bit. Here is an example:

say we want to represent a color consisting of cyan (c) , magenta (m), yellow (y), and black (k)

c m y k (our color channels) --> 1 1 1 1 (binary representing which channels are set)--> # F (the hexadecimal representation of our binary , see why its easier to just write F)

in this example all of our color channels are on. But say we want to turn off black

1 1 1 0 is our binary, in hex is # E

(the pound sign is just to signify that we are writing in hex notation because sometimes hex can also have a number value and could easily be mistaken for a regular number)

This was just a very simple example most of our colors use a lot more than just 4 bits to represent the entire color, in fact, each color itself is actually a series of bits used to represent hue (what shade of the color) saturation (how much of the color), transparency (how see through a color is) and a multitude of other variables that are each represented by a bit so those binaries can get really long, which is why we use hex.

Can you specify your own colors? Most certainly. Most graphical software lets you use a color picker to choose a color and will give you the representative hexidecimal value so that you don't have to know all of the rules governing the way they define their color pallete. There are several nifty utilities on the web that can also do this for you (you can type in a value and get a shade back or pick a shade and get a value back) if you don't have software capable of doing so. A great one: http://www.pixy.cz/apps/barvy/index-en.html hope this helped, I got a little more involved (probably because graphics are fun to me) so I hope it wasn't more than you were asking for.

********************
A: FROM MENTOR SHEILA ENGLAND IN PA
The hexadecimal number system is a representation and not the actual color.
We can use the telphone number as an analogy. We dial numbers that cause an
analog signal (in a given frequency) to travel a particular route through
switching stations to make a connection and two persons speak. The number
represents the destination and the origin of the call. Color also is a
frequency. Computers at the foundation are electrical pulses (on/off
switches).
Here are some sites to peruse. Let me know if you have any more questions.

http://www.cs.jhu.edu/~cohen/RendTech99/Lectures/Light_and_Color.bw.pdf
http://skyserver.fnal.gov/en/proj/advanced/color/whatis.asp
http://www.the-eggman.com/seminars/about_hex.html
http://www.the-eggman.com/seminars/color_codes.html
********************
A: FROM MENTOR JOAN LUSK IN RI
Thank you for asking this question! I'd wondered the same thing, having just started to learn to maintain a web site for my summer music camp. (Department of shameless advertising: if anyone in GEM-SET likes to play classical chamber music, check out http://www.vermontmusicandarts.org/ I picked a few random colors and don't like them so I need to go back and pick better ones...)

Bob Stein's site
http://html-color-codes.com/ there is a chart of hexidecimally encoded colors that he made for web-safe colors. You can switch the display to "decimal RGB encoded" for the same colors, and that way made it easier to see patterns I think. It looks to me as if the first RGB number (0 to 255) indicates how much red is in the mix, the second RGB number how much green, and the third how much blue. I suppose you know how hexidecimal numbers work - base 16 instead of base 10, with ten =a, eleven = b .... fifteen = f, and sixteen, of course, written "10". "FF" would be 15*16 + 15 = 255, so, without checking further, my guess is that the six hexadecimal digits correspond to two for red, two for green and two for blue. Looking a little further, I think that's correct.

The site gives a lot of information about which browsers support which colors. And now I understand a little about why my picking random hexadecimal numbers to see what color would result wasn't a very efficient way to go about it!

http://www.december.com/html/spec/color.html breaks the colors down to a basic 16 and then builds many more, showing hex codes. You may have noticed that there are sometimes options to display 16 colors, or 256, or ... I forget what the upper limit is now. http://hotwired.lycos.com/webmonkey/reference/color_codes/ also gives many colors, laid out so that you can easily see the pattern FF CC 99 66 33 00 for each RGB part. I didn't look to see what you get in between these - there ought to be colors from 0 to 255 (base 10) or 0 to FF (hexadecimal) for each RGB component - but will browsers interpret them as you'd predict? That would be 256^3 different colors. 16,777,216 colors is probably more than our brains can categorize. Imagine writing a clothing catalog and having to name that many colors for your fall sweater collection!

Have fun!

Oh, you ask how a number "reads" as a color. That's technically over my head; maybe the individual RGB numbers are sent to the hardware that causes the pixel to light up. Trying to look that up didn't get me anything but ads for color monitors!
********************
A: FROM MENTOR KAREN PELLETIER IN MA
Hello Vee, Your question intrigued me so I went to the World Wide Web and did a search looking for an answer. I went to a search engine I use often www.google.com and did a goggle search on the expression "hexadecimal color system works." I had Results of about 52,600. Search took 0.22 seconds. I have listed three sites, which should answer your questions regarding the hexadecimal color system. The hexadecimal color system is a way to represent color using a number, where the number is written in base 16. I would imagine this numbering system was created to use colors on a computer. If you use a computer program with graphics such as PowerPoint, the program allows you to create custom colors via a color pallet (see file at the bottom of this page). As you adjust the Hue, Sat, and Lum and the colors Red Green, and Blue you are able to create various custom colors. Notice the adjustments are from 0 to 255. The computer will translate these numbers to a base 16 hexadecimal number. Here are the sites I found for a more in-depth explanation: http://www.jsu.edu/depart/ace/qlinks/html_help/colors.htm which describes Defining Colors Using Hexadecimal, http://www.davesite.com/webstation/html/hexchart.shtml an other example which describes Using Hexadecimal Color Codes, and http://www.liu.edu/cwis/cwp/library/html/before.htm which again gives you information on colors but also links you to http://www.liu.edu/cwis/cwp/library/colors.htm which is a color chart example.

END