Colors
CSS colours: hex (#3b82f6), rgb(59, 130, 246), and hsl(217, 91%, 60%). Use CSS custom properties for colour tokens: --primary: #3b82f6. HSL is the most intuitive for making colour adjustments and variations.
CSS Colors color: red; /* named */
color: #ff0000; /* hex */
color: #f00; /* shorthand hex */
color: rgb(255, 0, 0); /* RGB */
color: rgba(255, 0, 0, 0.5); /* with opacity */
color: hsl(0, 100%, 50%); /* HSL */
color: oklch(0.6 0.25 30); /* modern OKLCH */
/* CSS variable */
:root { --primary: #3b82f6; }
h1 { color: var(--primary); }
Test your understanding before moving on
1. Which color format is most readable for humans?
A. Hex
B. RGB
C. HSL
D. Named
💡 HSL (Hue, Saturation, Lightness) is the most intuitive for humans to understand and adjust.
2. rgba() adds:
A. Red channel
B. A for alpha (opacity)
C. Anti-aliasing
D. Alternate colors
💡 rgba() adds an alpha channel: rgba(255, 0, 0, 0.5) = 50% transparent red.
3. How do you define a CSS variable?
A. $color: red
B. --color: red (in :root)
C. var(color): red
D. color = red
💡 CSS variables are declared with -- prefix: --color-primary: #3b82f6; inside :root {}.
4. How do you use a CSS variable?
A. $color
B. #{color}
C. var(--color)
D. @color
💡 CSS variables are used with var(): color: var(--primary);
5. Which is the modern CSS color format?
A. RGB
B. Hex
C. OKLCH
D. HSL only
💡 OKLCH is the modern perceptually uniform color space recommended in CSS Color Level 4.