HTML and CSS lesson 12: Colour on the web: names, hex and rgb

UK version. UK school years and UK spelling. · US version of this lesson

Screens mix red, green and blue light. CSS colours can be names (red), hex codes (#ff0000) or rgb(255, 0, 0); background-color sets the colour behind. A complete 40-minute HTML and CSS lesson for beginners (Year 7, KS3), from Unit 4: CSS: style rules. You build real web pages right here in your browser – nothing to install.

Time: 40 minutes + 20 min homework
Year: Year 7, KS3 (ages 11–12)
You need: A computer or tablet, paper and a pencil
Marked: Instantly, with explanations

For parents: how to use this lesson

You don't need to know HTML yourself. The lesson explains each step on screen, the way Mr Babbage, our Head of Computing, likes it: a worked example first, then a go for your child. When your child builds a page, the browser draws it straight away and Classfern marks it with a checklist.

Read what your child will learn together.
Press Start the lesson below. Sit with your child for the teaching and the worked example (about 15 minutes): ask them to point at each tag and say what it does.
Let them do the practice on their own. If a page doesn't look right, the checklist says what is missing – let them find the mistake before you help.
Finish with the exit questions and the talk question: “Why do you think hex codes use base 16?”
Later that day or the next day: the homework (20 minutes), then a practice test.

Watch out for

#ff0000 is blue. The first pair is red: #RRGGBB.
background-colour works. CSS spells it background-color.

Miss Lovelace's tip for home: ask your child to change one thing on their page – a word, a colour, a size – and predict what will happen before they look. Predicting first is how programmers learn fastest.

What your child will learn

We are learning to use colour names, hex codes and rgb().

Success looks like

I can use colour names, hex codes and rgb().
I can read a hex code as red, green and blue.
I can set text and background colours.

Key words

RGB · hex code · hexadecimal · colour name · background-color · pixel

What to have ready

A device with a web browser (pages are built and checked right in the browser – nothing to install)
Paper for planning and sketching
A keyboard helps for typing code (a tablet works too)

The big ideas (for the adult)

Every pixel on a screen mixes red, green and blue light. rgb(255, 0, 0) means "all the red, no green, no blue" – so, red. rgb(0, 0, 0) is no light (black) and rgb(255, 255, 255) is all the light (white).

A hex code is the same three numbers written in base 16: #RRGGBB, where each pair goes from 00 (none) to ff (255). #ff0000 is red and #000080 is navy. A 3-digit code doubles each digit: #f00 = #ff0000. This is a real example of numbers representing pictures in a computer.

color sets the text colour and background-color the colour behind it – both with the American spelling. CSS knows 148 colour names; a misspelt name (like redd or lightred) is simply ignored. Interestingly, both grey and gray work.

Worked example: three ways to say a colour

CSS:

h1 { color: #1e90ff; }
h2 { color: tomato; }
p { color: rgb(46, 139, 87); background-color: #fffaf0; }

HTML:

<h1>Hex</h1>
<h2>Name</h2>
<p>rgb()</p>

The lesson, step by step

40 minutes in 5 parts
Part	Time	How it is checked
Starter	5 min	Marked by Classfern
Learn	8 min	Read, watch and talk
See it	7 min	Marked by Classfern
Practise	15 min	Marked by Classfern
Check and reflect	5 min	Marked by Classfern + self-check

The lesson

It runs here on the page. No sign-up and no names – nothing you type is sent anywhere. Each visit picks a new mix of questions.

Homework

20 minutes: predict what the browser will do, build or fix a short page, and check the key ideas – then a short reflection. New questions every time, all marked instantly.

Practice tests

All KS3 computing practice tests · All 20 HTML and CSS lessons

Curriculum

National curriculum in England, computing, key stage 3: pupils should be taught to use 2 or more programming languages, at least one of which is textual, to solve a variety of computational problems; make appropriate use of data structures [for example, lists, tables or arrays]; design and develop modular programs that use procedures or functions; and to understand how instructions are stored and executed within a computer system; understand how data of various types (including text, sounds and pictures) can be represented and manipulated digitally, in the form of binary digits.

Contains public sector information licensed under the Open Government Licence v3.0.

Our lessons and questions are our own. They are not written or endorsed by any government department, testing agency or exam board. HTML and CSS are open web standards; Classfern is not affiliated with the organisations that publish them.