Colors & Opacity

Colour sets the mood of a product. CSS accepts many colour formats — this chapter explains each one, shows how opacity works, and adds the one rule that keeps your site readable: contrast.

The colour formats

Hex

h1 { color: #4f46e5; }        /* 6 digits: RR GG BB */
p  { color: #0f172a; }
.c { color: #fff; }           /* shorthand: #ffffff */

Hex is compact and exact. The 8-digit form #4f46e599 adds alpha in the last two digits.

RGB / RGBA

.overlay {
  background: rgb(15 23 42 / 0.55);   /* modern space-separated syntax */
  /* legacy: rgba(15, 23, 42, 0.55) still works */
}

The final number (0–1) is alpha — transparency. 0 is invisible, 1 is solid.

HSL — the designer's format

Hue (0–360 colour wheel), Saturation (0–100% grey → vivid), Lightness (0–100% black → white). Same hue + different lightness gives a harmonious palette for free:

:root {
  --brand-50:  hsl(245 83% 97%);  /* backgrounds */
  --brand-500: hsl(245 83% 59%);  /* base  */
  --brand-700: hsl(245 74% 44%);  /* hover */
  --brand-900: hsl(245 65% 28%);  /* pressed / text on light */
}

Expected output: four shades that always look related, because only lightness changed.

Choosing colours that work together

1. Pick one brand hue (your accent).
2. Build light/dark variants by adjusting only the L value in HSL.
3. Add a neutral scale for text and borders — tiny saturation (2–5%) keeps greys from looking dead.
4. Reserve one warm/red tone purely for errors.

CSS variables make this a one-time setup — covered in CSS Variables & Specificity.

Opacity vs alpha vs transparency

.muted   { opacity: 0.6; }              /* fades element + ALL children */
.overlay  { background: rgb(15 23 42 / 0.5); } /* only the background */

• opacity applies to the whole element (text included) — the child text fades too.
• Alpha in a colour affects only that colour — use it for overlays, tinted panels and shadows.

Contrast: the accessibility rule

Text must be readable by everyone:

• Body text vs background: at least 4.5:1 contrast (WCAG AA).
• Large text (24 px, or 19 px bold): 3:1.
• Do not rely on colour alone to convey meaning (pair it with an icon or text).

A quick test: squint at your screen — if two greys merge, bump the lightness gap. Browser dev tools show an exact contrast ratio when you click a colour.

Practical example: a theme-ready palette

:root {
  --bg:      #ffffff;
  --surface: #f8fafc;
  --text:    #0f172a;
  --muted:   #64748b;
  --accent:  #4f46e5;
  --danger:  #dc2626;
  --success: #16a34a;
}

body      { background: var(--bg); color: var(--text); }
.card     { background: var(--surface); border: 1px solid #e2e8f0; }
.muted    { color: var(--muted); }
.alert    { border-left: 4px solid var(--danger); padding: 1rem; background: rgb(220 38 38 / 0.08); }

Expected output: a clean white page with slate text, an indigo accent, and a soft red-tinted alert box.

Common mistakes

• Low-contrast grey text — #ccc on white fails badly; use at least #6b7280-equivalent darkness for body text.
• White text on mid-tone accents — test it; sometimes a dark text colour reads better.
• Hard-coding colours everywhere — one palette in variables, values referenced by name.
• Red/green-only signals — add text or icons for colour-blind users.

Practice checklist

1. Build a 4-shade brand scale using only HSL lightness steps.
2. Create an overlay with rgb(0 0 0 / 0.6) over an image.
3. Check your text/background contrast ratio in dev tools — fix anything under 4.5:1.

Next: make text beautiful — CSS Typography.