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)

More information about color located at our Pinterest board here.

Fun page about color. 500 named colors and their Hex & RGB values.

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.