Lesson 2 of 3 · 2 min read
Color Theory for UI
Color is one of the most powerful tools in a designer's toolkit. It guides attention, communicates meaning, and establishes brand identity.
The Basics
Color Properties
Every color has three properties:
- Hue — The color itself (red, blue, green)
- Saturation — How vivid or muted the color is
- Lightness — How light or dark the color is
/* HSL is the most intuitive color model for UI */
--color-primary: hsl(239, 84%, 67%); /* Vivid indigo */
--color-primary-light: hsl(239, 84%, 80%); /* Lighter variant */
--color-primary-dark: hsl(239, 84%, 50%); /* Darker variant */
Semantic Colors
In UI design, colors carry meaning:
| Color | Meaning | Use |
|---|---|---|
| 🟢 Green | Success, positive | Confirmations, completed states |
| 🔴 Red | Error, danger | Errors, destructive actions |
| 🟡 Yellow | Warning, caution | Alerts, pending states |
| 🔵 Blue | Information | Links, informational notices |
Never rely on color alone to communicate information. Always pair color with text, icons, or patterns for accessibility.
Building a Palette
Step-by-step:
- Choose a primary color that reflects your brand
- Generate shades from 50 (lightest) to 900 (darkest)
- Add semantic colors (success, warning, error, info)
- Define neutrals — a gray scale for text and backgrounds
- Test in context — apply to actual UI components
Exercise
- Define a primary color in HSL format
- Create 9 shade variations (50–900)
- Define a neutral gray scale
- Add semantic colors
- Check contrast ratios meet WCAG AA (4.5:1)
Key Takeaway
Start with HSL — it's the most designer-friendly color model. Build palettes systematically, and always test for accessibility.