Colors
Toolkit > Design and Graphics > Colors
Colors
Show
Hide
Today, it is virtually impossible to find a site totally devoid of any colors. Colors enhance the overall appeal of every site, and will help to create a visual feast for your viewers.
Colors, like art, can be extremely subjective. Your favorite color may be red, but your viewers may not share your liking. It is impossible to decide on a color that is universally appreciated.
As a web designer, you should strive to present your website in colors which you think is best suited for the site's purpose. Colors should complement, rather than overpower your content. To determine which colors suit your website best, we have to first understand the science of colors.
TOP
Color Theory
Show
Choosing Colors
Show
Hide
How much color is too much color?
So you love rainbows? Do not express your love for them with your website. Honestly, how would you like to view a website, with every element of the page decked out in a different color? Having too many colors on a single page is a no-no. Though it may seem nice, it is too glaring for your viewers. They will become so distracted by the spectrum of colors they see on the screen that they become less able to focus on the content – the crux of your website.
Avoid using too many colors. Limit the number of colors on your webpage. Come up with a color scheme.
Choosing a color scheme
A color scheme is a set of colors which your website revolves around. Color schemes are often made up of colors which complement each other.
Different sets of colors appeal to different groups of people. Young children may favor bright and cheery colors, while adults may go for darker, more subdued colors. Consider your target audience and choose a suitable color. (If you were a boy, you wouldn't want to visit a bright pink site would you?)
Tailor your color scheme to suit the contents of your webpage. Stick to the same color scheme throughout your entire site. Resist the temptation to change your color scheme for every individual page. It is acceptable to have different color schemes for different sections of your site. But overall, remember that colors are an integral part of your site, and they contribute to the overall feel of your website. If your colors are unappealing, chances are, viewers are not likely to visit your site again.
TOP
Background and Text
Show
Hide
Background colors are important. Usually, the background color is the first thing that viewers will see, and viewers will form their first impression from the site. You may choose to use dark colored backgrounds, with light text. Alternatively, you may use a light colored background, with dark text. This way, your text will stand out clearly. At all costs, avoid using background colors which are too similar to your text, as your text will simply fade into the background.
When it comes to text, it is all about readability. If your viewers cannot read it, they WILL NOT read it. Stick to common font colors like white or black. Bright colors like pink and orange would be an eye sore for your viewers. Also, avoid light colors such as pink and baby blue, as viewers may have difficulty reading them.
TOP
Colors on your Webpage
Show
Hide
"Any color can be represented by a specific combination of the three primary colors: Red, Green and Blue. The composition of the primary colors can be adjusted to create different colors, and is represented in a set of three values. These values range from 0 to 255.
Yellow can be represented in the form: 255, 255, 0. The first number represents the red, the second represents the green, and the last represents the blue. Therefore, a pure blue color would then be 0, 0, 255. The lower the number, the lighter the color.
White is produced by the combination of the highest amount of all three colors, so the code for white is 255, 255, 255. Black, on the other hand, is produced by a lack of other colors, so the code for black is 0, 0, 0.
In real life, most people would call pink 'pink'. We do not bother if the pink is light, dark, bright or dull. When designing web pages, we have the flexibility to choose the shade of pink we want. Because your definition of 'hot pink' may differ from others, color codes are represented using hexadecimal numbers. A common value for each specific color means that all the computers would display the same shade of color. This way, the colors which you want will come out as you want them to.
It is not common practice to memorize hexadecimal numbers, as most web designing programs allow you to choose your colors from the palette provided. Rather than have you input the 6 digit hexadecimal code. However it is good to know some common hexadecimal codes, such as Black (#000000) and White (#FFFFFF)
TOP
Useful Web Resources
Show
Hide
A list of common hexadecimal color codes may be found at Wikipedia: Color.
A useful utility can be found at Colors on the Web. The wizard enables us to vary the composition of RGB, to produce colors as well as view their hue, saturation and tint variations and their respective complementary colors.
TOP
Primary Colors 
Secondary Colors 
Complimentary Colors