Camp 2 · Step 4 of 13
Colors
Named colors, hex codes, rgb and hsl — every way CSS talks about color, and when to use which.
12 min+50 XP
Color is the fastest way to change how a page feels. CSS gives you several ways to say the same color — each with its moment.
Four ways to write a color
CSS
Live preview
All four paragraphs are the same green:
| Syntax | Example | Best for |
|---|---|---|
| Named | seagreen | quick experiments (about 148 names exist) |
| Hex | #2e8b57 | the industry default — what design tools hand you |
| RGB | rgb(46, 139, 87) | when you're mixing light: red, green, blue 0–255 |
| HSL | hsl(146, 50%, 36%) | human tweaking: hue°, saturation%, lightness% |
Hex is what you'll see most: #RRGGBB, two hex digits per channel.
#000000 is black, #ffffff white, #ff0000 pure red.
Where color applies
CSS
Live preview
Transparency
Add an alpha channel — rgb(46, 139, 87, 0.5) or 8-digit hex
#2e8b5780 — for glassy, layered effects. 0 is invisible, 1 fully
solid.
Checkpoint
What color is #ffffff?
Checkpoint
You want the text color of a warning box to change. Which property?
What's next
Typography — the properties that make text worth reading.