Colour Theory
Colour theory was first discovered in 1665 by Sir Isaac Newton who came across light being separated into colour through a prism, he figured out that directing light into a prism dispersed the light into a spectrum of colour that we use today. These colours are red, orange, yellow, green, blue, indigo and violet.[6]
These colours are most commonly represented as a wheel of colour in most design applications like Adobe Illustrator and other applications like Affinity Designer and Adobe Photoshop.
Primary Colours
Primary colours are referred to as colours that cannot be created by mixing other colours together, these are the purest form of colour that can be achieved. The traditional primary colour set that we know today is red, yellow and blue which was heavily used throughout the Bauhaus design movement as they set themselves limitations to what they can use to create simplicity and modernism in design.
These are group of colours that can be mixed to achieve a wide variety of other colours, for example mixing the colours red and yellow will give you different shades of orange depending on how much red or yellow is used, just like mixing blue and yellow will give you different shades of blue depending on how much blue or yellow is used.[6]
Mixing these primary colours together will result in what we know of as secondary colours, these would be orange, green and violet as they can be achieved by mixing two primary colours together. Tertiary colours can then be created by mixing the primary and secondary colours together to create different colours that can be used.[1]
Analogous Colours
Analogous colours are referred to as colours that live next to each other on the colour wheel, these will often have very minimal chromatic difference between them and are usually a mix of primary, secondary and tertiary colours put together to make a colour palette. An example of this would be having a colour palette of red, a red-orange, an orange and an orange-yellow.
Complimentary Colours
Complimentary colours are colours that are opposites of the colour wheel, for example red and green that we all see around Christmas time. These colours are use to compliment each other, hence the name, and to increase contrast between the two colours. Where analogous colours have very subtle similarities, complimentary colours are polar opposites and are often used in modern design to bring more attention to certain elements or important information.[6]
Subtractive & Additive Colour
Subtractive Colour
Subtractive colour is a colouring process that is commonly used for printing and refers to colour pigments as opposed to additive colour processing which refers to colour in light. One mistake many amateur designers make is designing for print mediums on a screen and not considering how that colour will transfer onto paper when printed. More often than not, the colour displayed on screen will not translate the same when printed as colours on our screen often appear brighter and more vibrant.
We often refers to subtractive colour by the CMYK colour process, Cyan, Magenta, Yellow and the key colour which is known as the colour Black. The subtractive colour process works by subtracting the primary colours of the CMYK colour wheel from white to create a variety of different colours that can then be translated and printed onto paper or other printing formats. The primary colours of the CMYK colour wheel are Cyan, Magenta and Yellow which is a lot different from the additive colour process of RGB which is what the majority of us see today on our computers and hand held devices.[1] Secondary colours are created by adding the two neighbouring primary colours together to create either Orange, Green or Violet. From those secondary colours, tertiary colours are then created by adding the primary and secondary colour together to get a wide range of colours to choose from for each project. In printing, the term full-colour printing is often used within the design and printing industry and refers to the use of all colours within the CMYK colour wheel, Cyan, Magenta, Yellow and Black.
Additive Colour
Additive colour is a colouring process that we all see and use on a day to day basis, this is what is used in everyday objects such as traffic lights as well as our smartphones, tablets and computer screens. Additive colour is often referred to as the RGB colour system which when added together create white. The primary colours of this process are Red, Green and Blue and are often a lot more vibrant and brighter than colours from the CMYK colour palette.
Similar to the CMYK colour wheel, secondary colours are created by mixing the neighbouring primary colours together to create more colour options within the RGB colour palette, these secondary colours are Yellow, Cyan and Magenta. These colours are then mixed together to create a range of tertiary colours and complete the RGB colour spectrum.[1] The RGB colour process has a wider range of colours to choose from in comparison to the CMYK colour model as it allows for the designer or digital artist to continuously add colours together to create new and interesting colour variations. These colours are often more vibrant than the CMYK colour spectrum.[2]
Colour & Accessibility
Colour is often a common issue when it comes to accessibility as a lot of people have visual impairments, these can either be in the form of bad eye sight or through genetic conditions such as colour blindness. It is important to check the contrast between colours to ensure they are legible and visible to everyone with a visual impairment at both large and small sizes.
For online applications and website you should generally have a 3:1 contrast ratio between colours to ensure that the application is accessible to everyone both with or without a visual impairment, anything below a 3:1 contrast ratio may be difficult to see for some users. These are usually classified into categories of A, AA and AAA as a representation of how good the visual contrast is between colours.
There are a lot of tools out there to help you check the contrast ratio of the colours in an application, Adobe have an accessibility checker in their colour tool, Google Material Design also have similar tools in addition to many others like webaim.org and colorcontrast.cc
Colour Blindness
Colour blindness is a major consideration when it comes to designing products for both digital and print mediums. There are many different types of colour blindness and colour deficiencies that people can be born with but there are 4 main colour deficiencies that are frequently heard of, these include Deuteranopia, Protanopia, Tritanopia and Monochromacey.
To a person without any colour blindness or colour deficiencies, also known as Trichromatism, the human eye can interpret up to 10 million different colour variations and see the full spectrum of colour from red through to blue and purple. To someone with colour blindness they may see different colours depending on the type of colour deficiency they are born with, for example some individuals may interpret red tones and hues as being more brown or even just different shades of grey if that person has a monochromacey colour deficiency.[3]
Deuteranopia
Deuteranopia is where someone has trouble seeing red and green colours, this is one of the most common colour deficiencies in todays society with almost 6% of the male population having problems with interpreting the colours red and green. They may interpret these colours as different tones and shades of brown as opposed to their true colours, red and green.[3]
Protanopia
Similar to Deuteranopia, Protanopia is another form of red-green colour blindness. People with protanopia find it difficult for their eyes to interpret the colour red, whereas people with Deuteranopia find it more difficult to interpret the colour green. They will often perceive the colour green as yellow tones and reds will often appear to be more brown in colour that its true form.[4]
Tritanopia
Tritanopia is a form of yellow and blue colour blindness, this form of colour deficiency isn’t too common and is only seen in about 1% of the worlds population, both male and female. People who have tritanopia will often have a normal interpretation of the colour red and green but will often get confused with blue tones and hues, they will often confuse blue with green and confuse yellow with violet colours.[5]
Monochromacey
Monochromacey is where someone can only see different grey tones, this is often referred to as being totally colour blind. Instead of seeing colours in their true form they will perceive them as different shades of white, grey and black.
Colour Psychology
Colour psychology is something that we all subconsciously are aware of, we see this most commonly in road signs and traffic lights where the colour red is often associated with danger for example running a red light with traffic passing would be extremely dangerous and the colour green in off associated with positivity and safety, for example when a traffic light turns green it indicates that it is safe to drive the car through that specific set of traffic lights without the worry of a car driving in the side of you. This is also seen in road signs where yellow is often used as a warning for road works and other forms of notices that drivers need to be aware of.
Colour psychology is often used in the design industry to help convey emotion and feelings to the viewer. An example of this is the colour blue being perceived as trustworthy or calming, this is why it is common for a lot of financial banking organisations, like Nationwide and Danske Bank, to use the colour blue within their branding as they want to portray to their customers and clients that they are reliable and trustworthy.
Colour & Culture
Colours can have very different meanings in different cultures and countries across the world, although there are a lot of similarities in colour psychology and what their subconscious meanings are, some countries and cultures have their own meaning.
Black is often associated with death and mourning across the world, this is most commonly seen at funerals where everyone will, more often than not, be dressed in black clothing to represent the death and/or mourning of an individual. In western society, the colour white is often associated with purity and cleanliness and usually used to symbolise marriage whereas in Far East countries and throughout Asia the colour white is often used to symbolise death and mourning. This is also similar to the colour red, in western countries the colour red is often used to represent danger or blood whereas in far east countries like China the colour red is used as a symbol of good luck.
Another common use of colour is in genders, often when new borns are brought into the world and their gender is revealed they will often be surrounded by the colour blue or pink, depending on if it was a boy or a girl. In the past, white was the neutral colour used for all babies and this gradually changed throughout the 19th century as companies realised they were able to make more money by selling goods in different colours. Although this will change in modern society with gender neutrality and identification, I personally believe we will resort back to using white as the neutral colour for the majority of new borns as people believe that gender is not defined by the sexual organs on your body.
We often seen the same colours used in flags for each country in the world, the colour red is one of the most used colours in flags as it signifies the blood spilt for independence and freedom to get where they are today.
Material Design System
The Material Design system is a design system that was developed and released by Google in 2014 with the main purpose being to create a new visual language through principles of good design.[7] This design system has been widely adopted by many companies across the word as a starting point for their own design systems as it features all the key principles of good design and user experience. The material design system can be seen throughout all of Googles products from software systems like android for mobile devices and Google applications like their web browser, Google Chrome, and their email platform, Google Mail.
The system is primarily based on grid layouts and focuses on providing responsive design, in addition to this the system also features a number of different colours from a primary colour palette that is commonly used across all applications and branding to secondary and complimentary colour palettes that can be used in your own designs to help create a well balanced design that is also harmonious.
In addition to creating the material design system, Google also created a useful tool to allow designers to create their own colour palettes through a similar process, allowing them to choose a colour and their tool will give you secondary colour options that would work well with the colour selected in addition to other complimentary colours that would work well with it.
Pantone Colour Matching System
The Pantone Matching System (PMS) is a colour matching system used by designers and printers that are usually printed in the form of a booklet or swatch pack. Pantone colours are single colours that are often referred to as spot colours and allow designers and printers to accurately match colours by comparing them to similar spot colours from a PMS booklet. Although Pantone colours are used in print rather than digital, they are not the same as the CMYK colour model that I covered earlier.[1]
You will often see a spot colour within a Pantone Colour swatch having a corresponding HEX code, HSB value, RGB value and CMYK value. This is to allow designers to get that exact colour in either print or display and allow them to see what that colour will look like on different screens and different types of paper as colours will appear different on cheap paper as opposed to high-quality glossed paper.
References & Sources
- Dabner, D., Stewart, S., Zempol, E. and Vickress, A., 2017. Graphic Design School. Thames & Hudson.
- Ashworth Creative. 2021. What is the Difference between CMYK and RGB Colors? – Ashworth Creative. Available at: https://www.ashworthcreative.com/blog/2014/06/difference-cmyk-rgb-colors/.
- Healthline. 2021. Deuteranopia: Red-Green Color Blindness. Available at: https://www.healthline.com/health/deuteranopia.
- Protanopia – Red-Green Color Blindness – Colblindor. 2021. Protanopia – Red-Green Color Blindness – Colblindor. Available at: https://www.color-blindness.com/protanopia-red-green-color-blindness/.
- Tritanopia – Blue-Yellow Color Blindness – Colblindor. 2021. Tritanopia – Blue-Yellow Color Blindness – Colblindor. Available at: https://www.color-blindness.com/tritanopia-blue-yellow-color-blindness/.
- Lupton, E. and Cole, J., 2015. Graphic Design: The New Basics. Princeton Architectural Press.
- Wikipedia. 2021. Material Design – Wikipedia. Available at: https://en.wikipedia.org/wiki/Material_Design.