Python Colors & Backgrounds (HEX, RGB, HSL)
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.
"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
Common Beginner Traps & How to Fix Them
Confusing color with background-colorWhy 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.
Live Interactive Example
Hit Run Code to see it liveYour Turn: Micro Challenge
No pressure! Edit the starter code below and test your solution with instant feedback.
Set background color and text color
- Write a CSS rule for .btn setting background-color: #ffffff; and color: #000000;
Finished reading and practicing?
Mark this lesson as completed to update your course progress.