Using Colors Intelligently in a Website

In this lesson, we will learn about using colors intelligently in a website and try to enhance our website's look and feel and make it professional. Later, we will enhance this concept using CSS styling.

You've seen beautiful websites, and you've seen ugly websites. There are many, many things that go together in creating a beautiful website, but only two basic things that ruin the ugly ones. The first is clutter - too much going on just makes the eyes shut down, and the fingers click to another site.

The second one is poor design, usually due to color.

Great color choice can make a website perfect. It can also completely ruin a website. For instance, almost any color photo site using a black background looks better because the dark background makes the colors in the photo look more vibrant. Online color comics usually use a neutral background with just a dab of color, like a grayish lavender. And for the best readability, a lightly colored background and text just shy of black is generally easier on the eye than stark black and white.

Things that are bad are much easier to identify: red text, blue background. Red text in general. Dark text on a dark background, or light text on a light background. In general, your web content should not make your reader cross his or her eyes.

But you also have to match color well. A good site for color design is Color Schemer which will give you plenty of compatible color matches; don't let the complementary/tetrad gobbledygook throw you, just pick a row that you like and use that to set up your colors. To get lighter or darker colors for text, just change the "S" percentage up or down (S stands for Saturation).

Make sure you record all the colors you're using on your site in a separate text file so you'll be able to easily access them for other purposes, like graphics creation. And use the same color set throughout your website to keep things consistent. It gives your site a professional look.

You'll learn more about using colors to create areas, sidebars, and other design tricks when we get to tables.

If Graphics Catch Your Attention

If you're really falling in love with color and graphics, I recommend going out and picking up an older version of Paint Shop Pro. Every version from about 5 on up is ideal for making great web graphics, and though the harder parts have a steep learning curve, it's easy to get started with simple graphics in this program. The full current version is close to a hundred dollars, but you should be able to find older ones either at the Jasc website, at Amazon, or on eBay. The later versions of Paint Shop Pro also have a nice animation program attached for making animated gifs.

Things to learn about in PSP: saving gifs and jpegs, using transparent colors, and playing around with the many different colors to learn how they work together. That's in addition to all the things you'll be doing anyway. Extensive discussion on graphics is outside the scope of this tutorial, but you can learn a lot just by playing around.

Try This:

Go to the color schemer and find a color set you love. Reset your sandbox pages to this scheme.

In this lesson, you have learnt about using colors intelligently while creating a website which is professional and pleasing to the visitors' senses.