Looking for the lessons? Get started!
A brief examination of color in Web design.
The entire Web Design Principles section can be accessed through the menu below.
Unfortunately, not everyone’s browser will support the spiffy JavaScript menu behind that innocent-looking button. If your browser won’t display the menu, just click on the button and you’ll be taken to a separate page with the entire menu displayed in clear, non-JavaScript HTML.
Sometimes it’s important to work for that pot of gold. But other times it’s essential to take time off and to make sure that your most important decision in the day simply consists of choosing which color to slide down on the rainbow. — Douglas Pagels
A good web site has an attractive color scheme. A better web site has a color scheme that conveys a specific feeling or theme. — Tim Priebe
We’ve already seen that we prefer to use hex codes instead of the names of colors for our CSS. If you use hex codes, you have tens of thousands of choices of colors. If you use names, you have a grand total of 16: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow.
The 16 Named Colors:
| black | gray | silver | white | ||||
| yellow | lime | aqua | fuchsia | ||||
| red | green | blue | purple | ||||
| maroon | olive | navy | teal |
(Chart adapted from Tizag.com.)
I don’t know about you, but I want more than 16 color choices!
There are two general ways to add color to your site through your stylesheet: color for fonts, and background-color for elements such as headers, paragraphs, lists, blockquotes, and other items.
Here’s an example:
h1 {
color: #ffcccc;
background-color: #000099;
}
Now let’s break it down.
Your <h1> font is displayed with the color #ffcccc. The background of that <h1> element is #000099.
There is one other way to indicate color, RGB. We won’t learn that here, except as it’s quoted in the reference below.
You can also use "shorthand" for certain hex codes, but I won’t get into that here.
This is a quote from HTML Dog:
red
Is the same as
rgb(255,0,0)
Which is the same as
rgb(100%,0%,0%)
Which is the same as
#ff0000
Which is the same as
#f00
Almost poetic, isn’t it? Web design haiku.
Color Theory
I’m not going to get into a reiteration of color theory here. One, I barely understand it myself, and two, there are terrific resources on the Internet that you can consult. This article by designer Linda Goin on the Opera Web Development site is a great place to start.
(Light-spectrum based color circle illustration, in the public domain, hosted on Wikimedia.)
Hex Values
We were just looking at hex values for colors. You’re going to end up using them, like it or not. Understanding them completely is, at least for me, not entirely necessary. I crib from charts such as this one, which we’ve used in the lessons, or color scheme generators such as Adobe’s Kuler, and don’t worry too much about it. But that’s not a good enough place to leave it. Let’s explore the wonderfully confusing world of hex values for just a moment.
Hex, or hexadecimal, values, make up the standard for color representation in Web pages. A hex value is a 6 digit representation of a color. The first two digits (RR) represent a red value, the next two are a green value (GG), and the last are the blue value (BB).
In other words, the six-digit code is actually three pairs of code. That’s important. We’ll see why later.
Hexadecimal Color Values:
| Decimal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| Hexadecimal | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
(Chart again adapted from Tizag.com. Thanks, folks.)
Note that instead of using double-digit numeric values, hex codes use 0-9 and then A-F.
0 is the minimum (actually, nil) amount of a color in a hex value. F is the maximum amount. Hence, #000000 – no color – is black, and #ffffff – full values for red, green, and blue – is white.
Want more? That gets you into color theory, which I address very briefly above.
Hex Shortcuts
Pssst! You can use shortcuts in writing your hex codes. Well, sometimes.
Remember I told you that hex codes come in three sets of pairs? That’s the basis for hex shortcuts.
If a pair of color values – say, 00 or aa – is the same, you can get away with using it only once in your stylesheet.
Therefore, you can use three digits in your code instead of six. Saves a little wear and tear on your long-suffering fingers. Here’s a couple of examples:
color=#000000;
becomes
color=#000;
We didn’t just trim three 0s off the end, we trimmed one off of each pair of zeroes:
00 00 00
One more:
color=#bb7733;
becomes
color=#b73;
We trimmed the second of each pair:
bb 77 33
RGB Values
Honestly, I almost never use RGB values in my coding, mostly because I can’t keep them straight, but also because some old non-Internet Explorer browsers don’t recognize them. (With the advent of rgba values being used in CSS3, I am going to have to learn.) In the meantime, here’s a quick rundown.
RGB stands for Red, Green, Blue. Every color has a value of 0 (no color) to 255 (full color). The format in your stylesheet for using white in RGB value is:
background-color="rgb(255,255,255)";
216 "Web-Safe" Colors
Older Web tutorials advised folks to only use a group of 216 “web-safe” colors. These are “paired” hex code values such as #cc0033 or #22ffdd. The reason for this is that, in older browsers and monitors, they were the only colors that could be “guaranteed” to display the same from one computer to the next. However, with more modern browsers and monitor displays, almost no one follows this any longer. You can find color charts of web-safe colors hanging around the Internet, but I wouldn’t worry about it.
Obsolete Methods
I don’t always mention these, but a great many HTML tutorials still advocate using the old <font color="whatever"> method of controlling your text colors. The same tutorials still tell you to use the text, link, vlink, and alink properties. When you come across these tutorials, run the other way. They are entirely obsolete.
