|
||||||||||||||||||
GrafX-Design.com | ||||||||||||||||||
| ||||||||||||||||||
|
|
| Earn money with your website |
 |
| This web site is earning money... isn't yours? Read our article on Making Money on the Web with Google AdSense or click the image below to get started earning money with your web site. |
| Better Web Browsing! |
If you need:
|
Web Hosting |
| Over time GrafX-Design.com has had to relocate itself a number of times due to growth, etc. Eventually we came across pair Networks. Pair Networks was recommended to us many years ago and now we'd like to recommend them to you. If you need reliable web hosting, then you need Pair! |
|
|
Xara 3D |
| Create amazing, high-quality 3D graphics easily! Read our review of Xara 3D 6 or click the graphic below to download a free trial version. |
 |
Virtual Training Company |
|
Video-based learning at its best Over 45,000 online tutorials, over 300 topics on CD. View free demos online... |
|
|
Adobe Software |
ACDSYS Software |
Coffee Cup Software |
|
If you need to create or maintain a Web site, then you need... Free Trial Download! |
Free Google Software |
SAC Digital |
| Visit SAC Digital for all of your printing needs... 100% Satisfaction Guaranteed! |
|
Your Ad Here! |
| Enlighten 3.5 million annual visitors as to why they NEED your product or service. Find out more here. |
| Free Breast Cancer Handbook |
 |
General Graphics Tutorials -- Color part V | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
This is kind of an ambitious undertaking for me. Normally I try to keep the size of tutorials down to a few pages at most (this one was over 20 pages in Word!). Unfortunately, color is a difficult and rather lengthy topic even where web graphics are concerned. I hope you won't find this tutorial too long-winded and that you'll find it a welcome reference.
--tmc
Hexadecimal Notation One last tough bit on color before we move on. No not hexadismal-- hexadecimal. Hexadecimal is a method of counting that is commonly used with computers. Hex stands for six and decimal, of course, stands for 10. Together 6+10=16, right? Why 16? Well 16 is a convenient number to use with binary, the basic counting system of computers and with bytes, another basic system used for counting with computers. You may, or may not, know that 8 bits make a byte. You may, or may not, also know that when counting in computer numbers like hexadecimal, bytes are usually grouped together in twos. If you've ever seen computer numbers like FF or 1A you've seen hexadecimal numbers. These numbers represent values between 0 (or 00 in hexadecimal) and 255 (or FF in hexadecimal). Before we get into hexadecimal maybe I should explain why you might need to know about this weird way of counting. Although most imaging software will allow you to use decimal numbers, HTML insists on using hexadecimal when describing colors. So, although it's not necessary to use hexadecimal when creating your web images, a little knowledge about this counting system will help when you create your web pages. Counting in Hexadecimal As I said before computers start counting at 0. If we were to start counting at 0 we'd go 0, 1, 2, 3... 9. When we hit 9 we add a 1 to the left and start over again at 0 giving us 10, 11, 12... You know the rest from there. But counting with hexadecimal is not the way we're used to counting. With hexadecimal we start at 0 and go 0, 1, 2, 3... 9. But what do we do when we get to 9? We can't just add a 1 to the left and keep going as we normally would; instead, we'll have to use letters to represent the numbers. So after 9, we continue with A, B, C, D, E, and F. If A stands for 10 and B stands for 11, then it stands to reason that F represents 15. Counting the 0 that we started with we've now used up 16 numbers just as we did when counting with decimals and hit the 9. So we add 1 to the left and continue on 10, 11, 12, 13... 1F, 20... etc... (see the following table).
If you're still confused take a look at the table above. In the table I counted to 32 in decimal and 20 in hexadecimal (which is the same as 32 decimal). Notice how we change from 9 to 10 in decimal notation by adding 1 to the left and going back to zero. This is the same in hexadecimal only it's done at 0F instead of 9. At 0F we add 1 to the left and place a zero in the right column. Eventually we hit two digit hexadecimal numbers (the 10 hex) that resemble decimal numbers. Interesting. The 10 is not equal to ten, though. Just as we have tens when counting in decimal and use the left most of the two digits as a multiplier, the same is done when counting with hexadecimal. The difference, though, is that we multiply the leftmost digit by 16 instead of 10. This makes sense since we are, after all, using the hexadecimal (or 16) base system. Converting Hexadecimal to Decimal So 20 hexadecimal is equal to 32 decimal, right? Two times 16 + 0 equals 32. So the number FF would be equal to 15 (F) times 16 (hexadecimal) plus 15 which is 255 in decimal. If you think you recognize this number, you're right. When we discussed 8-bit color before we said that the highest values for R, G and B would be 255. Remembering that we started at 0 and, therefore, have to add the zero as one of the values, we see that there are 256 possibilities. i.e. from 0 to 255, or 00 (you always use two digits when working with hexadecimal) to FF, inclusive. Normally you won't be faced with having to deal with hexadecimal numbers within your graphics programs. For some reason, though, web browsers use this system when entering values for colors. Now that you can convert from hexadecimal to decimal, though, it should be no problem for you to go back and forth between the browser and your graphics programs. For example, if you want to use white as the color for something in your browser, the RGB value 255, 255, 255 converts to FFFFFF. NOTE: HTML and, subsequently, some of the HTML editors have started using names for some of the available colors. You can now use, for example, "black" instead of "#000000" and "white" instead of "#FFFFFF". The list of color names is still somewhat limited, though.
Knowing a bit about the hexadecimal numbering system can come in handy when looking at the values used for web palette colors, as well, as these are usually displayed using hexadecimal numbers. Converting From Decimal to Hexadecimal To translate from decimal to hexadecimal you need to find the number of times that 16 goes into the decimal number. This number becomes the left most digit, and the remainder is the rightmost digit. For example, to convert 250 to hexadecimal, see how many times 16 goes into 250. 250/16 is 15.625. We can't use fractions so we keep the 15. What is left over from 250-15*16? 250-240=10. This means that our two values are 15, for the leftmost digit, and 10, for the rightmost digit. Going back to the beginning of this section we see that 15 is F and 10 is A. Therefore 250 in decimal is FA in hexadecimal. To check just go backwards. F, or 15, times 16 plus A, or ten is 15*16+10=240+10=250. A Necessary Evil Unfortunately this is one of those unavoidable evils you've got to put up with when it comes to computer basics. With a little practice, though, you'll be an old pro. Don't be afraid to count on your fingers, I do. In fact fingers, or more correctly the fact that we have ten fingers, is the reason behind the decimal system to begin with. If we all had eight fingers on each hand we wouldn't have to go through this translation, we'd all be counting in hexadecimal as a matter of course. Moving On This really is the hardest part of web graphics. You may find your self coming back to this tutorial from time to time. As you progress in your understanding of computer graphics and, more specifically, web graphics much of what was discussed here will make more sense. If you find yourself suddenly snapping your fingers, looking off into space and mumbling "That's what he meant", don't worry it's perfectly normal although it may not appear so to others in the same room as you. Be sure to check out some of our other general graphics tutorials. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Create really cool 3D graphics! Read our Xara 3D 6 review or click the graphic below to download a free demo. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
| ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
We'd like to hear from you... If there are any graphics techniques you'd like to see covered, send us an e-mail. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
I don't mind telling you that we have the very best Web hosting provided by pair Networks. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
