Color
Art schools spend a lot of time teaching students about color. It's a science! The trick is to choose three or four colors that go well together and then stick with that color scheme for your entire Web site.
Move away from the primary and secondary colors (please!) to put together a more sophisticated scheme that will make your pages look appealing. (You can use black and white for free: They don't subtract from your three or four palette colors.)
Primary and Secondary Colors
These colors are intense, saturated, gaudy, bright. Using ONE of them in a design is usually quite enough, unless you're trying to produce a loud and gaudy effect with your site. But note that you don't need to use ANY of these six colors in your designs.
| CC0000 | 0000FF | FFFF00 |
| 993399 | 009933 | FF6600 |
| 0000FF | FFFF00 | CC0000 |
There are three primary and three secondary colors; secondaries (the middle row in the table below) are created by combining two primaries (shown here on both the top and bottom rows).
> See more about using the color wheel to choose combinations
Color Helpers Online
These sites will help you choose colors intelligently:
- Color Palette Creator *
- Color Toy (try the Random button at far right) **
- Color Scheme Generator ***
- Colorcube (see how your text color and link colors will look against your background color)
* The Color Palette Creator is a fabulous tool that allows you to input one base color (then click OK) and see a range of tints (blended with white) and shades (blended with black).
** This site is some fun, and a nice little Flash application, but it does not do Web-safe colors (you can enter a Web-safe hexadecimal value in the box at bottom right, then click SUBMIT HEX, but the generated colors will not be Web-safe).
*** Pick any color and see monochrome, contrast, triad, tetrad and analogic color palettes. VERY useful for Web designers!
For a complex color-picking aid that can help you find complementary colors:
In the menu labeled "RGB Range" (bottom left inside the box), you can change the value to "0-FF" and enter the Web hexadecimal values in the three boxes. Then click Start to get a set of colors.
Web Colors
There are 216 "Web-safe" colors. These are less important now than they were in the past, because today most people have computer monitors that can display millions of colors. However, it's still good for professional Web designers to understand the Web-safe palette (also called the browser-safe palette) -- in part because it helps you match colors for the screen.
For example, if you put a non-Web-safe color in the background of a JPG, you will not necessarily get a perfect match with your page background.
| 000000 | FF0000 | 00FF00 | 0000FF | FFFFFF |
| FFCCCC | CC0000 | 00CC00 | 0000CC | CCCCCC |
| CCFFCC | 990000 | 009900 | 000099 | 999999 |
| CCCCFF | 660000 | 006600 | 000066 | 666666 |
| FFFFCC | 330000 | 003300 | 000033 | 333333 |
All Web-safe colors are made up of three pairs of two identical hexadecimal numerals. There are only six pairs in the Web-safe universe, so you can memorize them if you want to:
- 00 (no color)
- 33
- 66
- 99
- CC
- FF (most color)
If you're wondering how CC and FF can be numerals, you could look up "hexadecimal" in a dictionary.
The three pairs correlate to RGB, or red-green-blue. That is, the first pair determines the amount of red, the second pair the amount of green, and the third pair the amount of blue.
- 000000 - black
- FF0000 - brightest red
- 00FF00 - brightest green
- 0000FF - brightest blue
- FFFFFF - white
If you're good at math, you probably already figured out that 216 derives from 6 to the 3rd power, or 6 x 6 x 6, which equals 216: Six possible pairs in three slots.
RGB vs. CMYK
If you have learned how to specify color for print design work, you have learned about CMYK (cyan-magenta-yellow-black). CMYK applies to ink. There's no ink on a computer screen (you knew that). The calculation of colors for online use is based on light. There is no black, because where light is concerned, black is the absence of all light.
Learning About Color
The best tutorial I have found is WORQX Color Theory site. You may want to start with the Color Combinations page.
For a deep introduction to using color. see Color, Contrast & Dimension. The site provides a full seminar in how colors work together. If you have never taken a class in color theory, you will learn a lot from it.
For a simple view of Web color values, see Color Wheel Made Vertical.
For more about the browser-safe palette, see Lynda's Weinman's page on the topic.
Invest some time in learning about color theory, and it will pay off by enabling you to design more compelling and attractive Web sites.
Color in Photoshop
Photoshop lets you choose to see Only Web Colors in the Color Picker (notice the check box in the lower left corner):
Color in Flash
Picking colors from the palette in Flash is always "browser safe":
Notice the hexadecimal numeral (CCCC99) above the palette.