Frontend Master

JavaScript Curriculum

Colors and Backgrounds
+55 XP

Colors and Backgrounds

easy
~30 min·55 XP

The coffee shop page looks clean but monochrome. Time to bring in a warm color palette, a hero gradient, and card tints — all while keeping the text readable for everyone.

Colors and Backgrounds

Color is both creative and technical in CSS. You have five color formats to choose from, gradients to build, and accessibility standards to meet. This lesson covers all three.

Color Formats

CSS supports five color formats. Each has its strengths:

color-formats.css
Pick a color
Your color in Hex
#1f6feb

The most common format on the web. # followed by 6 hex digits (0–9, a–f) — two each for red, green, blue. Shorthand: #rgb for #rrggbb when digits repeat.

Common examples
#ff7b72
red component: ff (255)
#56d364
green component: 56 (86)
#79c0ff
blue component: ff (255)
#333
shorthand for #333333
💡Which format should I use?
Use **hex** for fixed brand colors and design tokens. Use **hsl/hsla** when building palettes — it's easy to create tints (increase L%) and shades (decrease L%). Use **rgba** for overlays and shadows where you need transparency. Avoid named colors (red, blue) in production — they're too imprecise.

Backgrounds and Gradients

The background shorthand covers color, gradients, images, position, and size:

backgrounds.css
The Grind Coffee

The simplest background. Use background (shorthand) or background-color.

CSS
.hero {
  background: #1f6feb;
}
ℹ️background vs background-color
Use background-color when you only want to set a solid color — it's explicit and won't accidentally override other background properties. Use the background shorthand when you're setting multiple properties (color + image + position) in one declaration.

Color Contrast — Accessibility Matters

Low contrast text fails WCAG accessibility guidelines and is genuinely hard to read for many users. The minimum contrast ratio for normal text is 4.5:1 (AA). Check every text/background combination:

contrast-checker.css

The Grind Coffee

Specialty coffee, crafted daily

Text (foreground)
#c9d1d9
Background
#0d1117
Contrast ratio12.26:1
✓AA — Normal textneeds 4.5:1 — Body text, labels
✓AA — Large textneeds 3.0:1 — 18px+ or 14px+ bold
✓AAA — Normal textneeds 7.0:1 — Enhanced accessibility
Try a preset
⚠️WCAG AA is the legal minimum in many countries
WCAG 2.1 AA compliance is required by law for public-sector websites in the UK, EU, and US. Failing contrast ratios is one of the most common accessibility failures. Build the habit of checking contrast as you design — not as an afterthought.

Your Challenge

Apply a full color palette to the coffee shop page — warm background, gradient hero, accessible text colors throughout.

Challenge

Style the page with: a warm hex color on body background, an HSL color on headings, an RGBA semi-transparent overlay on the .hero section using a linear-gradient, and verify your text/background contrast passes WCAG AA using the checker.

colorbackgroundbackground-colorhexrgbrgbahslhslalinear-gradientradial-gradientopacitycontrastWCAGaccessibility
Colors and Backgrounds | Nexus Learn