Skip main navigation

The RGB Colour System

The RGB system is often used for computer screens and coloured lighting: There are many colours in the image above. But how do we get all these colours using only red, green and blue?

When you look at your computer screen, you see a lot of different colours. However, this variety of colours is an illusion: computers essentially know only three different colours — red, green and blue. In this step, we will look at how these three colours merge into the colours visible on the screen, and at how they are represented by mathematical systems.

The RGB Colour System on Computer Screens

The RGB system is often used for computer screens and coloured lighting:

The Freemont Street Experience, Las Vegas: a pedestrian mall surrounded by lights and screens in an array of different colours.

There are many colours in the image above. But how do we get all these colours using only red, green and blue?

With a single white light, we can create two colours by turning the light either on (white) or off (black). Adding a coloured filter to the light makes the light turn a different colour. Three lights with red, green and blue filters would create three individual colours.

Overlaying these colours allows new combinations of colours: yellow, cyan, and magenta.

Red, Green and Blue lights overlapping

With a dimmer switch capable of affecting the intensity of light, we can create a number of different shades or colours. Combining the dimmer switch with the original white light without a filter, we can create any shade on the black-grey-white spectrum by turn the light off, or turning it on and using the dimmer switch.

black-grey-white spectrum

Using dimmer switches with the three coloured lights, we can produce different shades of each coloured light by changing the light’s intensity with the switch.

intensity spectra of Red, Green and Blue

Lighting is just one implementation of the RGB system – another is website colours, which work very similarly to the lighting example. Web colours are measured on a scale from 0 (“none of this colour”) to 255 (“the most intense colour possible”). Thinking of the lighting example, this would mean 256 shades of each colour of light (256 red, 256 blue, and 256 green).

Expressing Colours With the RGB System

Here’s an example of how colours are represented in RGB, in this case a particular shade of orange:

This shade of orange uses: * Red (at full intensity) * Green (at more than half intensity) * No blue

This would be represented as:

An image showing the RGB values of red (255), green (165) and blue (0) used together to produce the colour orange

The RGB Colour Spectrum

A very large variety of colours can be represented in this way. Because red, green, and blue can each be shown at different intensities, these colours can, when mixed together, create up to 16777216 unique shades:

256 reds × 256 greens × 256 blues = 16777216 shades of colour

The number of colours is linked directly to the number of available bits. In the binary table we used in previous steps you saw that a byte (8 bits) can store 256 numbers, and there’s a byte available for each colour: red, green, and blue.

Activity: Create Some Colours With the RGB System

When you use the RGB system in code, you represent the colour black by rgb(0,0,0).

 

 

    • Open a web browser and type into Google: rgb(0,0,0)

 

 

A screenshot of Google web browser

 

As you can see, a colour picker appears. It lets you choose the colour you require, and then the colour’s shade.

 

Google colour picker

 

 

    • Use the colour picker to find the RGB values for orange, yellow, pink and brown.

       

 

    • Select each colour using colour bar at the bottom, followed by the shade using the top section. Notice that the RGB and hexadecimal values change according to what colour you choose. (We’ll discuss hexadecimal in an upcoming step.)

       

 

 

Activity: Create Colours on a Web Page

 

One of the applications RGB colours are used for by computers is content on websites. RGB colours can be used for text, borders, shadows, backgrounds, and many more things.

 

To make use of the theory you’ve just learned, have a go at creating a web page that shows different colours.

 

 

    • Open a text editor, and copy and paste this code into a file:

 

 

<!DOCTYPE html>
<html>
<body style="background-color: rgb(255,0,0)">

<h1 style="color: rgb(0,255,0)">This is a heading</h1>
<p style="color: rgb(0,0,255)">This is a paragraph.</p>

</body>
</html>

 

 

    • Save the file as index.html, and open it in your web browser

 

  • Change the colours of the website by changing the values of each rgb(x,x,x) statement, saving the file, and reloading it in the browser
This article is from the free online

Data Representation in Computing: Bring Data to Life

Created by
FutureLearn - Learning For Life

Our purpose is to transform access to education.

We offer a diverse selection of courses from leading universities and cultural institutions from around the world. These are delivered one step at a time, and are accessible on mobile, tablet and desktop, so you can fit learning around your life.

We believe learning should be an enjoyable, social experience, so our courses offer the opportunity to discuss what you’re learning with others as you go, helping you make fresh discoveries and form new ideas.
You can unlock new opportunities with unlimited access to hundreds of online short courses for a year by subscribing to our Unlimited package. Build your knowledge with top universities and organisations.

Learn more about how FutureLearn is transforming access to education