Color Chart and Information

Use this color chart to help you select a color. Use either the top number (000000) or the RGB colors (0, 0, 0) to reference the colors you pick:

CCCCCC
R: 204
G: 204
B: 204

The color above can be reference in two ways: (CCCCCC) or (204, 204, 204)

000000 R: 0
G: 0
B: 0		 333333 R: 51
G: 51
B: 51		 666666 R: 102
G: 102
B: 102		 999999 R: 153
G: 153
B: 153		 CCCCCC
R: 204
G: 204
B: 204		 FFFFFF
R: 255
G: 255
B: 255
330000 R: 51
G: 0
B: 0		 330033 R: 51
G: 0
B: 51		 330066 R: 51
G: 0
B: 102		 330099 R: 51
G: 0
B: 153		 3300CC
R: 51
G: 0
B: 204		 3300FF
R: 51
G: 0
B: 255
660000 R: 102
G: 0
B: 0		 660033 R: 102
G: 0
B: 51		 660066 R: 102
G: 0
B: 102		 660099 R: 102
G: 0
B: 153		 6600CC
R: 102
G: 0
B: 204		 6600FF
R: 102
G: 0
B: 255
663300 R: 102
G: 51
B: 0		 663333 R: 102
G: 51
B: 51		 663366 R: 102
G: 51
B: 102		 663399 R: 102
G: 51
B: 153		 6633CC
R: 102
G: 51
B: 204		 6633FF
R: 102
G: 51
B: 255
990000 R: 153
G: 0
B: 0		 990033 R: 153
G: 0
B: 51
 990066 R: 153
G: 0
B: 102		 990099 R: 153
G: 0
B: 153		 9900CC
R: 153
G: 0
B: 204		 9900FF
R: 153
G: 0
B: 255
993300 R: 153
G: 51
B: 0		 993333 R: 153
G: 51
B: 51		 993366 R: 153
G: 51
B: 102		 993399 R: 153
G: 51
B: 153		 9933CC
R: 153
G: 51
B: 204		 9933FF
R: 153
G: 51
B: 255
996600 R: 153
G: 102
B: 0		 996633 R: 153
G: 102
B: 51		 996666 R: 153
G: 102
B: 102		 996699 R: 153
G: 102
B: 153		 9966CC
R: 153
G: 102
B: 204		 9966FF
R: 153
G: 102
B: 255
CC0000 R: 204
G: 0
B: 0		 CC0033 R: 204
G: 0
B: 51		 CC0066 R: 204
G: 0
B: 102		 CC0099 R: 204
G: 0
B: 153		 CC00CC
R: 204
G: 0
B: 204		 CC00FF
R: 204
G: 0
B: 255
CC3300 R: 204
G: 51
B: 0		 CC3333 R: 204
G: 51
B: 51		 CC3366 R: 204
G: 51
B: 102		 CC3399 R: 204
G: 51
B: 153		 CC33CC
R: 204
G: 51
B: 204		 CC33FF
R: 204
G: 51
B: 255
CC6600 R: 204
G: 102
B: 0		 CC6633 R: 204
G: 102
B: 51		 CC6666 R: 204
G: 102
B: 102
 CC6699 R: 204
G: 102
B: 153		 CC66CC
R: 204
G: 102
B: 204		 CC66FF
R: 204
G: 102
B: 255
CC9900 R: 204
G: 153
B: 0		 CC9933 R: 204
G: 153
B: 51		 CC9966 R: 204
G: 153
B: 102		 CC9999 R: 204
G: 153
B: 153		 CC99CC
R: 204
G: 153
B: 204		 CC99FF
R: 204
G: 153
B: 255
FF0000 R: 255
G: 0
B: 0		 FF0033 R: 255
G: 0
B: 51
 FF0066 R: 255
G: 0
B: 102		 FF0099 R: 255
G: 0
B: 153		 FF00CC
R: 255
G: 0
B: 204		 FF00FF
R: 255
G: 0
B: 255
FF3300 R: 255
G: 51
B: 0		 FF3333 R: 255
G: 51
B: 51
 FF3366 R: 255
