Colors & Backgrounds: Visual Depth

Color communicates hierarchy, emotion, brand, and state. Backgrounds create depth, separation, atmosphere, and focus. CSS gives you several color systems and a powerful set of background tools.

In this chapter, you will learn how to choose color formats, control transparency, build gradients, layer backgrounds, and keep color choices accessible.

---

1. Color Is Data

CSS colors are not just names. They are values the browser converts into pixels.

.alert {
  color: white;
  background-color: #dc2626;
}

This rule sets:

• color: the foreground text color.
• background-color: the color behind the content and padding.

Good color work is technical and visual at the same time.

---

2. Named Colors

CSS includes named colors:

.demo {
  color: tomato;
  background: skyblue;
}

Named colors are readable and useful for quick demos. They are less common in production design systems because brand colors usually need exact values.

Examples:

• tomato
• goldenrod
• rebeccapurple
• slategray
• transparent

Use named colors for learning and prototyping. Use hex, RGB, HSL, or design tokens for production consistency.

---

3. Hex Colors

Hex colors use base-16 numbers.

.brand {
  color: #1d4ed8;
}

Format:

#RRGGBB

Each pair controls a channel:

• RR: red
• GG: green
• BB: blue

Examples:

Short syntax is possible when both digits in each channel repeat:

.shortcut {
  color: #fff; /* same as #ffffff */
}

---

4. RGB and RGBA

RGB defines red, green, and blue channels from 0 to 255.

.panel {
  background-color: rgb(248, 250, 252);
}

RGBA adds alpha transparency:

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

Modern CSS also supports slash syntax:

.overlay {
  background-color: rgb(0 0 0 / 55%);
}

RGBA is useful for overlays, shadows, borders, and subtle UI surfaces.

---

5. HSL: Human-Friendly Color

HSL stands for hue, saturation, and lightness.

.accent {
  color: hsl(217 91% 60%);
}

The parts:

• Hue: color angle from 0 to 360.
• Saturation: color intensity.
• Lightness: how dark or light the color is.

.blue-strong {
  color: hsl(217 91% 45%);
}

.blue-soft {
  color: hsl(217 91% 75%);
}

HSL is excellent for creating color scales because you can keep hue and saturation stable while changing lightness.

---

6. Choosing a Color Format

For a design system, define tokens:

:root {
  --color-brand: #1d4ed8;
  --color-brand-soft: #dbeafe;
  --color-surface: #fffdf8;
  --color-text: #0f172a;
}

Then use the tokens:

.button {
  color: white;
  background: var(--color-brand);
}

Tokens make future redesigns safer because you change one value instead of searching through hundreds of rules.

---

7. Color Contrast and Accessibility

Color must be readable. A beautiful color palette is not useful if users cannot read the text.

Poor contrast:

.bad {
  color: #94a3b8;
  background: #f8fafc;
}

Better contrast:

.good {
  color: #0f172a;
  background: #f8fafc;
}

Practical rules:

• Use dark text on light backgrounds or light text on dark backgrounds.
• Do not communicate important meaning with color alone.
• Pair color with text, icons, borders, or labels.
• Test hover, disabled, error, success, and focus states.

---

8. Background Color

background-color fills the content and padding area of an element.

.callout {
  padding: 1rem;
  border-radius: 12px;
  background-color: #fef3c7;
}

The background does not fill the margin area.

If you want page-wide color, apply it to html or body.

html {
  background: #f8f6ef;
}

body {
  margin: 0;
}

---

9. Background Images

Background images are decorative or layout-related images applied through CSS.

.hero {
  background-image: url("/images/hero.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Important properties:

• background-image: image source or gradient.
• background-repeat: controls tiling.
• background-position: controls alignment.
• background-size: controls scaling.
• background-attachment: controls scroll behavior.

cover vs. contain

.cover {
  background-size: cover;
}

.contain {
  background-size: contain;
}

• cover: fills the box, cropping if needed.
• contain: shows the whole image, leaving empty space if needed.

---

10. Gradients

Gradients are CSS-generated images.

Linear Gradient

.hero {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

Radial Gradient

.spotlight {
  background: radial-gradient(circle at top, #ffffff, #dbeafe 45%, #1e3a8a);
}

Conic Gradient

.wheel {
  background: conic-gradient(red, yellow, lime, cyan, blue, magenta, red);
}

---

11. Layered Backgrounds

CSS supports multiple backgrounds on one element. The first layer is drawn on top.

.hero {
  background:
    linear-gradient(rgb(15 23 42 / 65%), rgb(15 23 42 / 65%)),
    url("/images/classroom.jpg") center / cover no-repeat;
}

This is a common pattern for readable text over an image. The gradient acts as a dark overlay.

You can also layer decorative gradients:

.surface {
  background:
    radial-gradient(circle at top left, rgb(251 191 36 / 25%), transparent 35%),
    linear-gradient(180deg, #fffdf8, #f8f6ef);
}

---

12. Opacity vs. Transparent Backgrounds

This is a common source of bugs.

.card {
  opacity: 0.5;
}

opacity affects the entire element, including children.

.card {
  background-color: rgb(255 255 255 / 50%);
}

Transparent background color affects only the background.

Use alpha backgrounds when you want translucent surfaces with readable content.

---

13. Borders and Shadows

Borders define shape and separation.

.card {
  border: 1px solid #d6d3d1;
  border-radius: 18px;
}

Shadows create visual depth.

.card {
  box-shadow: 0 16px 32px rgb(15 23 42 / 8%);
}

Shadow syntax:

horizontal-offset vertical-offset blur spread color

Examples:

.soft-shadow {
  box-shadow: 0 12px 30px rgb(15 23 42 / 10%);
}

.inner-shadow {
  box-shadow: inset 0 1px 4px rgb(15 23 42 / 12%);
}

Use shadows sparingly. If every element has a large shadow, nothing feels elevated.

---

14. Practical Button

.btn-premium {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.875rem 1.25rem;
  border: 0;
  border-radius: 999px;
  color: white;
  font-weight: 700;
  cursor: pointer;
  background: linear-gradient(135deg, #2563eb, #0f172a);
  box-shadow: 0 12px 24px rgb(37 99 235 / 25%);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgb(37 99 235 / 35%);
}

.btn-premium:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}

This combines color, gradient, border radius, shadow, hover state, and accessible focus state.

---

15. Practical Surface

.lesson-card {
  color: #0f172a;
  background:
    radial-gradient(circle at top left, rgb(251 191 36 / 18%), transparent 38%),
    linear-gradient(180deg, #fffdf8, #f8f6ef);
  border: 1px solid #d6d3d1;
  border-radius: 24px;
  box-shadow: 0 18px 40px rgb(15 23 42 / 8%);
}

This creates a warm, readable surface without using a flat background.

---

16. Debugging Checklist

When color or background does not look right, check:

1. Is the color applied to text (color) or background (background-color)?
2. Is another rule overriding it?
3. Is opacity fading the children?
4. Is a background image covering the background color?
5. Are multiple background layers in the correct order?
6. Is the contrast readable?
7. Is the value coming from a CSS variable?
8. Is the element large enough for the background image to show?

---

17. Mini Practice

Create an alert component with:

• readable dark text,
• a soft yellow background,
• a darker left border,
• rounded corners,
• and no transparency on the text.

Possible answer:

.alert {
  color: #422006;
  background: #fef3c7;
  border-left: 4px solid #d97706;
  border-radius: 12px;
  padding: 1rem;
}

---