Data Representation · Part 2

Codes & Colour

You already know everything is 1s and 0s. So how do those bits turn into the letters you type, a shorter way to write them, and the colours on your screen?

1. Letters: ASCII

A computer only stores numbers (as binary). So how does it store the word HELLO? Simple: every character is given a number using a code called ASCII. For example A is 65, B is 66, and a space is 32. That number is then stored as binary, just like in the Binary module.

Type something and watch each letter turn into its ASCII number (shown here in decimal and in hex, which is next):

Check your understanding: What does ASCII actually do?

2. Hexadecimal

Binary is correct but long: one byte is eight digits, like 11001000. Hexadecimal (hex, base 16) is a neat shorthand. It uses sixteen digits: 0 1 2 3 4 5 6 7 8 9 and then A B C D E F for ten to fifteen.

The magic: two hex digits = exactly one byte (0 to 255). So that long byte above is just C8 in hex. Try it, the same number shown three ways:

Decimal200
Hex0xC8
Binary11001000

Check your understanding: What is the hex number FF as a normal (decimal) number?

3. Colour: RGB

Here is where hex shows up everywhere. Every colour on a screen is a mix of three lights: Red, Green and Blue. Each one has a brightness from 0 to 255, and we write the three of them together as a hex colour code like #FF8800 (that is FF red, 88 green, 00 blue).

More of a value (closer to FF) means more of that light. Slide the three channels and watch the colour and its code change:

#FF8800 rgb(255, 136, 0)
Handy ones to know: #000000 is black (all off), #FFFFFF is white (all full on), #FF0000 is pure red, #00FF00 green, #0000FF blue.
Wait, white is just red + green + blue at once? Yes, and you can watch your own eyes get tricked into seeing it. Open Explore the Screen

Check your understanding: Which hex code is pure red?

4. Coding task: Hello World, in YOUR colours

Time to use those hex codes in real code. This task is half of the module (the test below is the other half). Press Check to mark it. Python loads the first time you press Run or Check (5-10 seconds), then it's instant.

solution.py
Output

              

5. Class word cloud

Every colour you can name is just three numbers underneath. Add yours and watch the class palette grow.

Glossary

ASCII
A code that gives every text character a number (for example A = 65), so text can be stored as binary.
Hexadecimal (hex)
Base 16: the digits 0–9 then A–F. A short way to write binary, where two hex digits make one byte.
Byte
8 bits. Holds 0 to 255, which is exactly two hex digits (00 to FF).
RGB
Red, Green, Blue. Every screen colour is a mix of these three lights, each from 0 to 255.
Hex colour code
A colour written as #RRGGBB, for example #FF8800. More of a value means more of that light.

Module test

Five quick questions to check you have got it. Your best score shows on your My Progress page.

1. In ASCII, the letter A is stored as which number?

2. What is the hex number FF in decimal?

3. How many hex digits make up one byte?

4. Which hex code is pure red?

5. In the colour code #00FF00, which light is fully on?