Colors and Backgrounds

Colour is the fastest way to make a page feel designed. CSS gives you several ways to express colour and to fill element backgrounds. Let us make things colourful.

Colour formats

Named colours like <code>tomato</code> are simplest. Hex codes like <code>#2563eb</code> are most common in real projects. <code>rgb()</code> mixes red/green/blue, and <code>hsl()</code> uses hue, saturation and lightness — the easiest to tweak.

<p class="a">Named</p>
<p class="b">Hex</p>
<p class="c">RGB</p>
<p class="d">HSL</p>

.a{color:crimson}
.b{color:#2563eb}
.c{color:rgb(16,185,129)}
.d{color:hsl(280,70%,50%)}

Background colour

The <code>background-color</code> property fills an element behind its content. With padding and rounded corners it becomes a card, badge or button.

<span class="badge">New</span>

.badge{background-color:#2563eb;color:#fff;padding:6px 14px;border-radius:999px}

Gradients

The <code>background</code> property can hold a gradient with <code>linear-gradient()</code> — a smooth blend between colours, great for hero sections and buttons.

<div class="hero">Gradient</div>

.hero{background:linear-gradient(135deg,#7c3aed,#2563eb);color:#fff;padding:30px;border-radius:14px;text-align:center}

.box { color: navy; } /* expected a navy box */

.box { background-color: navy; color: #fff; }