Add Some Colour to your Life!

Some Brief History

I come across colour on a daily basis but I never really stopped and wondered about the components of colour. Colour theory dates back before the 15th Century and encompasses mathematics, physics and chemistry. The Bauhaus school understood how colour is formed and the relationship between the different colours. Staff and students in the Bauhaus movement developed colour theories that evoke particular moods and emotions in conjunction with different architectural forms and designs.

Colour Systems

There are 2 primary colour systems by which is colour is reproduced.

Additive – Any source that emits or radiates light uses additive colours. Example a monitor uses additive colour to generate all the colours that you are capable of seeing. The colour reproduced varies according to the wavelength of that particular light source within the visible light spectrum – that is visible to the human eye. A mixture of the different wavelengths creates different colours.

The additive colour is based on the primary colours Red, Green and Blue (RGB). The RGB values are widely used in anything that is represented on screen.  It is based on decimal numbers and is related to the pixels on the screen. So for example when the Red value is set to 255 a pixel on screen is turned on. RGB can be set either in decimal or hexadecimal format. In additive colours, white is a combination of R, G, B set to 255 respectively and black is the absence of colour where R,G,B are set to 0 respectively.

 RGB

The other colour system is subtractive and works on the basis of reflected light.  Meaning that a particular colour pigment reflects different light wavelengths that determine the apparent colour to the human eye. Example how colour is seen on printed material such as a book or magazine. Subtractive colour has three primary colours, which are Cyan, Magenta and Yellow (CMY). Contrary to RGB, white is the absence of colour, while black is the combination of colour. There is a 4th element K (key) – CMYK, which is essentially black.

 CMYK

The colour wheel shows the relationships between colours. As I wrote in my previous blog post, the colour wheel is comprised of the primary, secondary and tertiary colours. The colours that are complementary to each other are apposite to each other, those that are analogous to each other are adjacent.

Components to a Colour

There are different shades/tints, saturations and hues to a colour, which lead to the three primary components of colour.

Hue: This represents the actual base colour without any tint or shade. For example a perfect colour of yellow will be positioned at 56° on the colour wheel.

Saturation: How saturated or rich the colour is – the perceived intensity of a colour. A low saturation is less of the overall colour, when a colour is fully desaturated the colour eventually becomes grey. Saturation is a percentage between 0 and 100%. At 0% saturation the colour becomes grey.

Brightness: How bright a colour is and is also represented between 0 and 100%. Example a green colour at 0% brightness is black, while the same green hue and saturation at 100% brightness will be the full green colour.

 Hue saturation

There are online colour mixing tools to help designers (and myself) to come up with colour combination choices. The Adobe Kuler aids to generate an entire colour scheme from a single base colour, you can also upload images and extract colours from them and is also integrated with the Adobe Creative Suite. There is also Color on the Web that accepts a single colour in hexadecimal or RGB and outputs a set of schemes to be used for online media.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s