Colors & Backgrounds

color sets text color; background-color sets the background. Both accept a named color (red), a hex code (#ff5733), or an rgb()/rgba() value.

Example 1: three ways to write the same color

h1 { color: red; }
h1 { color: #ff0000; }
h1 { color: rgb(255, 0, 0); }

All three produce an identical red. Named colors are the most readable for a handful of common colors; hex and rgb() let you specify any of millions of exact shades, which is what you'll use for anything matching a real brand palette.

Example 2: rgba and transparency

.overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

rgba() adds a fourth number — alpha, from 0 (fully transparent, invisible) to 1 (fully solid). This example creates a semi-transparent black overlay that lets whatever's underneath still show through at half strength — a common pattern for darkening a background image just enough to keep text readable on top of it.