Picking Colors For Your Website
Whether you're building just one website, or a half dozen a
month, one of the first things you have to do is decide on a
color scheme. You may have no background in design, or you may
be a color-blind web designer. (No, really, I know one!) Either
way, it's not always the easiest task to decide on a color
scheme for your website. While blue is always an option, let's
face it, blue is one of the most over-used colors on the web. I
have to admit, I've used it plenty of times. But even if you are
going with a blue theme, what shade should you use? What
complementary colors should you use? The answers are not always
apparent.
First, let's discuss the meanings of some basic colors. Keep in
mind that these meanings can vary slightly from country to
country.
Red is the color most commonly found in the nations' flags. It
can also signify passion, anger, war, power, danger or even
love. Red tends to stand out when among other colors.
Green is the national color of Ireland. It's also the color of
money. It can signify greed, envy, jealousy or nature. Green is
considered a cool color.
Blue can signify sadness. As the color of the sky and ocean, it
is also said to be a relaxing color. Along with green, blue is
considered to be a cool color, unless it's a darker blue.
Purple is the color of royalty. It is said to help develop the
imagination of children. Some sources say that almost 75% of
pre-adolescent children prefer purple to any other color. It
combines the positive aspects of blue and red, and can even
convey romance.
Yellow can signify cowardice. It can also signify support of
troops, sunshine or even food. It occasionally conveys jealousy
and deceit.
Orange can signify joy, sunshine, enthusiasm, happiness and
creativity. As a combination of red and yellow, it conveys many
of the same feelings. While not standing out quite as much as
red, it does not have much of the negative association that
yellow has.
White can mean peace. It also means light, success, simplicity,
purity, good luck and cleanliness.
Black conveys secrecy. It can also represent sophistication,
evil, illegality or just plain darkness. Black is often
considered the color of grief and even death.
So, by now you should have picked the main color or colors
you're wanting to use on your site. It may be that just a couple
of colors is fine, as in this site. On the other hand, you may
need more colors than that, as evidenced on this site. So how do
you pick all those colors without having a degree in graphic
design?
First off, keep in mind that you shouldn't pick too many colors.
Really, a scheme that uses five colors probably has too many. On
the other hand, in your design, fading from one color to another
(a gradient) in the header or elsewhere may be okay, and not
count as many different colors. There's an example of gradients
on this site.
There's a really neat tool out there for non-graphic designers
known as a color wheel. There are a variety of these online.
Some of them will actually generate a whole color scheme for
you, others will just pick a couple of complementary colors.
When using these, remember that you don't have to use every
single color they suggest.
- Col
or Scheme Generator
- Color
Code Combination Chooser
- Color Palette
Generator
So now you have the entire color scheme for your website. So
what should you do with it?
The main text of your website should generally be on some light
color. If this is the case, generally black is a good choice for
the text of the site, regardless of whether or not that was one
of the colors in your scheme. In rare cases, a dark color is
okay for the background. In those cases, white or some other
very light color should be used for the text.
Any borders, header graphics and text headings should use the
other colors from your scheme. With the text headings, it's a
good idea to still use a color that contrasts well with whatever
background it is on. If you have a light background, as will
often be the case, use a dark color from your color scheme for
the headings. And the reverse applies as well.
Make sure you also customize your links. Make sure they are a
distictly different color from your normal text, while not
blending too much into the background. If you decide to set a
different color for links that have been followed and/or are
being hovered over with the mouse cursor, there are some
guidelines to follow. Generally, a lighter or darker shade of
that same color you are already using will work well. If you
want to use something different, picking a gray that stands out
from the background often works well.
There you go! Now you have a nice color scheme and have applied
it well to your website. Your website, with a good color scheme,
will go far in conveying professionalism.