Web Design Colour Schemes Kelvin High School April 2009

Why Spend Time Picking Colours? We know how to add content to a Web page (HTML file). We know how to style a Web page using CSS. So why should we spend time learning how to pick colours?

Colour DOES Matter In the next two slides, you will see two different sets of colours used on IDENTICAL Web pages. [A set of colours which “work well together” is called a Colour Scheme] Which do you think looks better?

First Scheme: Blue and Orange NOTE: Mr. B picked this himself L-)

Second Scheme: “Zen and Tea” NOTE: Someone did this online (more details later in this PowerPoint)

Verdict Which Colour Scheme do you think looked better? You’re probably thinking the “Zen and Tea” one. Why did it look better?

Good Colour Schemes In general, there are a few guidelines which most good Colour Schemes tend to follow: 1.Most are based on ONE (or TWO) colours only. “Zen and Tea” is based on green. 2.Most schemes have FOUR or FIVE colours only. Everything on the page (except for photos, etc.) is one of these colours.

Good Colour Schemes 3.Many have one DARK colour and one LIGHT colour. These colours can be used creatively to replace black and white, if they are chosen correctly. Using colours which are not black or white but which can replace B&W prevents the page from looking like a piece of paper.

Colour Scheme Examples Here are more examples of Colour Schemes:

How Do We Make A Colour Scheme? Making a Colour Scheme is both easy to begin and hard to master, as this involves Artistic Expertise and Experience. Today, we will be choosing ONE colour and basing a Colour Scheme on it.

1) Choosing a Colour Unless you already have the “Perfect Colour” picked out and ready to go, you probably want to capture a colour you have seen in the world for your site. This is what we’ll be doing today…

1) Choosing a Colour The class has use of TWO digital cameras today. We can split into two groups and look for colours in the world, then capture them as images and bring them back. [Say, minutes to do this]

2) Discover the Hex Code After we have our digital images, and after we have them stored in Room 50, we can use PhotoShop (or other programs) to find out the Hex Code of our colour.

3) Website: Kuler.Adobe.Com This Website has an interactive tool which allows us to design Colour Schemes:

3) Website: Kuler.Adobe.Com NOTE: The only machine which has the up-to-date Flash Player required for kuler.adobe.com is Mr. B’s Teacher Computer. After you have found your Hex Code, you can use Kuler at Mr. B’s machine…