Larry's Graphics Web Design

Sections

Inside

ZipArchive

Samples

Tutorials

Banner Factory

Forum

Colours

Introduction to Colours

Colours are probably the most important and powerful tool in web design. Just as using the
wrong colours or colour combinations can ruin an otherwise beautiful page, using the right
colours can make a page turn from being an ugly duckling to a beautiful swan (if you pardon
the metaphor).

By knowing how to use colours the right way you can get more traffic to your site as well as
preventing first time visitors from hitting the back button, which they are likely to be doing if
your site looks uninteresting. The trick is to make the visitors want to see more even if it isn't
about anything that really interests them.

Menu

Fonts

Background

Images

Indents

Tables

Linking

Web safe colours

The web safe colours are the 256 colours you can find in every graphic program (as well as
in many other programs) as the default palette. These colours are safe to use in the sense
that every browser will display them the same way. It is also these colours the .gif formats
supports.

Luckily, you are not bound to use only the web safe 256 colours but do keep in mind that the
further you get from the original colours the bigger the risk of the page not looking the same
in all browsers. Therefore, a good advice is to leave the wildest experiments to the graphics.

How to choose the right colours

The best starting point is always your top graphic. This can be either a logo or a header holding
the site's name. Whether you have made it yourself or got it from the Net is irrelevant. It is the
graphic itself, or rather the colours in it, that is important. It is these colours you have to work
with as I will demonstrate here.

Let's take the header graphic on this page as an example. Look at the colours. How many can
you see? Well, there is actually quite a few but at least three of them are noticeable: Blue, pink
and red. However, none of these three is pure. They are a mix of other blue, pink and red
shades.

Now take a look at the text. What colour is it? Well, I call it Satin but it is actually a dark toned
pink. And pink was one of the three colours in the header graphic. The bar below the header
graphic is next to be looked at. There is a thin, bluish line, a dark toned red dot and an almost
flesh toned red text.

Blue and red. Again colours found in the header graphic. (To be honest I think the text is a bit
too light, but that's my headache). Let's now take a look at the emblem to the left of the header
graphic. As you can see it is mostly red. The two letters are very light blue with a greenish tint.
Green? Hello, that's not in the header graphic!

No, it isn't. At least not as far as we can se. So why the green? Why not yellow or white? Well,
green can be used since there is no other colour between green and blue. White could also have
been used since the background is white. Yellow is out of the question. There is no yellow in
either the graphics or the text therefore using it would create an unwanted distraction.

You can use more than three colours as long as they all are represented, one way or another,
in two or more places. Text, graphics and background should all be a part of a unity and work
together to make the site look great. Using colours too far apart or totally different colours in
different graphics will only look messy. It is also important to use the same colours throughout
the site.

How to specify text and background colour

The colour of both text (and links) and background is specified in the <BODY> tag. When
specifying colours here you can only use the names (red, blue etc.) for the most common
colours. For other colours you will have to use hex values. The hex values are series of six
digits and / or letters preceded by a #. The hex value for this text colour is #800040 (hex = hexadecimal)

This is what the <BODY> tag looks like (without any colours specified):

<BODY BGCOLOR="" TEXT="" LINK="" VLINK="">

When I have specified the colours for this page (and all the others in this site) it looks like this:

<BODY BGCOLOR="WHITE" TEXT="#800040" LINK="#800040" VLINK="#1C8ADB">

As you can see the background colour is specified using its name, but I can just as well use the
hex value for white which is #FFFFFF. Note also that I have the same colour specified for both
text and link. Visited links I have set to be displayed in a light blue tint.

If you (like me) are not so familiar with the hex values here is a link to a very useful colour chart.

Colour chart here!

If you need additional help with HTML and such post your questions in the help forum

b

-- Close this window to return to the main page menu --