Colors & Backgrounds

Use named colors, hex codes, and backgrounds to add visual appeal

Colors & Backgrounds — Adding Visual Appeal

What Are Colors in CSS?

CSS offers many ways to specify colors. You can use named colors, hex codes, RGB, HSL, and more. Backgrounds can be solid colors, gradients, or even images.

� **Fun fact:** There are 148 named CSS colors. "Tomato," "MediumSeaGreen," and "RebeccaPurple" are all real named colors!

Color Syntax

css

/* Named colors — easy to remember */
h1 { color: tomato; }

/* Hex codes — most common in professional code */
h1 { color: #ff6347; }

/* RGB — red, green, blue values (0-255) */
h1 { color: rgb(255, 99, 71); }

/* RGBA — RGB with opacity (alpha: 0-1) */
h1 { color: rgba(255, 99, 71, 0.5); }

Format	Example	When to use
Named	`red`, `blue`, `tomato`	Prototyping, simple colors
Hex	`#ff6347`	Production — most common
RGB	`rgb(255, 99, 71)`	When you need precise values
RGBA	`rgba(255, 99, 71, 0.5)`	When you need transparency

Backgrounds

Solid Background Color

css

body {
  background-color: #f0f0f0;
}

.highlight {
  background-color: yellow;
}

Background Image

css

.hero {
  background-image: url("hero-bg.jpg");
  background-size: cover;      /* Fit the entire area */
  background-position: center; /* Center the image */
  background-repeat: no-repeat;/* Don't tile */
}

Gradients

css

.button {
  background: linear-gradient(to right, #ff7e5f, #feb47b);
  /* Gradient from left to right: coral → peach */
}

Practical Example

html

<div style="background-color: #2c3e50; color: white; padding: 20px;">
  <h2 style="color: #e74c3c;">Warning!</h2>
  <p>This is a dark card with a red heading.</p>
</div>

Why Use Colors Well?

**Brand identity** — Consistent colors build recognition

**Mood** — Blue = trust, Red = urgency, Green = success

**Hierarchy** — Bright colors draw attention

**Readability** — High contrast between text and background is essential

Common Mistakes

❌ Wrong	Why	✅ Right
`color: #fff` on white background	White text on white = invisible	Always contrast text and background
`background-image: url(photo.jpg)` without `background-size: cover`	Image may repeat or stretch oddly	Add `background-size: cover`
Forgetting the `#` on hex codes	`ff0000` is invalid — needs `#`	`#ff0000`
Using too many bright colors	Visually exhausting	Stick to 2-3 main colors + neutrals

Your Turn!

Style a page with:

`` with a light gray background (`#f5f5f5`)

` with a dark blue color (`#1a237e`) and centered

A `

` with a white background (`#ffffff`), containing a `

` with dark text (`#333`)

💡Need a hint? (3 available)

#1Named colors: red, blue, tomato, rebeccapurple — easy but limited

#2Hex codes: #ff0000 — 6 hex digits, most professional format

#3RGBA: rgba(255,0,0,0.5) — last value 0-1 controls transparency

🔑Show solution (try it yourself first!)

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: #f5f5f5;
      font-family: Arial, sans-serif;
    }
    h1 {
      color: #1a237e;
      text-align: center;
    }
    .card {
      background-color: #ffffff;
      padding: 20px;
      border-radius: 8px;
    }
    .card p {
      color: #333;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <h1>My Colorful Page</h1>
  <div class="card">
    <p>This is a card with a white background and dark text.</p>
  </div>
</body>
</html>

🌐 HTML Editor

🖼️ Live Preview

← Build a Personal Page Next: Flexbox Layouts →