Web
Safe Colors
Color
is often the last thing on the minds of website designers. We
have all been subjected to websites with unpleasant color combinations.
Yes, there are websites with white text on a yellow background
and so on. You want, people to view your website with ease.
Color
can play an important role in communicating your message online.
Color choices can motivate, impress, and persuade your prospect
to buy from you. Your color choices alone are sending a specific
message to your viewers.
Red
|
|
Sense
of power, action, strength, sexuality |
Orange
|
|
Confidence,
friendliness, cheerfulness, warmth |
Yellow
|
|
Caution,
intelligence, brightness, organization |
Green
|
|
Money,
health, hope, growth, freshness |
Blue
|
|
loyalty,
acceptance, understanding, cooperation |
Purple
|
|
Positive,
Royalty, sophistication, religion, |
White
|
|
Pure,
fresh, goodness, safety, cleanliness |
|
Black
|
|
Dramatic,
classy, committed, serious |
Using
too many colors or the wrong combination of colors on your website could alienate or turn off customers completely. You should
choose three or four colors for your site, and use only those colors
(or shades of those colors).
Decide
ahead of time which colors you're going to use, and stick to it. Complementary
colors are opposite each other on a color wheel. Light
backgrounds should have dark text and dark backgrounds should have
light text. Be sure that your text is readable if you are using
a background color or image. Be careful when choosing your colors.
Not all computers see the same color hues.
Primary
color: This
is the main color of the page. It will occupy most of the area
and set the tone for the design as a whole.
Secondary
color: This
is the second color on the page, and it is usually there to "back
up" the primary color. It is usually a color that is pretty
close to the primary color.
Highlight color: This
is a color that is used to emphasize certain parts of the page.
It is usually a color which contrasts more with the primary and
secondary colors, and as such, it should be used with moderation.
Web
Safe Color Chart
|
#FFFFFF
|
#FFFFCC
|
#FFFF99
|
#FFFF66
|
#FFFF33
|
#FFFF00
|
|
#FFCCFF
|
#FFCCCC
|
#FFCC99
|
#FFCC66
|
#FFCC33
|
#FFCC00
|
|
#FF99FF
|
#FF99CC
|
#FF9999
|
#FF9966
|
#FF9933
|
#FF9900
|
|
#FF66FF
|
#FF66CC
|
#FF6699
|
#FF6666
|
#FF6633
|
#FF6600
|
|
#FF33FF
|
#FF33CC
|
#FF3399
|
#FF3366
|
#FF3333
|
#FF3300
|
|
#FF00FF
|
#FF00CC
|
#FF0099
|
#FF0066
|
#FF0033
|
#FF0000
|
|
#CCFFFF
|
#CCFFCC
|
#CCFF99
|
#CCFF66
|
#CCFF33
|
#CCFF00
|
|
#CCCCFF
|
#CCCCCC
|
#CCCC99
|
#CCCC66
|
#CCCC33
|
#CCCC00
|
|
#CC99FF
|
#CC99CC
|
#CC9999
|
#CC9966
|
#CC9933
|
#CC9900
|
|
#CC66FF
|
#CC66CC
|
#CC6699
|
#CC6666
|
#CC6633
|
#CC6600
|
|
#CC33FF
|
#CC33CC
|
#CC3399
|
#CC3366
|
#CC3333
|
#CC3300
|
|
#CC00FF
|
#CC00CC
|
#CC0066
|
#CC0066
|
#CC0033
|
#CC0000
|
|
#99FFFF
|
#99FFCC
|
#99FF99
|
#99FF66
|
#99FF33
|
#99FF00
|
|
#99CCFF
|
#99CCCC
|
#99CC99
|
#99CC66
|
#99CC33
|
#99CC00
|
|
#9999FF
|
#9999CC
|
#999999
|
#999966
|
#999933
|
#999900
|
|
#9966FF
|
#9966CC
|
#996699
|
#996666
|
#996633
|
#996600
|
|
#9933FF
|
#9933CC
|
#993399
|
#993366
|
#993333
|
#993300
|
|
#9900FF
|
#9900CC
|
#990099
|
#990066
|
#990033
|
#990000
|
|
#66FFFF
|
#66FFCC
|
#66FF99
|
#66FF66
|
#66FF33
|
#66FF00
|
|
#66CCFF
|
#66CCCC
|
#66CC99
|
#66CC66
|
#66CC33
|
#66CC00
|
|
#6699FF
|
#6699CC
|
#669999
|
#669966
|
#669933
|
#669900
|
|
#6666FF
|
#6666CC
|
#666699
|
#666666
|
#666633
|
#666600
|
|
#6633FF
|
#6633CC
|
#663399
|
#663366
|
#663333
|
#663300
|
|
#6600FF
|
#6600CC
|
#660099
|
#660066
|
#660033
|
#660000
|
|
#33FFFF
|
#33FFCC
|
#33FF99
|
#33FF66
|
#33FF33
|
#33FF00
|
|
#33CCFF
|
#33CCCC
|
#33CC99
|
#33CC66
|
#33CC33
|
#33CC00
|
|
#3399FF
|
#3399CC
|
#3399CC
|
#339966
|
#339933
|
#339900
|
|
#3366FF
|
#3366CC
|
#336699
|
#336666
|
#336633
|
#336600
|
|
#3333FF
|
#3333CC
|
#333399
|
#333366
|
#333333
|
#333300
|
|
#3300FF
|
#3300CC
|
#330099
|
#330066
|
#330033
|
#330000
|
|
#00FFFF
|
#00FFCC
|
#00FF99
|
#00FF66
|
#00FF33
|
#00FF00
|
|
#00CCFF
|
#00CCCC
|
#00CC99
|
#00CC66
|
#00CC33
|
#00CC00
|
|
#0099FF
|
#0099CC
|
#009999
|
#009966
|
#009933
|
#009900
|
|
#0066FF
|
#0066CC
|
#006699
|
#006666
|
#006633
|
#006600
|
|
#0033FF
|
#0033CC
|
#003399
|
#003366
|
#003333
|
#003300
|
|
#0000FF
|
#0000CC
|
#000099
|
#000066
|
#000033
|
#000000
|
|