BBC micro:bit – RGB Gradient

In this challenge we will use the BBC micro:bit to control a RGB LED to create a gradient light effect where the LED will fade from red to purple, to blue, to purple and back to red.


To do so we will need:

  • A BBC micro:bit
  • 3 resistors (100 Ohms)
  • A breadboard
  • 4 wires

RGB Colour Codes

Did you know that every colour on the screen can be represented using an RGB code (Red, Green, Blue) code. This code consists of three numbers between 0 and 255, indicating how much red, green and blue are used to recreate the colour.

For instance the RGB code for:

  • Red is (255,0,0)
  • Green is (0,255,0)
  • Blue is (0,0,255)
  • Yellow is (255,255,0)
  • Orange is (255,165,0)

Check the following RGB Color picker to see how RGB codes work:

Electric Circuit

An RGB LED is a 3-in-1 LED. It consists of a RED LED, a Green LED and a Blue LED all within the same component. It has 3 cathodes (+ pins) that can take different amperages. It has 1 common anode (- pin).
This is how we will connect our RGB LED to our micro:bit.
The purpose of the resistors is to limit the amperage in the circuit and hence protect the LED from receiving a too strong current (which could damage the LED). The resistors we use here are 100 ohms (Brown Black Brown rings).

micro:bit Code

Here is the code needed in the micro:bit to implement the gradient fading effect. Note that you will need to use the micro:bit website to create the code using the JavaScript Block Editor.


Step 1: Initial RGB values
Step 2: Red to Blue Gradient
Step 3: Blue to Red Gradient

Your Challenge

Tweak this code to create other gradient animations:
Gradient 1: Cyan, Magenta, Cyan
Gradient 2: Cyan, Yellow, Cyan
Gradient 3: Green, Yellow, Magenta, Cyan, Green

Did you like this challenge?

Click on a star to rate it!

Average rating 4.4 / 5. Vote count: 7

No votes so far! Be the first to rate this post.

As you found this challenge interesting...

Follow us on social media!

Tagged with: