A Splash of Colour – Art + CS

Logo Design by FlamingText.com


There are many ways to incorporate art and CS that engages students and embraces creativity. If we know that computers read data then we can focus on data representation with images, colours, designs and so on. Students need to understand how digital systems work, specifically how input → processing → output work together. They need to know how numbers and patterns play a crucial part in the processing of data.  We can teach kids coding however not all students are going to use this in their future rather they will use the skills they have developed to through the process. This places a huge emphasis on problem-solving, collaboration, communication, innovation, reflecting, creativity and critical thinking.

The activities within this post are examples of how activities can be adapted as the students move through their education going from one building block to the next. It’s the throughlines we see in the curriculum that helps teachers to truly personalise learning to allow all students to succeed.


Colour Systems

Many art teachers will teach students from a young age the primary colours. However, did you know that there is more than one lot of primary colours? Primary colours change according to the context and space you are working in. In visual arts they red, yellow and blue however for technology this is not the case. computers have to read colours from a black background instead of white so the primary colours change to red, green and blue. It is good for junior students to learn that there are different colour systems and how they can create their own colour system. For example using light green, dark green and aqua. Here is an interactive colour mixer to have a play.

Junior School

Using Colour by Numbers helps students to make connections between colours numbers. This activity is often to strengthen number recognition, however, there is a bigger concept using data recognition.  As students become more familiar with the idea of the activity they can start to increase the colours they are using and add more complex numbers. At a higher level, students could use hex numbers associated with colours which they could investigate. Students could design their own pictures and colour system. This activity could be differentiated according to the knowledge of numbers the student has. You will find many online examples and apps for this activity.


Middle Primary

Pixel Art is a great way to get students to understand that each colour is represented by a number. Start by discussing what a pixel is. It is important here to note that computers store images and graphics in small squares each representing a number.  Look firstly at the basics in the unplugged activity with graph paper and letters. You will find the full image representation activity here. This activity helps to clarify understanding of image representation before moving into online activities.

The next step is to look at how colours work in digital images. The pixel viewer is a great way to upload an image and zoom in to see specific colour codes. Once the students have investigated this more closely I wonder how they would go having to use the colour codes and recreate the picture converting the codes to hex codes. Use the RGB – Hex Converter to find the codes and put these in a Google Sheet recreating an image. Students can find colours they like and use the colour palette website to find a colour scheme by using the hex code they generated. Once they have their palette they can create beautifully presented websites, presentations and more.

Alice Keeler’s pixel art is also a great example of using Google Sheets. It would be
great if students have to work out the colours themselves using the converter from the previous lesson.


Upper Primary

Did you know that there are 16,777,216 possible colours that the human eye can see! Discuss with your students that red, green and blue in a computer are stored in bits. Each of these bits hold the value of 256. Here we can jump into introducing binary and how this represents the values in these colours. Adjusting the binary number changes the value of the primary colour reflecting a different colour. If binary is unfamiliar territory you may like to consider reading section 5.3 of the CSfield guide and using the interactive activity with the cards with your students. 

Pixel art can take this further. Look at creating pictures using only colour codes will help to cement the connection between the codes and colours. Discuss how there are 256 bits in each of the primary colours for a computer. Look at a colour mixer and ask the students what they notice about the bits in each of the primary colours to create other colours. Have them play with the pixel viewer, colour matcher (specifically looking at how binary works here), image bit comparison (looking at how the binary makes the bits) and image bit comparer (looking at how different bits effect a picture). The students can discuss how input → process → output works in a system.  Students with a higher understanding can begin to use art in an online programming environment such as pencil code.

Secondary Students

Continuing the idea of Pixel Art in Sheets or offline is a great starting point with secondary students especially if they haven’t experienced any activities this way before.

A good starter is an offline activity (that can be completed online as well). In the Compressed Pixel activity, students need to problem solve to create the picture. They can do this either online in Google or Excel or students can do it as a hard copy. Students need to work out the correct placement of the blocks to make sure they construct the correct picture. The number next to the rows tell you how many black cells there are in one block. For example, the number is 6, 2 means there is one block of 6 black cells and one block of 2. They are separated by white blocks however the amount in between are unknown. you need to work this out. Make a copy of this sheet and see if you can work out the picture. Here is another one to have a go at from cs4fn.  It would be great to create your own for others to have a go. Post some in the comments if you are happy to share them. To add more difficulty students could create the picture but need to make sure there is an even number of both black and white blocks to represent bits.

I have mentioned using Google Sheets a bit because it lends itself to high levels of collaboration and it’s easy to navigate around. When moving into the area of graphic design or using programming it becomes more and more important to have a basic understanding of using conditions and variables. Sheets to Streets was a collaborative project by two designers that had never met or seen the space they were working with. Here is a rundown of their project and they have shared the ability to learn and reinvent their project with your students. To add another dimension students could work out the formula for converting RGB codes to hex numbers.

Australian Curriculum

Digital Technologies

Foundation – Year 2

Years 3 – 4

  • Recognise different types of data and explore how the same datacan be represented in different ways (ACTDIK008)
  • Collect, access and present different types of data using simple software to create information and solve problems (ACTDIP009)

Years 5 – 6

  • Examine how whole numbers are used to represent all data in digital systems (ACTDIK015)
  • Acquire, store and validate different types of data, and use a range of software to interpret and visualise data to create information (ACTDIP016)

Years 7 – 8

Years 9 – 10


  • explore how and why artworks are created and ways to use and apply visual conventions, such as line, shape, colour and texture
  • learn how their ideas or subject matter can be developed through different forms, styles, techniques, materials and technologies
  • extend their awareness of visual conventions, and observe closely visual detail as they use materials, techniques and technologies and processes in visual arts forms
  • explore and experiment with visual conventions such as line, shape, colour and texture to develop an individual approach to a theme or subject matter
  • test and innovate with properties and qualities of available materials, techniques, technologies and processes, combining two or more visual arts forms to test the boundaries of representation.
  • research and analyse the characteristics, qualities, properties and constraints of materials, technologies and processes across a range of forms, styles, practices and viewpoints
  • adapt, manipulate, deconstruct and reinvent techniques, styles and processes to make visual artworks that are cross-media or cross-form

Mathematics: number recognition, sequencing. recognise and read 3 digit numbers, place value, binary, reasoning, order, classify. patterns, groups, conversions, algorithms


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