CSS - Colors
Overview
Quick links: Exercises • Checks • Print as PDF
Estimated time: 12–18 minutes
CSS offers multiple color formats. Choose the right format for maintainability and browser support in your projects.
Learning Objectives
- Use different color formats: keywords, hex, rgb/rgba, hsl/hsla.
- Apply
currentColorfor flexible component styling. - Understand accessibility implications of color choices.
Details & Examples
Color Formats
- Keywords:
red,rebeccapurple,transparent - Hex:
#1f2937,#0008(with alpha) - RGB/A:
rgb(31 41 55 / .6)(modern space-separated syntax) - HSL/A:
hsl(210 40% 20% / .8) currentColor: inherit color value for borders, shadows, etc.
Hex #1f2937
HSL 210 40% 20%
RGBA w/ alpha
currentColor border
Try it
Vocabulary
- Alpha channel: Transparency value (0 = fully transparent, 1 = fully opaque).
- HSL: Hue, Saturation, Lightness—often more intuitive for color adjustments.
Common Pitfalls
- Poor contrast ratios make text hard to read; aim for WCAG AA (4.5:1) or better.
- Relying solely on color to convey information excludes colorblind users.
Checks for Understanding
- What advantage does HSL have over RGB for design work?
- When would you use
currentColor?
Show answers
- HSL makes it easier to create color variations (lighter/darker, more/less saturated) by adjusting individual values.
- For icons, borders, or other decorations that should match the current text color.
Exercises
- Create a color palette using HSL for a primary, a lighter (increase lightness), and a darker (decrease lightness) variant. Apply it to headings and buttons.
- Rebuild a card component using currentColor for borders and icons so it adapts automatically when text color changes.