The Coloring

Jamie sang “You should have seen it in color” last year. Good song, and a good lesson for Web Developer -types the world over. Using color, wisely, can be one of the best things you can do on any Web page. But how do you get the colors you want or need? And how can you be sure that what you have indicated is going to be what page visitors will actually see?

The answer to that last question, first: You cannot. There are differences in the way Mac and PC monitors display colors. Things are just naturally going to look brighter or darker as you move from one machine type to another. And there is no telling with laptops. We must have sixteen different display technologies today for traveling computers and no two seem to be on the same page there—even when they are on the same page. And don’t forget the handheld market. Smart phones and iPods and such will all have a different view on things, too. Remember, too, that users can adjust the brightness and contrast of their monitors at will.

Given that there are about a skillion colors in nature and millions of colors in computering, how do you know that the “Red” you want is the “Red” you will get? If your needs are simple, and you don’t particularly care about which Red you get, you can actually use the name Red. This is supported in all browsers, along with fifteen other colors: Aqua, Black, Blue, Fuchsia, Gray, Green, Lime, Maroon, Navy, Olive, Purple, Silver, Teal, White and Yellow. These are the color names specified in the, well, specification, for HTML 4.

In addition to these, most browsers now also support the CSS named colors, with names like Bisque, BlanchedAlmond, FloralWhite and Snow, each subtly different from one of the originals. If you use a named color like WhiteSmoke, it will look the same on each area of the page you have indicated, though again it may look different when viewed on PCs and Macs, or laptops and handhelds.

But what if you need to (I can say this, I’m Lakota) go completely off the reservation? Then you get into the various ways of indicating which colors you want on your page. Some will indicate the Red, Green and Blue values, as rgb(184,0,0) but the most popular way is to use the Hexadecimal triplets.

With a leading octothorp, #, six digits indicate the Hexadecimal values for Red, Green and Blue. The first pair indicates the Red value, the second the Green and the final two digits are the value of the Green channel. So, #081F0C means we need “08” of Red, “1F” of the Green and “0C” of the Blue. This gives you a very dark green, maybe one of the hundreds of colors sold as “British Racing Green” over the years.

If the two digits in the pair are the same, then you can use shorthand and only indicate three numbers. #FC0 stands-in for #FFCC00, then, giving you the same golden-yellow. In Hex, 0 is none, 1 is very little and F is all there is. #000000 then, is Black, while #FFF is White. Here’s a tip from your old Unca Mark: Any time the triplets are equal, you are moving along the Black-to-White line, representing some shade of Gray. #303030, then, with all channels reporting “30” as their value, is a darker Gray than, say, #CDCDCD, which is very pale. Thirty is close to zero, while C and D are nearer to F.