Skip to content
KodeTrail

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:

SyntaxExampleBest for
Namedseagreenquick experiments (about 148 names exist)
Hex#2e8b57the industry default — what design tools hand you
RGBrgb(46, 139, 87)when you're mixing light: red, green, blue 0–255
HSLhsl(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.