css · level 1 · unit 2 · lesson 1
- meet it
- guess first
- your turn
- fix it
- nailed it
Tap a green word if you get lost.
meet it
A mixes a colour from red, green and blue.
Names only go so far. A hex code like #ff6347 can make millions of colours. It is a # followed by six characters, read in three pairs: red, then green, then blue.
Each pair runs from 00, none at all, up to ff, as much as possible. The characters count from 0 to 9 and then carry on with a to f, so a comes after 9.
Screens mix light, so #ff0000 is full red with no green or blue. #000000 is no light at all, which is black. #ffffff is everything at full, which is white.
<h1>Tomato soup</h1>
<p>Hot, red and tasty.</p>h1 {
color: #ff6347;
}Press show my page to see it here.
#ff6347 is exactly the same colour as the name tomato.
guess first
Only the middle pair is full. What colour is it?
Guess before you run it. Wrong guesses are how you learn, and nothing is marked.
<h1>Go!</h1>h1 {
color: #00ff00;
}your turn
Your turn. Mix your own colour.
Type six characters after the #, using 0 to 9 and a to f. Try ff8800 for orange, or make up your own mix.
the page you’re styling
<p>This is my very own colour.</p>your css
Press show my page to see it here.
- the words are not blacknot checked yet
fix it
The party heading stays black. Can you fix it?
the page you’re styling
<h1>Party time</h1>your css
Press show my page to see it here.
- the heading is bright pinknot checked yet
- Count the characters after the
#. - A hex code needs six characters: two for red, two for green and two for blue.
- The blue pair is one character short. Change it to
#ff00ff, then press run.
nailed it
you mixed a colour of your own. :D
- A hex code is
#followed by six characters. - The pairs are red, green and blue, from
00toff. #000000is black and#ffffffis white.
new words in your collection
- hex code
This lesson isn’t saved. A free account remembers every lesson you finish.