RGB: 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.

Combining R, G, and B

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

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

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

Find a colour scheme you like for your web page, and share it with the other learners in the comments!

Share this article:

This article is from the free online course:

Representing Data with Images and Sound: Bringing Data to Life

Raspberry Pi Foundation