HTML COLORS

Although most screens and browsers today will display millions of colors, you must remember that some people are still using older systems with limited resources and old browsers which are more limited. When designing your webpage, you must decide early on who you audience is. Does it include people using low screen settings or older browsers? If yes, you need to think about using websafe or websmart colors. Of all the millions of colors your computer monitor may be able to render, for the older computers with older settings and browsers, there are actually only 216 Websafe colors out of 256 colors.

If a monitor is set to display only 256 colors, it will only produce that many pure colors. Everything else will be dithered. That means your monitor will add pixels of color together so that your eyes mix the color and you get an approximation of the intended color. In theory this is good, in practice it looks bad and can ruin a good design. The image below shows a color wheel with some of the colors dithered.

OK, take some ginkgo biloba, eat some fish and spinach, take a multi-vitamin, or slug down a cup of coffee, it’s time to think hard. Deep breath! Why only 216 colors? For an older low resource system - think Windows 3.1 on a Pentium I with 8MB RAM or an ancient MacIntosh Classic II or similar. A Windows system has a set of colors in it’s 256 color pallet. A McIntosh also has a 256 color pallet too. The problem is, the two pallets don't contain all the same colors. There are only 216 colors that are the same in both pallets, so unless you want the other colors to dither on some systems, you have to ignore them.

Now, to explain how the colors are labeled. In HTML and some other web languages we use what are called Hexadecimal numbers to designate color. This refers to the Red, Cyan, and Blue (usually referrd to as RGB) pixels of light a monitor produces to make colors, two digits for each color. There are 256 possible levels of color for each of the three colors (Red, Cyan and Blue). This goes back to the 16 bit digital system of computers. 16 X 16 = 256. But, if you are going to think like computer, you need a 16 base numbering system (we use a 10 base system). This means the computer counts from 0 to 255 (256 color levels 0 + 255 = 256) using only two digits. When we count we go 8, 9, 10, 11, 12, when a computer counts it puts six more numbers between 10 and 11! We count in tens because we have ten fingers.

If it makes it easier, think of your computer as an intelligent creature with 16 fingers. This race of creatures might count eight, nine, ten, parc, sika, yom, lus, rupit, woot, eleven, twelve, etc. your computer does this too, but because a ten fingered human designed it, it counts, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 11, 12… So, for the intensity of a color constituent – for instance, how much red – you indicate the level by numbering for each of the two digets 1-9 then A-F. So instead of numbering 27, 28, 29, 30, 31, we number 27, 28, 29, 2A, 2B...2F, 30, 31. And after 99…9F, we continue with A1…A9, AA …AF, up to FF. So: 00 is no red, FF is red full on.

Remember the digits mean Red-Cyan-Blue but instead of 00-00-00 we just do 000000, which means no Red, no Cyan, no Blue or in other words, Black, and FFFFFF is of course White. By the way, hexadecimal numbers are not case sensitive, so you could write ffffff for white. Websafe colors use any combination of the following digits: 00, 33, 66, 99, CC, and FF. 339966, 99CCFF, and 0066FF are all websafe colors.

Being limited to 216 colors is a designer’s idea of a drag, and I’m not taking feathers, taffeta and makeup over stubble! So some genius came up with Websmart colors. The Websmart palette is calculated this way: Using a 16 by 16 cube of color, 16 X 16 X 16 = 4,096 colors. The Websmart palette uses any combination of 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, AA, BB, CC, DD, EE, and FF. This means a much larger pallet that will display on monitors that support thousands (16-bit) and millions (24-bit) of colors. You still get dithering on 256 color monitors, but you are safer on most other systems. You can of course choose non-safe colors, but the risk of dithering is greater.


Brought to you by The Caprio Group