|
|
|
|
| Home | Friends | News | Knr Links | Useful Links | Web Designing | Entertainment | |
Netscape's 216 colours
| Just a quick note: The topics covered below are not exceptionally important to making web pages. A perfectly good web page can be made without ever learning about this stuff. It is just a little sidetrack that you might say is for somewhat "advanced" HTML students. If you are just learning HTML authoring, I would recommend going back to the tutorial and not cluttering your head with this stuff. Believe me, you have plenty to learn as it is. Once you have a few basic skills under your belt, you can come back here and learn about some of the "finer points". |
Have you ever been surfing along and noticed that some images look pretty crappy? Like all full of speckles? If so, then you have fallen victim.
Now, before I go any further, let me warn you that I'm really not all that much of a computer geek, so I can only explain things as I understand them. That means I know what I'm talking about... most of the time. That said, let me try to tell you about the how's and why's of computer displays and colours... as I understand it.
* * * Most computers can run in one of 3 (maybe more) colour modes-
If you are in true colour mode your computer is configured to display up to 16.7 million distinct colours. That gives you a couple million shades of red alone. It's kind of nice because feathered edges look feathered, photographs look fantastic and nice backgrounds actually look nice!
- 256 colour
- high colour (64,000 colours - I think)
- and true colour (16.7 million colours)
There is a price to pay however. Your poor computer has to work extra hard trying to display everything. Consequently things tend to work a little slower and often a little jerkier. But I got to admit, images look very good.
If you want to give your processor a bit of a break, you can set your computer to display 64,000 colours rather than 16.7 million. This is the high colour mode. Although there is a huge difference between 16.7 million and 64,000 to your computer, the difference is hardly noticeable to your average run-of-the-mill human. You get nice looking images, nicely feathered edges and there's not much in the way of jerkiness or slowness in your display.
Super high image quality takes a back seat to speed, and you want your display to take up as little resources as possible, or if you have an older computer, you put around in 256 colour mode. All this means is your computer says "Listen, I know that there are 16.7 million colours. But what I'm going to do is only use 256 at a time. If I have to display an image that technically has 80,000 colours in it, I'm just going to try and find the closest 256 colours and just use them. Deal with it."
Now let's take that one step further. Let's suppose your computer is in 256 colour mode and you're running Netscape. Netscape says, "I am taking over your colours. Since you only have 256 colours to play with, I am assigning a permanent value to 216 of them. The remaining 40 can be used any way you want." The end result is Netscape dithers all images to those 216 colours.
Dithering is when your computer takes a couple colours it has and tries to blend them to make a colour that it doesn't have. This "dithering" is why images are sometimes speckled. Why does it do this?? Let's suppose you have a web page with two pictures on it. One picture contains 150 distinct colours. The second picture contains another 150 distinct colours. If you display them together then all of a sudden your computer has to deal with 300 separate colours, not to mention the colours for your taskbar and buttons, etc. This throws a serious monkey wrench into the 256 colour idea. So what Netscape does is say "Here are the 216 colours we will use for ALL images. Everything gets dithered to these colours."
Netscape's 216 colours
This group of colours is called a CLUT. As far as I know, all browsers have one. However, I don't know if all browsers use the same colours in their clut, or how colours and cluts and such work on operating systems other than Windows. (Hey, I warned you that I didn't know everything)
If both of the above images look about the same, then you are running a 256 colour display and Netscape is dithering the image on the left to it's 216 colours. If the image on the left looks smooth but the image on the right looks all speckled, then you are running a high or true colour display. The image on the left is a few simple gradients, saved in a low compression jpg format. In true colour mode the gradient is very smooth and in high colour mode it is still quite smooth (although the number of distinct colours falls to 313). The image on the right is a screen capture of the left image through 256 colour mode.
Gradient 1 - 1125 colours Gradient 2 - 69 colours 
I know its tempting to say phooey on anyone using only 256 colours, but keep in mind that a lot of people do just that. If your image is a photograph in jpg format there's not too much you can do. Photographs are simply going to look a little worse to those running 256 colours.
| Photo 1 - 20186 colours | Photo 2 - 61 colours |
|
|
Once again, if the images look about the same then you are in 256 colour mode. If the image on the left looks significantly better than the image on the right then you are in high or true colour mode. If this is the case then the image on the right is how people running 256 colours will see your picture. But, like I said, with photographs, there's not a whole heck of a lot you can do.It's a very similar situation using gif images. Even though a gif image can only contain 256 colours, if they are not Netscape's colours, the image will get dithered...
...except when you view a single image through the browser. By that I mean not an image in a web page, but viewing the image directly. As an exercise, right click on the image Ball 1 and choose View Image. What you will then see is the browser displaying the image directly and not by way of a web page. Since the browser knows that no other image will be coming down the pike, it will relax it's 216 colour rule and allow your computer to display whatever 256 colours it wants to.
| Ball 1 - 232 colours | Ball 2 - 62 colours |
|
|
One area where we can make a difference, is in drawings. Anything that doesn't contain a lot of gradients. Below is a good example.
Button 1 - 18 colours Button 2 - 12 colours Button 3 - 5 colours 
We have Image 1 and Image 2 just like the ones before. (the only exception is if you have Options/General Preferences/Images/Substitute Colours checked, in which case some drawn images will look nicer but other images may look worse. Go figure.). But now we have this third image. The third one should look just fine to everyone. It is nice and smooth even at 256 colours.
I did this by using a Netscape pallet in my graphics editor. You can do this too. If you load this image...
...into most any graphics editor you can make a colour pallet from it. (Consult your graphic editor's instructions if you don't know how to do this). Then you're ready to go! You can import an existing picture and substitute the closest Netscape colour for all the colors in the image. As you can see from the images above, the results are well worth the two minutes (at most) it takes to do this. If you are starting a new image, you can start with the Netscape colours. If your major areas are already done in Netscape's colours, and if you switch to 16.7 million colours for some further editing, when you go to substitute Netscape's colours back in, your image will look pretty much the way you intended. Plus it will look that way to everyone.
If you want to delve a little further into Netscape's browser clut, here's how they came up with the 216 colours. In our everyday life we use a base 10 number system. We use the following numbers...
0-1-2-3-4-5-6-7-8-9 Somewhere along the line, computer people decided that certain things would be easier to do if they used a base 16 number system...
0-1-2-3-4-5-6-7-8-9-A-B-C-D-E-F Since we don't have a unique symbol for 10, 11, 12 etc, we use letters to represent those values. Below are both number systems counting to our 50...
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 0 1 2 3 4 5 6 7 8 9 A B C D E F 10 11 12 13 14 15 16 17 18 19 1A
27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 1B 1C 1D 1E 1F 20 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F 30 31 32 So when someone talks about a "hex code" or "hexadecimal number" or if you see cryptic colour codes like 09EC0A, CCFFCC, 00AACC, etc., this is what they're talking about and where it comes from. Taking it a little further, your computer understands colours in terms of red, green and blue values.
RED - GREEN - BLUE Each of those can have a value from 0 to 255. 0 being the absence of colour, 255 being full colour. Using that scale, we get the following values...or
R-G-B
RED= 255-0-0 GREEN= 0-255-0 BLUE= 0-0-255 BLACK= 0-0-0 WHITE= 255-255-255 Since we have 3 colours, each with a value that can range from 0 to 255 we have 16,777,216 possible colour combinations (256 ³). So, that's how we get 16.7 million colours.
If we replace the decimal number with it's hexadecimal equivalent we start to get something that looks a little more like those "hex codes".
RED= FF-0-0 GREEN= 0-FF-0 BLUE= 0-0-FF BLACK= 0-0-0 WHITE= FF-FF-FF If we then use 00 for 0, and 01 for 1, etc., and if we get rid of the dashes(-), we then got ourselves some genuine colour codes!
RED= FF0000 GREEN= 00FF00 BLUE= 0000FF BLACK= 000000 WHITE= FFFFFF Now, how did Netscape go about choosing which colours to use? Rather than using 256 values for each of the three colours, they only use 6. Namely 0, 51, 102, 153, 204 and 255. If we translate those numbers into their hexadecimal equivalents we get 00, 33, 66, 99, CC and FF. Since that is six different values for each of 3 colours, there are 216 possible colour combinations (6 ³).
If you go back to the colour chart you saw before, you'll see a rendering of all these colour combinations.
One last item. If a person is running a 256 colour display and you have chosen a background colour that is something other than one of Netscape's 216, then there is a very good chance that Netscape will instead pick the closest match from it's own colours. Sometimes this is not a good thing. I have seen pages where this left the text almost unreadable. Once again, I know it may be tempting to say 'too bad' to those of us in 256 colour land. But...as I said before, there are a lot of us. And if your goal is to design smart looking web pages, then you might want to consider spending the extra couple minutes to fine tune your graphics so you look good to everyone.
