Written by Scott McLeod
When designing a Web page, choice of colors is important. Apart from your page's content, color alone can give a real feel to a page, such as warm or cold, vibrant or dull, whimsical or intense, etc. There is a real science to choosing and mixing colors. But instead of discussing color theory here, this document attempts to clarify the best practices for setting colors in HTML, and provides some useful links to help you choose safe and effective colors and color schemes for your web sites.
When setting colors in HTML, there are 2 options. You can use color names, such as "silver", or color numbers, such as "#996633". Names are easier to deal with and are sometimes recommended for beginners for that reason. The drawback with color names, however, is that only 16 color names are defined in the HTML specification. Some Web designers ignore this fact and use other (extended) color names because most browsers do recognize many more than the 16 standardized names, but doing so can be risky since there are so many different browser and browser versions out there. These so-called extended color names include such strange names as "cornflowerblue", "lemonchiffon", "lightgoldenrodyellow", and "mediumspringgreen", which sound interesting enough but unfortunately may not be altogether reliable. So if you are trying to use a color that is outside of the 16 standard defined colors, you should probably use the color numbers -- they give you more color variety and compatibility!
Ok, so what exactly are these 16 special color names that are defined within HTML?
They are: black, white, gray, red, blue, green, yellow, purple, maroon, aqua, fuchsia, silver, lime, teal, navy, and olive.
Don't ask me how lime got in there but orange somehow got left out in the cold. Maybe the lime lobbyists took the HTML color name picking committee out to a more lavish lunch than the orange lobbyists did that fateful afternoon before the big vote occurred. In other words, who knows? But despite all of the unfairness, there's really no use in staging a public protest or hunger strike in the name of your own favorite color. Kind of like relatives, you'd be better off just accepting these 16 odd colors into your HTML color family, getting to know them, and making the best of your time together because, like them or not, they're here to stay!
Here is an example of using these color names in the "body" tag to set default colors for various aspects of the document, including its background, text, links, visited links, and active links.
<body bgcolor="black" text="white" link="aqua" vlink="gray" alink="red">
Another place that colors can be set is in the <font> tag, usually to override the default color of text in a certain section of the document. Here is an example of this.
<p>This sentence is in the default text color. <font color="green">This one is part green</font> and part default color.</p>
As you can imagine, sticking exclusively with these 16 colors is pretty limiting. Not only that but you are likely to have some pretty darn ugly Web sites because these are not the most warm and subtle 16 colors from which to choose. Further, they are not the "safest" set of colors either, as you will learn more about later. So we better be able to work with color numbers too, which, after a little practice, can really open up the color spectrum for you.
Color numbers in HTML are given in hexadecimal notation representing the intensities of the red, green, and blue (r-g-b) light that are used to make up the color of each pixel (dot) on the screen. That's an accurate statement, but it probably makes sense to you only if you already know about color numbers in HTML. Here's the bottom line. Color numbers start with a "#" symbol and are always followed by 6 characters: the first 2 for the red, the next 2 for the green, and the next 2 for the blue. The characters themselves are each between 0 and F. In hex, the possible values are 0 through 9, then A (10), B (11), C (12), D (13), E (14), and F (15). Its not the most intuitive system for we mere mortals to work with, but with practice one gets used to it.
If math scares you, skip this paragraph. For the mathematically inclined, of the two digits you are forming for each of the 3 colors, the rightmost digit is in the one's place, and the leftmost is in the 16's place. For example, a hex number like 23 is really equivalent to the decimal number 35 (2x16 + 3x1). So one way to look at a color number is that you are choosing a number between 0 and 255 to represent the brightness of each of the red, green, and blue that makes up the color you are forming. Hex 00 is decimal 0, and hex FF is decimal 255. The reason why hexadecimal is used at all goes back to the computer's internal circuit design, which is based on binary (base 2), and hexadecimal's relationship with it. It takes one byte (8 bits, or 8 binary zeroes or ones) of memory to represent this number between 0 and 255, and each hex digit accounts for 4 of these bits. Assuming your system has 24 bit (3 byte) color depth, it then uses 8 bits (2 hex numbers) for the red, another 8 bits for the green, and another 8 bits for the blue. Although this knowledge won't help you choose nice color schemes for your Web pages, it might help you understand the meaning behind the numbers.
Here are some examples with explanations below.
<body bgcolor="#000000" text="#FF0000" link="#990099">
This example sets the background color to black -- 000000 means no red, no green, and no blue light at all -- and when you turn off all 3 of your HTML flashlights that means you'll be in the dark! It also sets the text color to bright red -- FF0000 means turning on the red full blast (FF), but turning off the green and blue (00). The hyperlinks are set to 990099 which means a medium amount of red (99), no green (00), and a medium amount of blue (99) light. This combination results in a mix of red and blue light which will yield a medium purple color.
Here are a few more general guidelines to help you get used to working with these color numbers. One good rule of thumb that was hinted at above is that the smaller the hex numbers, the darker the result. Look at the color numbers and swatches for "lime" and "green" (or "blue" and "navy") in the table below for examples of this. For another example, #330000 will be a very deep, dark red, whereas #660000 would be a little lighter but still dark red, #990000 would be a medium dark red, #CC0000 would be a brighter red, and #FF0000 would be the brightest red. You can apply the same thinking to blue, green, or other combinations as well. Grays, for example, are achieved by having identical red, green, and blue numbers. The lower the numbers, the darker the gray. In particular, #333333 is a very dark gray, whereas #CCCCCC is a very light gray, with #999999 being more of a medium gray. Look at the color numbers and swatches for "silver" and "gray" in the table below to see two other examples of this.
It might help you to see the 16 swatches with their color names and hex color numbers. Studying this would help you to see how combining red, green, and blue light results in various colors and also give you some practice in breaking down these hex numbers a little more. Then you can use this table as a reference and tweak your own color numbers from there. And make use of some of the Web sites listed toward the end of this document.
| Name | Number | Sample | Web Safe? |
|---|---|---|---|
| aqua | #00FFFF | Yes | |
| black | #000000 | Yes | |
| blue | #0000FF | Yes | |
| fuchsia | #FF00FF | Yes | |
| gray | #808080 | No | |
| green | #008000 | No | |
| lime | #00FF00 | Yes | |
| maroon | #800000 | No | |
| navy | #000080 | No | |
| olive | #808000 | No | |
| purple | #800080 | No | |
| red | #FF0000 | Yes | |
| silver | #C0C0C0 | No | |
| teal | #008080 | No | |
| yellow | #FFFF00 | Yes | |
| white | #FFFFFF | Yes |
Choosing colors, as mentioned in the introductory paragraph of this document, can be very important in setting the tone for your Web site. But unless you were either born with an innate sense of design or have studied design, you probably don't really have a very good sense of exactly what colors, when put together on your page, will result in what kind of experience for your site's surfers. And since those surfers are ultimately the real judge of your color scheme (not you the designer), it is always a good idea to make an effort to reach out to other sources for help with your color scheme before you commit to it. There are many color-related web sites that can help with this. Links to some of these appear toward the end of this document. You can also make notes of (or bookmark) Web sites that have really good color schemes so you can learn from them and maybe even use some of those same colors in a later site of your own. It is also a good idea to send the URL of your sample page (using your proposed color scheme) in email to a bunch of people you know for feedback (or post it on a forum for people to comment on).
What makes a color safe or unsafe? Are there bad colors out there whose behavior quite frankly can't be trusted? When is an olive not an olive? What do you, as a Web designer, need to know before sending your poor innocent little colors out there onto the big bad World Wide Web for all to see? These and other questions are answered in this section.
Colors are not safe if they are likely to look very different on some people's monitors than what you intended (different than how they looked on your own monitor when you chose them). Of course we must all understand that no color will ever look exactly the same on all monitors because of monitor manufacturer differences, monitor user's adjustments, LCD versus CRT technology differences, Mac versus Windows system differences, etc. But even accepting those differences as a given, there are other more troubling differences. For example, if you choose a color that is not available on some system, it can choose a color that it does have available that it thinks is "closest" to your intended color, or in some cases it can choose to "dither", or combine colors that it does have available into a pattern of dots in an attempt to have them blend into the overall color that you wanted. Unfortunately, the results of either of these methods can sometimes lead to some surprisingly unpleasant displays. Further, on some systems, it will shift an HTML background color in a different way than it will shift that same color if it appears within a graphic image, which can cause a noticeably unpleasant seam when such an image is innocently placed next to (or on top of) such a background color. Although all of this yucky stuff is much less of a problem these days than it used to be (due to a higher percentage of surfers using more modern graphics hardware and more recent browsers), it is still important to keep these things in mind when choosing colors.
Through experimentation across differenent systems and using different browsers, it was discovered in 1996 that there are 216 colors that are "safer" than the rest. These have become known as "web safe" colors and when put together are referred to as the web safe palette. This so-called web safe palette consists of the colors that are more of a standard across different systems and are more likely to be available for use. It must be noted, however, that it has been recently shown that on today's systems, not even these 216 colors are equally safe! Nevertheless, Web safe colors, when expressed as a hex color number, always consist of either 00, 33, 66, 99, CC, or FF. For example #336699 is a Web safe color number, as is #00CCFF. Note from the above table of names and numbers that, perhaps surprisingly, only half of the standard 16 color names are web safe! And so now you know when an olive might not be an olive after all!
So, in conclusion, what's a designer to do? Most designers find the web safe palette of 216 colors pretty limiting anyway. So, depending on who your primary target audience is, and what likelihood there is that they will be using what technology, you must make some difficult decisions. One rule of thumb is that when you are choosing ideal colors for your site, if any of them end up somewhat close to a web-safe color, consider just using the web safe one instead. However if no web safe ones look right, you may want to just go with the "unsafe" colors knowing that they may look different on some systems and may look downright nasty on the older (8 bit, 256 color) systems.
And perhaps the most important time for choosing web safe colors is when you are placing a color image on top of a color background and you want the background part of the color image to match exactly to the background color (without a noticeable seam). This might happen, for example, if you are placing an image that has a dark gray background area into a table cell that is larger than that image and the cell has the same dark gray background color assigned to it. If you do not use web safe colors in both the image's background area as well as in the background color that you specify in HTML (or CSS), some browsers will adjust the two colors to similar available colors in that system, but adjust them to two different similar colors (oops)!
Here are some really useful Web sites to help you in choosing color schemes, in putting together the HTML for the color numbers involved, and in understanding the concepts behind color on the Web. Please let me know if any of these sites are giving you trouble.
Colorschemer
The above site is great for finding some other colors that will work well with one
you have in mind. For example, if you have a background color in mind and would
like to find other colors that would go well with it, this online color schemer
can really help you out. There is also a desktop version of the online tool that is
even better because it suggests color schemes that include text and link colors
too.
Color Scheme Designer
This site has a similar purpose to the ColorSchemer. One nice benefit is that after you have chosen some colors, it will then generate a sample Web page using those colors so you can get a good idea of how that color scheme really works (or doesn't work.) It will generate a dark version and a light version of that color scheme. Use the "About & Help" menu's "Show Tooltips" command when first working with this tool so you can more fully understand how it works.
More Color Scheme Tools
If the above tools aren't enough, here is a site that reviews 15 online tools for helping you choose colors for your Web sites.
Web-Safe Color Swatches
This just might be the largest web-safe swatch palette in existence. The swatches
are nice and big so you can get a better idea of what they will actually look
like as a background for your page. The HTML hex color numbers are printed right
on each swatch.
Web 2.0 Colors
Web 2.0 suggested color pallette. Some "modern colors" to consider using in your Web site color schemes, particularly if you are striving for a Web 2.0 look.
Color Theory
This is an excerpt from chapter 2 "Using Color" from a good book called
"Web Graphics for Non-Designers". It gives you some color theory if
you want it. If you don't, skip to the sections that show sample color schemes
used on actual sites and notes about each. The section on "Best Practice"
is also worthy.