Markup CityISSUE #13 of 39

colors · names · hex · rgb · hsl

Tagg the BuilderVSThe Unclosed Tag

Tagg the Builder saysHTML colors come as named keywords, #hex codes, rgb()/rgba(), and hsl()/hsla() — all usable in CSS.

You'll set colors constantly. The formats: named (red, rebeccapurple), hex (#b388ff), rgb(179,136,255), and hsl(258,100%,76%). The a variants (rgba/hsla) add an alpha/opacity channel from 0–1.

Hex is the most common in code; hsl is the most human-friendly for tweaking (change the hue number to rotate the color). They're interchangeable — pick what reads best for the moment.

Power-ups you unlock

Named keywords: red, tomato, rebeccapurple, …
Hex: #rrggbb (or #rgb shorthand)
rgb(r,g,b) and rgba(r,g,b,alpha)
hsl(hue,sat%,light%) — easiest to tweak by hand

The Unclosed Tag attacks — common mistakes

Forgetting the # on hex codes
Using rgb percentages and 0–255 inconsistently
Setting opacity on the element when you only wanted a translucent color (use rgba/hsla)

Boss battleSet the same purple four ways — named-ish, hex, rgb, and hsl — then drop one to 50% alpha with rgba.

Example code

<!doctype html>
<html><head><meta charset="utf-8"></head>
<body style="background:#06040d;font-family:sans-serif;padding:20px">
  <p style="color:tomato">named: tomato</p>
  <p style="color:#b388ff">hex: #b388ff</p>
  <p style="color:rgb(138,255,157)">rgb(138,255,157)</p>
  <p style="color:hsl(48,100%,70%)">hsl(48,100%,70%)</p>
</body></html>

▶ Open the interactive comic issue

‹ Comments · Notes The Browser Ignores Linking A Stylesheet ›