G: 51
B: 102		 FF3399 R: 255
G: 51
B: 153		 FF33CC
R: 255
G: 51
B: 204		 FF33FF
R: 255
G: 51
B: 255
FF6600 R: 255
G: 102
B: 0		 FF6633 R: 255
G: 102
B: 51		 FF6666 R: 255
G: 102
B: 102		 FF6699 R: 255
G: 102
B: 153		 FF66CC
R: 255
G: 102
B: 204		 FF66FF
R: 255
G: 102
B: 255
FF9900 R: 255
G: 153
B: 0		 FF9933 R: 255
G: 153
B: 51		 FF9966 R: 255
G: 153
B: 102		 FF9999 R: 255
G: 153
B: 153		 FF99CC
R: 255
G: 153
B: 204		 FF99FF
R: 255
G: 153
B: 255
FFCC00 R: 255
G: 204
B: 0		 FFCC33 R: 255
G: 204
B: 51		 FFCC66 R: 255
G: 204
B: 102		 FFCC99 R: 255
G: 204
B: 153		 FFCCCC
R: 255
G: 204
B: 204		 FFCCFF
R: 255
G: 204
B: 255
FFFF00 R: 255
G: 255
B: 0		 FFFF33 R: 255
G: 255
B: 51		 FFFF66 R: 255
G: 255
B: 102		 FFFF99 R: 255
G: 255
B: 153		 FFFFCC
R 255
G: 255
B: 204		 FFFFFF
R: 255
G: 255
B: 255
CCFF00 R: 204
G: 255
B: 0		 CCFF33 R: 204
G: 255
B: 51		 CCFF66 R: 204
G: 255
B: 102		 CCFF99 R: 204
G: 255
B: 153		 CCFFCC
R: 204
G: 255
B: 204		 CCFFFF
R: 204
G: 255
B: 255
99FF00 R: 153
G: 255
B: 0		 99FF33 R: 153
G: 255
B: 51		 99FF66 R: 153
G: 255
B: 102		 99FF99 R: 153
G: 255
B: 153		 99FFCC
R: 153
G: 255
B: 204		 99FFFF
R: 153
G: 255
B: 255
66FF00 R: 102
G: 255
B: 0		 66FF33 R: 102
G: 255
B: 51		 66FF66 R: 102
G: 255
B: 102		 66FF99 R: 102
G: 255
B: 153		 66FFCC
R: 102
G: 255
B: 204		 66FFFF
R: 102
G: 255
B: 255
33FF00 R: 51
G: 255
B: 0		 33FF33 R: 51
G: 255
B: 51
 33FF66 R: 51
G: 255
B: 102		 33FF99 R: 51
G: 255
B: 153		 33FFCC
R: 51
G: 255
B: 204		 33FFFF
R: 51
G: 255
B: 255
00FF00 R: 0
G: 255
B: 0		 00FF33 R: 0
G: 255
B: 51		 00FF66 R: 0
G: 255
B: 102		 00FF99 R: 0
G: 255
B: 153		 00FFCC
R: 0
G: 255
B: 204		 00FFFF
R: 0
G: 255
B: 255
33CC00 R: 51
G: 204
B: 0
 33CC33 R: 51
G: 204
B: 51		 33CC66 R: 51
G: 204
B: 102		 33CC99 R: 51
G: 204
B: 153		 33CCCC
R: 51
G: 204
B: 204		 33CCFF
R: 51
G: 204
B: 255
00CC00 R: 0
G: 204
B: 0		 00CC33 R: 0
G: 204
B: 51		 00CC66 R: 0
G: 204
B: 102		 00CC9
R: 0
G: 204
B: 153		 00CCCC
R: 0
G: 204
B: 204		 00CCFF
R: 0
G: 204
B: 255
66CC00 R: 102
G: 204
B: 0		 66CC33 R: 102
G: 204
B: 51		 66CC66 R: 102
G: 204
B: 102		 66CC99 R: 102
G: 204
B: 153		 66CCCC
R: 102
G: 204
B: 204		 66CCFF
R: 102
G: 204
B: 255
99CC00 R: 153
G: 204
B: 0		 99CC33 R: 153
G: 204
B: 51		 99CC66 R: 153
G: 204
B: 102		 99CC99 R: 153
G: 204
B: 153		 99CCCC
R: 153
G: 204
B: 204		 99CCFF
R: 153
G: 204
B: 255
CCCC00 R: 204
G: 204
B: 0		 CCCC33 R: 204
G: 204
B: 51		 CCCC66 R: 204
G: 204
B: 102		 CCCC99 R: 204
G: 204
B: 153		 CCCCCC
R: 204
G: 204
B: 204		 CCCCFF
R: 204
G: 204
B: 255
999900 R: 153
G: 153
B: 0		 999933 R: 153
G: 153
B: 51		 999966 R: 153
G: 153
B: 102		 999999 R: 153
G: 153
B: 153		 9999CC
R: 153
G: 153
B: 204		 9999FF
R: 153
G: 153
B: 255
669900 R: 102
G: 153
B: 0		 669933 R: 102
G: 153
B: 51		 669966 R: 102
G: 153
B: 102		 669999 R: 102
G: 153
B: 153		 6699CC
R: 102
G: 153
B: 204		 6699FF
R: 102
G: 153
B: 255
339900 R: 51
G: 153
B: 0		 339933 R: 51
G: 153
B: 51		 339966 R: 51
G: 153
B: 102		 339999 R: 51
G: 153
B: 153		 3399CC
R: 51
G: 153
B: 204		 3399FF
R: 51
G: 153
B: 255
009900 R: 0
G: 153
B: 0		 009933 R: 0
G: 153
B: 51		 009966 R: 0
G: 153
B: 102		 009999 R: 0
G: 153
B: 153		 0099CC
R: 0
G: 153
B: 204		 0099FF
R: 0
G: 153
B: 255
666600 R: 102
G: 102
B: 0		 666633 R: 102
G: 102
B: 51		 666666 R: 102
G: 102
B: 102		 666699 R: 102
G: 102
B: 153		 6666CC
R: 102
G: 102
B: 204		 6666FF
R: 102
G: 102
B: 255
336600 R: 51
G: 102
B: 0
 336633 R: 51
