Lesson 04 of 20

5 mins read

Colors & Backgrounds (HEX, RGB, HSL)

In Plain English

Colors bring interfaces to life. In CSS, you can set foreground text color with color, container fills with background-color, and use precision formats: Hex codes (#38bdf8), RGB (rgb(56, 189, 248)), and RGBA with opacity.

The Mental Model

"Named colors like "red" or "blue" are like a 12-pack of kindergarten crayons. Hex and RGB are like an artist studio with 16.7 million precision mixed paint shades."

Deep Dive: How It Works

color: Changes the text font color.

background-color: Changes the background fill of an element.

HEX Codes: #ffffff (white), #111214 (dark ink), #0284c7 (brand blue). 6 hexadecimal digits.

RGB & RGBA: rgb(255, 255, 255) or rgba(2, 132, 199, 0.2) where the 4th value is opacity from 0.0 (transparent) to 1.0 (solid).

HSL: hsl(200, 95%, 50%) — Hue (color wheel 0-360), Saturation (vibrancy %), Lightness (brightness %).

Syntax Blueprint

.card {
  color: #f8fafc;
  background-color: #1e2024;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

Foreground text color, solid background, and subtle translucent border.

Core Rules to Remember

Use HEX or RGBA: Hex codes are standard; RGBA allows subtle glassmorphism and translucent overlays.

Dark Mode Palette: Use dark slates (#1e2024, #2b2d31) rather than pure harsh black (#000000) for eye comfort.

Contrast Ratio: Ensure high contrast between text and background so content is easily readable.

Common Beginner Traps & How to Fix Them

Mistake:Confusing color with background-color

Why it happens: Writing color: #1e2024 expecting the box to turn dark, but turning the text dark instead.

How to fix: color is text; background-color is the container fill.

Pro Tip: Use hex shorthand when digits repeat: #ffffff can be written as #fff and #000000 as #000!

Live Interactive Example

Hit Run Code to see it live

Dark Theme Color Palette

CSS3

Live Browser Preview

Click "Preview / Apply" to view the rendered output.

How it works: rgba provides a modern subtle translucent glow for badges and highlights.

Your Turn: Micro Challenge

No pressure! Edit the starter code below and test your solution with instant feedback.

Micro Exercise

Set background color and text color

Write a CSS rule for .btn setting background-color: #ffffff; and color: #000000;

Browser Preview & Output

Click "Run & Check" to test your solution.

Finished reading and practicing?

Mark this lesson as completed to update your course progress.