Reference
Color Theory
Master color theory to create visually appealing, accessible, and effective digital interfaces.
In this collection
About
Pick colors with intention. Make them readable. Build palettes that hold up across light mode, dark mode, and accessibility audits.
Contents
| File | Description |
|---|---|
| 01-fundamentals.md | How color works: light, perception, and basic terminology |
| 02-color-models.md | RGB, HEX, HSL, and when to use each |
| 03-color-wheel.md | The wheel, primary/secondary/tertiary, warm vs cool |
| 04-color-harmony.md | Complementary, analogous, triadic, and other schemes |
| 05-color-psychology.md | Emotional impact, cultural meanings, brand associations |
| 06-contrast-accessibility.md | WCAG, contrast ratios, and inclusive design |
| 07-color-in-ui.md | Applying color to UI elements, hierarchy, and states |
| 08-building-palettes.md | Creating cohesive color systems for projects |
| 09-dark-mode.md | Designing effective dark themes |
| 10-tools-reference.md | Tools and quick reference |
Prerequisites
- Basic familiarity with CSS (you know what
colorandbackground-colordo) - Access to a design tool (Figma, Sketch) or browser dev tools
Quick Start
In a hurry? Read these three:
- 02-color-models.md for HSL, the most intuitive model
- 06-contrast-accessibility.md for accessibility essentials
- 08-building-palettes.md to build your first palette
Key Takeaways
After working through these files you can:
- Pick colors with reasons, not vibes
- Hit WCAG AA contrast every time
- Build a complete palette (neutrals, primary, semantic) for a new project
- Ship a dark mode that does not just invert the light one
- Defend your color decisions in a review