← HTML & CSS

CSS color values

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.

Part of: HTML and CSS Journey — Module 40

What it does: 240 on the colour wheel is blue, 100% saturation is fully vivid, 50% lightness is the midpoint between black and white. CSS has 140+ named colour keywords. They are clear and readable but offer less precise control than hex, rgb(), or hsl(). Each channel in rgb(r, g, b) must be between 0 and 255. 360 is the range for the hue in hsl(), not for rgb(). 3-digit hex is shorthand for 6-digit hex. Each digit is doubled: #f00 expands to #ff0000, which is pure red. The alpha value in rgba() and hsla() controls opacity. 0 is fully transparent, 0.5 is 50% see-through, and 1 is fully opaque.

Common mistakes: #GGHHII is not valid hex. Hex colour values use only digits 0–9 and letters A–F. A valid example: #1a2b3c. The rgb() function requires commas between values: rgb(255, 0, 0), not rgb(255 0 0) without commas.

Class: _____________________ · Name: _____________________ · Date: _________

Free printable worksheet with full answer key — or add this module to a journey and assign it to your class.

🖨 Print Worksheet and Answer key of CSS color values (PDF)

Take this worksheet further — free with Cloodit

Each concept is reinforced from every angle — learned, then applied, then tested.

Learning

Duo

Which CSS colour format uses hue, saturation and lightness?

hsl()rgb()

Matches

p { color: #GGHHII; }

↓

Hex colour values only use digits 0–9 and letters A–F — G, H and I are not valid hex digits

Applying

Meanings

Term

#rrggbb

Meaning

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.

Practice

p { color: navy; }

Testing

Gaps

p { color: ; }

Check Answer

Spots

1p { color: #GGHHII; }

2h1 { color: #ff0000; }

Cloodit turns curriculum-aligned coding content into journeys students work through one biome at a time.

Students earn collectable badges

Over 100 of them, across seven natural biomes.

Study Buddy

Students build a real study resource

Turns their work into revision material ready for Flash Cards and Exam study.

Diamond Dash — one of Cloodit's live, competitive Sprint games

Students lock in with Sprints

Live, competitive practice for the start of the lesson or a teacher-led lesson finisher.

A Cloodit certificate of achievement, ready to personalise and print

Custom printable certificates

Honour your top performers, or encourage a student who's trying hard — ready to print in seconds.

Teach this with your class →

Quick Questions

1. Which CSS colour format uses hue, saturation and lightness?

A. hsl() ✓

B. rgb()

hsl(hue, saturation%, lightness%) lets you adjust colours intuitively using a colour wheel angle and percentage values.

2. What is the valid range for each channel in rgb()?

A. 0 to 255 ✓

B. 0 to 360

Each channel in rgb(r, g, b) must be between 0 and 255. 360 is the range for the hue in hsl(), not for rgb().

3. True or false: #f00 and #ff0000 represent the same colour.

A. True ✓

B. False

3-digit hex is shorthand for 6-digit hex. Each digit is doubled: #f00 expands to #ff0000, which is pure red.

4. What does the alpha channel control in rgba()?

A. Transparency (0 = fully transparent, 1 = fully opaque) ✓

B. Brightness (0 = dark, 1 = bright)

The alpha value in rgba() and hsla() controls opacity. 0 is fully transparent, 0.5 is 50% see-through, and 1 is fully opaque.

5. True or false: hex colour values can use letters G, H, I.

A. False ✓

B. True

Hex colour values use only the digits 0–9 and the letters A–F. G, H and I are not valid hexadecimal characters.

Match the Pairs

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

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

hsl(hue, saturation%, lightness%) — hue is a colour wheel angle 0–360 → h1 { color: hsl(240, 100%, 50%); }

Named colour keywords like 'red', 'navy' and 'coral' are valid CSS colour values → a { color: steelblue; background-color: lightyellow; }

p { color: #GGHHII; } → Hex colour values only use digits 0–9 and letters A–F — G, H and I are not valid hex digits

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

Key Term

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

Fill in the Blanks

1. p { color: red; }

Hint: Type the CSS named colour keyword for the colour red

2. h1 { color: #ff0000; }

Hint: Type the CSS property name used to set the text colour

3. p { color: rgb(0, 128, 0); }

Hint: Type the CSS colour function name that takes red, green and blue channel values

4. a { color: hsl(240, 100%, 50%); }

Hint: Type the CSS colour function name that takes hue, saturation and lightness values

5. div { color: rgba(0, 0, 0, 0.5); }

Hint: Type the CSS colour function name that adds an alpha transparency channel

Spot the Error

Question 1

A p { color: #GGHHII; }

B h1 { color: #ff0000; }

C a { color: rgb(0,0,255); }

Line A — #GGHHII is not valid hex. Hex colour values use only digits 0–9 and letters A–F. A valid example: #1a2b3c.

Question 2

A p { color: navy; }

B h1 { color: rgb(255 0 0); }

C a { color: hsl(240,100%,50%); }

Line B — The rgb() function requires commas between values: rgb(255, 0, 0), not rgb(255 0 0) without commas.

Question 3

A p { color: #ff0000; }

B h2 { background-color: rgba(0,0,0,0.5); }

C a { color: hsl(120 100% 50%); }

Line C — The hsl() function requires commas between values: hsl(120, 100%, 50%), not hsl(120 100% 50%) without commas.

Question 4

A body { background-color: white; }

B p { color: #3a3a3a; }

C h1 { color: rgb(255,0,0); }

D a { color: 0000ff; }

Line D — Hex colour values must start with a # symbol: 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); }

Line E — The alpha value in rgba() must be between 0 (fully transparent) and 1 (fully opaque). 1.5 is invalid.

For Teachers

Create a free class, add this module to a journey, and track who's stuck.

Create a free teacher account →

No credit card. No setup fee. Make a class and invite students in under three minutes.

For Students

Practice this topic interactively, track progress, and unlock badges.

Start Learning Free →

Have a class code?