CSS Colors
Every gradient, shadow and theme starts with how you write a color. Hex, rgb(), hsl() and the alpha channel — four notations, one skill that everything else in CSS builds on.
1. Four ways to write the same color
color: #5A8AB9; /* hex */ color: rgb(90, 138, 185); /* red green blue */ color: hsl(210, 40%, 54%); /* hue sat light */ color: rgba(90, 138, 185, 0.5); /* + alpha (50%) */
Hex is compact and everywhere. rgb() maps directly to screen light. hsl() is the designer's favorite: keep hue fixed, slide lightness for hover shades, slide saturation for muted variants — instant palettes.
2. Alpha: the transparency channel
The fourth value in rgba()/hsla() (or the last two hex digits in #5A8AB980) sets opacity from 0 to 1 for that color only. It's what makes shadows realistic and overlays readable — unlike the opacity property, which fades the whole element and its children.
3. Try it yourself
Give the first swatch the hex color #E0982D, the second hsl(150, 58%, 44%), and make the third a 40%-transparent navy using rgba(62,103,135,0.4).
4. Quiz — check your understanding
CSS Colors Quiz
4 questions · pass at 60%Q1. What does the last value in rgba(0, 0, 0, 0.5) control?
Q2. Which notation makes it easiest to create lighter/darker shades of one hue?
Q3. How is rgba(...) different from the opacity property?
Q4. #FF0000 is the same as…
Every lesson quiz you pass (60%+) is saved in your browser and counts toward the CSSmatic Certificate of Completion.