Representing Colour with Hexadecimal

Previously, we looked at the RGB system for representing colours. When you were using the colour picker, you might have noticed other values besides RGB, ones that looked like 000000, #ffffff, or ffa500.

These values stand for colours encoded using the hexadecimal system. Hexadecimal represents colour in a very similar way to RGB, and colours are a useful context for practising converting denary to hexadecimal and vice versa.

To see how colours are expressed as hexadecimal values, open up the web page you created in a previous step, or create a new HTML file and add in this code:

<!DOCTYPE html>

<html>

<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>

Change the background colour to #ffa500, so that the code reads color: #ffa500
Save your file and open/reload it in a browser
Change the six numbers and letters to create more colours. Can you spot any patterns?

Here’s how this works: - As you’ve learned, the intensities of the R, G, and B colours are defined using 8-bit numbers (bytes). An 8-bit number can be represented using two hexadecimal (or hex) digits, and the hash sign shows you’re working in hexadecimal.

- The value of the hex number ranges from 00 to FF, corresponding to a range from 0 to 255 decimal. - A value of 00 means the colour is completely absent. A value of FF (or 255) means the color is at its maximum intensity. - An RGB colour is thus represented by three 8-bit numbers (bytes), or six hex digits — two hex digits each for R, G, and B.

Here are some helpful pointers:

In hexadecimal, 40 is ¼ of full intensity, 80 is ½, and C0 is ¾.
#000000 — black (all colors off)
#FFFFFF — white (all colors at maximum)
#808080 — gray (all colors at half their maximum)
#FF0000 — red (red at maximum, green and blue off)
#00FF00 — green
#0000FF — blue
#FFFF00 — yellow (equal amounts of red and green)
#AEEEEE — turquoise

Now convert the colours in your website colour scheme (from the previous step) from RGB denary values to hexadecimal values.

Using colours is a great way to contextualise hexadecimal in the classroom, as well as to practise conversion. When I was teaching GCSE or preparing for an exam, I used to play hexadecimal bingo at the end of a hexadecimal lesson.

Think of some ways you can teach hexadecimal, or activities you could use in the classroom, and share your ideas in in the comments below.

Page updated

Report abuse