CSS Colors

Colour is the first thing a visitor notices on a page, and CSS gives you many ways to describe a colour. They all produce the same result — a colour on the screen — but some ways are easier to read, some are easier to adjust, and one of them lets you make a colour see-through.

Diagram — see how it fits together

The colour formats

Syntax — the same red, six ways

h1 { color: red; }
h2 { color: #ff0000; }
h3 { color: rgb(255, 0, 0); }
h4 { color: rgba(255, 0, 0, 0.5); }
h5 { color: hsl(0, 100%, 50%); }
h6 { color: hsla(0, 100%, 50%, 0.5); }

All six headings are red. The difference is only how you describe it. Names are the easiest to read. HEX is the most common in real projects — designers and tools all speak HEX. RGB is the clearest when you need to calculate a shade. HSL is the easiest when you want to say "the same colour, but lighter" — just raise the lightness number.

Opacity — see-through elements

The opacity property makes a whole element see-through, from 0 (invisible) to 1 (fully solid). It is different from RGBA: RGBA makes only the colour see-through, while opacity makes the entire element — text, background, and everything inside it — see-through.

.faded { opacity: 0.5; }
.glass { background-color: rgba(255, 255, 255, 0.5); }

The .faded box and all its text become half-transparent. The .glass box gets a half-transparent white background, but its text stays fully solid and easy to read. When you want a see-through background with readable text, RGBA is almost always the right choice.

Common mistakes

• Forgetting the # in a HEX colour — ff0000 is not a colour to CSS. It must be #ff0000.
• Confusing opacity with RGBA — opacity fades the text too, so a faded box can become unreadable.
• Using an alpha value above 1 — alpha runs from 0 to 1, not 0 to 100. rgba(255, 0, 0, 50) is invalid.
• Writing RGB values above 255 — each channel stops at 255. rgb(300, 0, 0) is invalid.
• Choosing colours that are too close together — light grey text on a white background is unreadable, however pretty it looks in the code.

Remember

• color sets the text colour; background-color sets the background colour.
• HEX is #RRGGBB — #ff0000 is red; the short form #f00 means the same.
• RGB is 0–255 per channel; RGBA adds an alpha from 0 (see-through) to 1 (solid).
• HSL describes a colour by hue, saturation and lightness — the easiest way to make a lighter or darker version.
• opacity fades the whole element including its text; RGBA fades only the colour.

Example explained

• .named { background-color: tomato; } — a named colour. The box turns tomato red, no numbers needed.
• .hex { background-color: #1e90ff; } — a HEX colour. The hash and six digits describe a bright dodger blue.
• .rgb { background-color: rgb(34, 139, 34); } — RGB numbers. Red 34, green 139, blue 34 make forest green.
• .see-through { background-color: rgba(255, 165, 0, 0.5); } — RGBA. Orange at half strength, so the page behind it shows through the background — but the text stays solid.
• .faded { opacity: 0.5; } — opacity on the whole box. Background and text both fade to half, which is why the text looks washed out.