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:

Hex	Color idea
`#000000`	Black
`#ffffff`	White
`#ff0000`	Red
`#00ff00`	Green
`#0000ff`	Blue
`#f8fafc`	Very light slate

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

Format	Best for	Example
Named	Quick demos	`tomato`
Hex	Brand tokens and static colors	`#1d4ed8`
RGB/RGBA	Transparency and shadows	`rgb(0 0 0 / 20%)`
HSL/HSLA	Color scales and design tuning	`hsl(217 91% 60%)`

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:

Is the color applied to text (color) or background (background-color)?
Is another rule overriding it?
Is opacity fading the children?
Is a background image covering the background color?
Are multiple background layers in the correct order?
Is the contrast readable?
Is the value coming from a CSS variable?
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;
}

Colors & Backgrounds: Visual Depth

Colors & Backgrounds: Visual Depth

1. Color Is Data

2. Named Colors

3. Hex Colors

4. RGB and RGBA

5. HSL: Human-Friendly Color

6. Choosing a Color Format

7. Color Contrast and Accessibility

8. Background Color

9. Background Images

cover vs. contain

10. Gradients

Linear Gradient

Radial Gradient

Conic Gradient

11. Layered Backgrounds

12. Opacity vs. Transparent Backgrounds

13. Borders and Shadows

14. Practical Button

15. Practical Surface

16. Debugging Checklist

17. Mini Practice

`cover` vs. `contain`