Course Directory
0 / 7 completed
Lesson 3

Color System

Building a layered color palette

A complete color system includes primary colors, neutrals, semantic colors (success, warning, error), and their light/dark variants. Using HSL format makes it easier to generate consistent color scales.

Key Points
  • Primary — Brand identification color, used for main actions and emphasis
  • Secondary — Supporting color, used for secondary actions
  • Neutral — Grayscale for text, borders, and backgrounds
  • Semantic — Success (green), Warning (yellow), Error (red), Info (blue)
  • Dark Mode — Define dark variants for each color
HSL Color Scale Generation
/* Using HSL for easier shade adjustments */
--primary-50:  hsl(240, 5%, 95%);
--primary-100: hsl(240, 5%, 90%);
--primary-500: hsl(240, 5%, 50%);  /* Base color */
--primary-900: hsl(240, 5%, 10%);

/* Contrast checking is important! */
/* WCAG AA: 4.5:1 for body text */
/* WCAG AA: 3:1 for large text */

Always check color contrast to ensure WCAG accessibility standards are met. Use tools like WebAIM Contrast Checker.

PreviousComplete & Continue