### CSE2325/3325 : Activity, Colour Theory

#### Optional Activity (not assessed)

• Unfortunately, monitors vary from manufacturer, nevertheless, the following exercises will help introduce you to colour and its use.

• Be sure to have your monitor brightness and contrast both fully on (high) so that white appears WHITE and black is BLACK.

• All colours used in these exercises must be pure and fully saturated unless otherwise requested. Eg. blue has R=0.0, G=0.0, B=1.0.

• Ensure your monitor is displaying millions of colours (16 or 24 bit) if possible (ie. not 256 colours / 8 bit).

• Make sure you do these exercises yourself, don't rely on the pictures on this page or the things your friends tell you. (The images on this page are too small for the relevant effects to be visible and serve only as examples.) Knowledge comes from experience! You'll learn only by doing.)

• Refer to: Itten, J. "The Art of Colour", for the book on colour theory.

Colour effects
• Run your paint program (Corel Draw, Paint Shop Pro, Photoshop) and open up a new picture with dimensions so as to fill the whole screen.

• Fill the blank image with a pure/neutral grey (50%). (This provides a neutral background environment for un-biased colour viewing.)

• Draw a white square in the left half of the grey field.

• Draw a black square (of the same size) in the right half of the grey field.

• Draw a pure yellow square in the centre of each black/white square. How does the character of yellow change when centered in black / white? (I.e. Do the two yellow squares look the same? How are they different? Try to put into words what you see.)

• Draw a pure blue square in the centre of each black/white square. How does the character of blue change when centered in black / white?

• Draw a pure red square in the centre of each black/white square. How does the character of red change when centered in black / white?

• Draw a pure green square in the centre of each black/white square. How does the character of green change when centered in black / white?

• Consider the manner in which yellow is made on a display using additive colour. Is it a primary colour? What are the additive primaries?

• Consider the way green is made using paint. Is it a primary colour? What are the subtractive primaries?

Contrast of Extension

• Different colours have different light values. This is a subjective measure of how bright a colour appears...

• Create a new image of dimension large enough to fill the screen and fill it with neutral grey as for the previous exercise.

• Draw a rectangle in blue of width 400 pixels and height 200 pixels.

• Draw a rectangle in red, starting from the left of the image extending some width across the blue rectangle until the blue and red seem exactly balanced.

• Experiment with different widths of red. What proportion of red to blue did you settle on? What did your friends settle on? Were your results similar?

• Now try the same exercise with blue and yellow.

• Are the proportions the same?

• Experiment with different colour combinations.

• Try and come up with a relative 'lightness' for each of red, green, blue and yellow. This lightness value is a relative value indicating how strongly the colour pulls your attention.

• For example, if you found that 2 parts red balanced 4 parts blue and 4 parts blue balanced 1 part yellow, your lightness values would look like this...

2-Red : 4-Blue : 1-Yellow

and you could expect that 2 parts red would balance 1 part yellow. Test your results!

• What happens if you reduce the saturation of one of the colours in a previously balanced image? Which colours are most susceptible to decreases in saturation? Which colours are least susceptible?

Here are a few sites to look at:

What do you think about the choice of colours? Appropriate? Attractive? Clear?
Have the webmasters considered colour meanings, effects and relationships?

Do the typographical decisions make the pages easier to scan or read?

Is the page layout appropriate?

Is a clear visual hierarchy established?