CSS color values
Name:
Date:
Class:
A
Quick Questions
Shade in the A or B circle for each question.
1. Which CSS colour format uses hue, saturation and lightness?
2. What is the valid range for each channel in rgb()?
3. True or false: #f00 and #ff0000 represent the same colour.
4. What does the alpha channel control in rgba()?
5. True or false: hex colour values can use letters G, H, I.
B
Match the Pairs
Draw a line connecting each item on the left to its match on the right.
| Left column | Right column | |
|---|---|---|
| 1p { color: #ff0000; } | ASets the text colour to pure red using a 6-digit hex code — ff=max red, 00=no green, 00=no blue | |
| 2div { background-color: rgba(0, 0, 0, 0.5); } | Ba { color: steelblue; background-color: lightyellow; } | |
| 3hsl(hue, saturation%, lightness%) — hue is a colour wheel angle 0–360 | CSets the background to black at 50% opacity — the 4th rgba value (0.5) controls transparency | |
| 4Named colour keywords like 'red', 'navy' and 'coral' are valid CSS colour values | DHex colour values only use digits 0–9 and letters A–F — G, H and I are not valid hex digits | |
| 5p { color: #GGHHII; } | Eh1 { color: hsl(240, 100%, 50%); } | |
| 6h1 { color: rgb(300, 0, 0); } | FEach rgb() channel must be 0–255 — 300 is out of range and the colour will be clamped or invalid |
C
Definitions
#rrggbb
D
Fill in the Blanks
Complete each line of code by filling in the missing parts.
1.
p { color: ___; }
2.
h1 { _____: #ff0000; }
3.
p { color: ___(0, 128, 0); }
4.
a { color: ___(240, 100%, 50%); }
5.
div { color: ____(0, 0, 0, 0.5); }
E
Spot the Error
Shade in the letter of the line that contains an error.
Question 1
A
p { color: #GGHHII; }
B
h1 { color: #ff0000; }
C
a { color: rgb(0,0,255); }
Question 2
A
p { color: navy; }
B
h1 { color: rgb(255 0 0); }
C
a { color: hsl(240,100%,50%); }
Question 3
A
p { color: #ff0000; }
B
h2 { background-color: rgba(0,0,0,0.5); }
C
a { color: hsl(120 100% 50%); }
Question 4
A
body { background-color: white; }
B
p { color: #3a3a3a; }
C
h1 { color: rgb(255,0,0); }
D
a { color: 0000ff; }
Question 5
A
p { color: #333; }
B
h1 { color: crimson; }
C
h2 { color: rgb(0,128,0); }
D
span { color: hsl(240,100%,50%); }
E
a { color: rgba(255,0,0,1.5); }
Answer Key
CSS color values
Section A: Quick Questions
Q1
B — hsl()
Q2
A — 0 to 255
Q3
A — True
Q4
A — Transparency (0 = fully transparent, 1 = fully opaque)
Q5
B — False
Section B: Match the Pairs
Q1
p { color: #ff0000; } → Sets the text colour to pure red using a 6-digit hex code — ff=max red, 00=no green, 00=no blue
Q2
div {
background-color: rgba(0, 0, 0, 0.5);
} → Sets the background to black at 50% opacity — the 4th rgba value (0.5) controls transparency
Q3
hsl(hue, saturation%, lightness%) — hue is a colour wheel angle 0–360 → h1 { color: hsl(240, 100%, 50%); }
Q4
Named colour keywords like 'red', 'navy' and 'coral' are valid CSS colour values → a {
color: steelblue;
background-color: lightyellow;
}
Q5
p { color: #GGHHII; } → Hex colour values only use digits 0–9 and letters A–F — G, H and I are not valid hex digits
Q6
h1 { color: rgb(300, 0, 0); } → Each rgb() channel must be 0–255 — 300 is out of range and the colour will be clamped or invalid
Section C: Definitions
Q1
#rrggbb — A CSS hex colour code. Six hexadecimal digits (0–9 and A–F) define red, green and blue channels. Shorthand: #rgb uses one digit per channel.Section D: Fill in the Blanks
Q1
p { color: red; }Q2
h1 { color: #ff0000; }Q3
p { color: rgb(0, 128, 0); }Q4
a { color: hsl(240, 100%, 50%); }Q5
div { color: rgba(0, 0, 0, 0.5); }Section E: Spot the Error
Q1
A — #GGHHII is not valid hex. Hex colour values use only digits 0–9 and letters A–F. A valid example: #1a2b3c.
Q2
B — The rgb() function requires commas between values: rgb(255, 0, 0), not rgb(255 0 0) without commas.
Q3
C — The hsl() function requires commas between values: hsl(120, 100%, 50%), not hsl(120 100% 50%) without commas.
Q4
D — Hex colour values must start with a # symbol: a { color: #0000ff; }
Q5
E — The alpha value in rgba() must be between 0 (fully transparent) and 1 (fully opaque). 1.5 is invalid.