G: 102
B: 51
 336666 R: 51
G: 102
B: 102
 336699 R: 51
G: 102
B: 153
 3366CC
R: 51
G: 102
B: 204
 3366FF R: 51
G: 102
B: 255
006600 R: 0
G: 102
B: 0		 006633 R: 0
G: 102
B: 51		 006666 R: 0
G: 102
B: 102		 006699 R: 0
G: 102
B: 153		 0066CC
R: 0
G: 102
B: 204		 0066FF
R: 0
G: 102
B: 255
333300 R: 51
G: 51
B: 0		 333333 R: 51
G: 51
B: 51		 333366 R: 51
G: 51
B: 102		 333399 R: 51
G: 51
B: 153
 3333CC R: 51
G: 51
B: 204		 3333FF R: 51
G: 51
B: 255
003300 R: 0
G: 51
B: 0		 003333 R: 0
G: 51
B: 51		 003366 R: 0
G: 51
B: 102		 003399 R: 0
G: 51
B: 153		 0033CC
R: 0
G: 51
B: 204		 0033FF
R: 0
G: 51
B: 255
000000 R: 0
G: 0
B: 0		 000033 R: 0
G: 0
B: 51		 000066 R: 0
G: 0
B: 102		 000099 R: 0
G: 0
B: 153		 0000CC
R: 0
G: 0
G: 204		 0000FF
R: 0
G: 0
B: 255
330000 R: 51
G: 0
B: 0		 330033 R: 51
G: 0
B: 51		 330066 R: 51
G: 0
B: 102		 330099 R: 51
G: 0
B: 153		 3300CC
R: 51
G: 0
B: 204		 3300FF
R: 51
G: 0
B: 255
660000 R: 102
G: 0
B: 0		 660033 R: 102
G: 0
B: 51		 660066 R: 102
G: 0
B: 102		 660099 R: 102
G: 0
B: 153		 6600CC
R: 102
G: 0
B: 204		 6600FF
R: 102
G: 0
B: 255

Meaning of Color

What are you telling your audience through your colors? Here are some common color connotations in Western cultures:

Red: passion, romance, fire, violence, aggression, stop, warning signal, energy, power, excitement

Purple: creativity, mystery, royalty, mysticism, rarity, beauty, inspiration

Blue: loyalty, security, conservatism, tranquility, coldness, sadness, honesty, integrity

Green: nature, fertility, growth, envy, go, environmental awareness, fiscal matters, health, regeneration, contentment, harmony

Yellow: brightness, illumination, illness, cowardice, Wisdom, Playful, Satisfying, Optimistic

Black: power, sophistication, contemporary style, death, morbidity, evil.

Orange:Happy, Confident, Creative, Adventurous

White: purity, innocence, cleanliness, truth, peace, coldness, sterility. White is also the color of death in Chinese culture.

Resources

List of Colors

Color tips and guidelines

1. Understand your site's message and brand. Choose colors that reinforce your message. For instance, if designing a site for a financial institution hoping to convey stability, choose cool, muted colors such as blue, gray, and green. In this case, using warm, vibrant hues would undermine the site's brand.

2. Understand your audience. Cultural differences can lead to unexpected responses to color. Additionally, demographic segments and age groups respond to colors differently. Younger audiences generally respond to more saturated hues that are less effective with older segments.

3. Use a small number of colors in your palette. Four or five colors, in addition to white and black, should be sufficient. Too many colors create discord and distract the user.

4. Use contrast for readability. Colors similar in value do not provide enough contrast and hinder legibility. Black text on white backgrounds provides the highest degree of contrast.

5. Use grayscale to test contrast. When dealing with hues other than black, white, and gray, it's sometimes difficult to determine the relative value of each color. To ensure that your color palette provides enough contrast, create a wireframe mockup and convert it to grayscale.

6. Be aware of timeliness when choosing colors. Color trends can quickly saturate the marketplace, and consumers rapidly become numb to fashionable hues. On the other hand, you can use popular color palettes from decades past to evoke feelings of nostalgia.

7. Consider functional colors when choosing a palette. Don't forget to establish functional colors for elements that communicate contextual information, such as headings and links.

8. Prepare for color differences on the Web. Every Web developer knows that even Web-safe colors appear differently across platforms. Be sure to correct for gamma differences and test your color palette on multiple platforms.