Colors
📌 Covered in this chapter:
Named Colors · Hex · RGB · RGBA · HSL · HSLA · Modern Functions · Opacity · Transparency · Contrast · Theme Colors · CSS Variables
Welcome to Chapter 11: Colors — part of the CSS Complete Roadmap. This lesson covers all subtopics with clear explanations, code examples, and best practices used in professional web development.
1CSS Color Formats
| Format | Example | Notes |
|---|---|---|
| Named | red, tomato | 140+ keywords |
| Hex | #2563eb, #fff | Most common in design |
| RGB / RGBA | rgb(37, 99, 235) | Alpha for transparency |
| HSL / HSLA | hsl(217, 91%, 53%) | Intuitive hue/sat/light |
| Modern | oklch(), color-mix() | CSS Color Level 4+ |
2Opacity, Transparency & Color Contrast
.overlay {
background-color: rgba(0, 0, 0, 0.5);
}
.card {
opacity: 0.9; /* Affects entire element including children */
}
.text {
color: hsl(215 16% 47% / 0.8); /* Modern alpha syntax */
}Color contrast: WCAG guidelines — text ki minimum 4.5:1 contrast ratio (normal text). Accessibility tools and DevTools contrast checker use cheyandi.
3Theme Colors with CSS Variables
CSS — Color Variables▶ Try in Editor
:root {
--primary-color: #2563eb;
--text-color: #1f2937;
--surface-color: #ffffff;
--muted-color: #6b7280;
}
body {
color: var(--text-color);
background-color: var(--surface-color);
}
.btn-primary {
background-color: var(--primary-color);
color: #fff;
}
/* Dark theme override */
[data-theme="dark"] {
--text-color: #f9fafb;
--surface-color: #111827;
}