Slides badge

Colour Theory

Learning Intentions

  • Understand the importance of colour in digital and print media

  • Be able to explain how colour can be utilised within digital design

Success Criteria

  • I can explain why colour is very important in digital design and how it is used

Colour

  • Colour is such an important part of digital design, so much so that is considered amongst designers as the most powerful tool in digital design.
  • Colour helps a website or brand gain the attention of the user

Colour

  • Colour is such an important part of digital design, so much so that is considered amongst designers as the most powerful tool in digital design.
  • Colour helps a website or brand gain the attention of the user

  • Open the starter task on Google Classroom.

  • For each of the examples of companies, write down the colour you most associate with them.

  • Lastly, write down which company you think has the most influential brand.

Lesson starter

In website design

  • As a web designer myself, colour is the area I spend the most time working on - I spend a lot of time trying to make each website different and unique through colour.
  • It is also the most important part of making websites feel unique.
  • There are three uses for colour in website design:
    • Drawing attention to some content
    • Separating sections of content
    • Making content remain neutral and flow naturally

What do these brands say to us?

What does this website tell us?

This website is about learning English online. What can you tell from the colours?

What does this website tell us?

Find two websites on your computer. Identify the colours used on the website.

Activity

Just how important is colour?

  • When we develop a website, or any other digital media product, colour is one of the first things we need to think about – before any layout is thought about, before any content is added and before anything is drawn.
  • This is because a brand normally helps to develop a layout.
  • Each colour means something different to the user and also brings benefits and disadvantages. For example, red is considered a bold colour that can draw attention but it’s also considered the colour for danger!
  • Colours are all psychological. 

Red

  • Red is a colour that represents something bold, but also represents danger or anger or power.
  • Red actually increases your heart rate and makes you breath more heavily.
  • We can use red to draw attention to something very easily.

Yellow

  • Yellow suggests hope and optimism but also stimulates creative energy. It’s brightness is particularly good for catching the customer’s eye.
  • Yellow can also be used as a warning (not danger) colour on a website or digital publication.

Orange

  • Orange combines red and yellow and combines the cheer and energy of yellow alongside the boldness of red.
  • Orange is best suited to websites that target something fun or youthful.
  • Darker orange is also a bold colour, and when combined with other contrasting colours, can be used to draw attention.

Purple

  • Purple suggests something mysterious and sophisticated.
  • Purple is often also associated with royalty, especially in the older times.
  • Purple is often seen to encourage people to be creative.

Pink

  • Pink suggests beauty and feminine. Pink is also a colour of friendship.
  • Pink is one of the most underused colours on the web and is often limited to websites dedicated to girls and women.

Blue

  • Much like purple, blue is often associated with royalty.
  • It is also associative with reliability, trust and commitment.

Using colour

  • Colour should be limited to only a handful of colours across a website or digital publication.
  • Too many colours can be distracting to the user or reader of the website or digital publication.
  • Over this course, colour will be an important part of many of the digital media formats that will be used.
  1. Find a bad website which uses too much colour on it. 🤮
  2. Find a website which you believe uses colour really well, explain the colour scheme used here.

Activity

Complimentary colours

  • Colours across from each other on the colour wheel are said to complement each other.
  • Those colours are said to have the highest contrast (in other words, the biggest difference)

Red, Green and Blue (RGB)

  • The colour wheel was mentioned earlier as being composed of three primary colours, red, blue and yellow. These are known as the traditional primary colours since they relate to the way in which printed media and art are composed using pigments rather than the composition of light.
  • In computer science we are more interested in the colours produced by the magnetic spectrum of light.

Red, Green and Blue (RGB)

  • Computer graphics are made up of pixels. Pixels are made up of three component colours: red, green and blue.
  • Looking closely at a computer screen you can actually see each of the different pixels in a grid.

The RGB colour wheel

  • Visit https://www.colorcombos.com/ and select a colour scheme that you believe suits your brand.
  • Develop your own brand using colours and colour schemes that would suit your product or group website, ensure that you incorporate this across your website.

Task

Representing colours in web development

  • In computer science, colours are often represented using what are called hexadecimal colour codes.
  • These use 16 different numbers or letter to represent each colour with 0 being the weakest and the 16 being the brightest. Since red, green and blue can be combined to make any colour, hexadecimal colours represent red, green and blue.
  • E.g. 
    • f00 is bright red whereas a00 is a darker red
    • 0f0 is a bright green whereas 0a0 is a darker green
    • ff0 is a yellow colour
  • Hexadecimal colours always start with a # sign.

Hexadecimal colour wheel

  • Below is a colour wheel example that allows you to create a hexadecimal colour representation of any colour.

Bringing colour to your website

Now that you have your own brand logo, theme your group website using what you have learned about colour today.

Presentation Overview
Close
JB
Colour Theory
© 2020 - 2024 J Balfour
13:34 | 29-04-2024
Join Live Session
Start Remote
Save Progress
Slideshow Outline
Presenter Mode
Widget Screen
Canvas Controls
Random Selector
Timer
Volume Meter
Binary Converter
Python Editor
Show Knox 90
Provide Feedback
Help
!
Keywords
    DragonDocs Management
    Random selector
    Sections
      Binary conversion
      Denary to binary conversion
      Binary to denary conversion
      Feedback 👍
      Accessibility

      Apply a filter:

      Dark Mode
      Bold Text
      ×
      All slideshow files