FIT3084: Colour

In the previous lecture:

• Typography is a vital but often overlooked aspect of communication using text.
  
  
• Ensure the typeface you employ is appropriate for your message.
  
  
• Use typefaces conistently (maybe one typeface from each of the serif and sans-serif families) on a site/page.

In this lecture:

• How are colours specified / created artificially?
  
  
• What effects do colour combinations have?
  
  
• What are appropriate uses for colours?

What is colour? A can of worms! A sensation The stimulation of the eye's retina

The wavelength of light hitting the retina determines the cones (structures in the eye responsible for colour vision) which will be stimulated and the messages which will be sent to the brain.

Subtractive Colour

All materials contain pigments which Absorb Reflect & Transmit LIGHT

Paints & dyes are pigments in convenient, human useable form!

Subtractive Primary colours are the basis for all other colours. (What primary colours are used for printing purposes?) Red Yellow Blue

Secondary colours are constructed by combining equal proportions of primary colour. Orange......Red + Yellow Purple........Red + Blue Green.........Yellow + Blue

Subtractive - pigments filter out light of different wavelengths from white light, leaving coloured light to be detected by our retina.

Eg. A white page of paper appears (and is called) white because it is reflecting all wavelengths of visible light incident upon it.

If one were to apply blue ink to a white page, light hitting it would be filtered by the pigment in the ink (which only transmits blue light). This blue light would hit the white page, be reflected back through the ink (where it is filtered again) and may hit a person's retina. That person may well exclaim "Blue!".

What primary colours are used in printing on white paper? (Inspect a colour newspaper with a magnifying glass to find out.)

Colour Wheel - a diagramatic representation of the relationships between colours. The primary colours form the verteces of a triangle around the circumference of the wheel. Secondary colours fit between these, tertiary colours flesh out the circumference to any resolution you please.

Intermediate colours are constructed by combining two primaries in a ratio of 2:1.
(These colours lie between the primary and secondary colours on a colour wheel)

Tertiary colours are combinations of the primary colours in any other proportion.

Tints & Shades are series of colours obtained by adding white (for tints) or black (for shades) to a colour obtained above.

If you really want to understand what these terms mean, there is no substitute for buying some white, black, red, blue and yellow paint and some white paper... get your fingers dirty. (Take my word for it, this will give you a better understanding of colour than learning these notes ever will!)

Additive Colour

• Computer displays add light to black (as opposed to subtracting colour from white).
  
  
• Three guns in a Cathode Ray Tube (CRT) illuminate the screen in a closely spaced grid of tiny dots (pixels).
  
  
• There is one gun for each of the additive primary colours...

Additive colours may be specified by giving intesity values for each of the Red, Green and Blue components at a single pixel.

Additive colour specification in HTML

R, G, B each specified by hexadecimal pair (RRGGBB).

Each pair may range from 00 (off) to ff (fully on).

• Mid-grey....(hex 666666)
• Black..........(hex 000000)
• Red.............(hex ff0000)
• Blue............(hex 0000ff)
• Green.........(hex 00ff00)

Specify basic colours by name
(These will be interpreted by the browser - check the HTML source for the preceding sentence!)

Here's a colour wheel for the additive system.

The primary colours still form a triangle, the secondaries fit between these, and the tertiary colours flesh out the circle.

• Similar colours lie next to one another on the colour wheel (eg. blue & purple)
  
  
• Complementary colours lie opposite one another on the colour wheel (eg. blue & yellow)
  
  
• Contrasting colours may not lie opposite one another on the colour wheel, but they don't lie close to one another either! (eg. blue & red)

Hue, Saturation & Value (HSV / HSB)

Hue is the 'colour' of a colour, e.g. that which allows you to identify it as a 'blue' or a 'red'.
Saturation is the '-ness' of a colour, for example its 'blueness' or 'redness', also loosely called intensity. (A more saturated red is a more intense red)
Value is the amount of light or dark in a colour. Sometimes called 'Brightness'.

Colour Relationships

Groups of colours relate differently to one another depending on their properties.

Discordant colours 'jar'.

What colour is a...

bee? fly? construction vehicle? Would you step on a grey bee?

battleship? tiger? elephant? Have you ever seen a black and yellow elephant?

Harmonious colours 'relax'. (Especially if they are not highly saturated) Imagine a dentist's waiting room painted black and yellow!

Colour Effects

Colour relationships can be used to encourage a viewer to feel uneasy or at ease, comfortable, disoriented or cramped.

Warm hues (yellow <-> red) encourage viewers to feel heat or warmth.
Warm hues move forward in a composition.
Cool hues (blue <-> green) encourage a cold or cool feeling.
Cool hues sit backward in a composition.
Here is an excellent illustration of colour depth effects...

Colours can look energetic and busy, or calm and easy going.

Colour Meanings

Colours have culture-specific meanings

Love, passion, heat, flame, feminine power

Fertility, peace, nature, Earth

Truth, clarity, dignity, power

Energy, joy, lightness of being

Royalty, wealth, sophistication

Masculinity, stability

Death, rebellion, darkness, elegance

Lightness, purity, cleanliness, emptiness

Colours may be associated with people and professions (often through trade clothing)

There are many other considerations in choosing colour for your displays. NASA has an interesting website on this very topic.

Practicalities of Web Additive Colour

Different computers have different

• display hardware
  
  
• operating systems
  
  

Hence colours ain't colours!

• What looks great on a Macintosh or SGI machine might be hard to see on a Windo$e PC.
  
  
• Some PC's can display only 256 colours, most Macintosh's and SGI's can display millions of colours.
  
  
• Windo$e 3.1 reserved 40 colours from its already limited palette as 'system colours' leaving only 216 colours to work with!
  
  
• Netscape went and built a 216 colour palette into its browser!
  
  

So...

• If you only use the 216 colours in the browser-safe palette, they will display cleanly.
  
  
• If you use colours outside of this palette they may be displayed using dithering.
  
  (Many of the images in these pages are dithered... look for the tell-tale dots that appear to be of the wrong colour in expanses of otherwise uniform colour.)
  
  
• Dithering can look terrible on synthetic images.
  
  
• Dithering may not be noticeable on images captured using a camera or video.
  
  

  TIP: To obtain web-safe colours when using hexadecimal colour specification, only use the following colour component values: 00, 33, 66, 99, CC, FF Here is the web-safe palette you can obtain using these colours...

• Two systems for creating colour are used: additive & subtractive colour systems
  
  
• Additive colour systems are applicable for producing images on a CRT display.
  
  
• Additive colours may be specified in a number of ways including RGB component values or HSL values.
  
  
• Different colours have different effects on viewers when presented in different combinations.

Courseware | Lecture notes

©Copyright Alan Dorin 2008