Key Insight
A color system defines a comprehensive, structured palette-including greys, primary shades, accents, and semantic colors-built using HSL for intuitive manipulation and designed to meet accessibility contrast requirements.
Key Points
- •Ditch hex for HSL-it's far more intuitive for creating shade variations
- •You need more colors than you think: 8-10 shades of grey, 5-10 shades per primary color
- •Define your shades up front: pick a middle base, then create lighter and darker variations
- •Don't let lightness kill your saturation-lighter shades need reduced saturation to avoid looking washed out
- •Greys don't have to be grey-add a subtle hue (cool blue or warm yellow) for personality
- •Accessible doesn't have to mean ugly-4.5:1 contrast is achievable with good color choices
- •Don't rely on color alone-always pair color with text, icons, or patterns for accessibility
- •[FIGURE - HSL vs Hex manipulation] Shows: Color picker comparing hex adjustment vs HSL sliders for creating variations. Teaches: HSL lets you reason about color in human terms-"lighter and less saturated"-while hex is opaque. Reproduce as: Interactive color picker with HSL controls.
- •[FIGURE - Full shade palette] Shows: Complete color palette with 9 shades of grey, primary, and accent colors from light to dark. Teaches: Professional palettes need full shade ranges for backgrounds, borders, text, and interactive states. Reproduce as: Palette generator with shade count control. Data: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900.
- •[FIGURE - Saturation-lightness relationship] Shows: Two lighter shade attempts-one with maintained saturation (washed out), one with reduced saturation (balanced). Teaches: As lightness increases, saturation must decrease to keep colors from looking garish. Reproduce as: Interactive shade generator showing S/L balance.
- •[FIGURE - Saturation for dark shades] Shows: Dark shade with low saturation (muddy) vs increased saturation (rich). Teaches: As lightness decreases, increase saturation to maintain color richness and prevent muddiness. Reproduce as: Dark shade adjuster.
- •[FIGURE - Tinted greys] Shows: Pure grey scale vs cool grey (blue tint) vs warm grey (yellow tint). Teaches: Adding 5-15% saturation with a hue makes greys feel intentional and cohesive with brand. Reproduce as: Grey scale with hue/saturation controls.
- •[FIGURE - Accessible color pairing] Shows: Text/background combinations with contrast ratios passing and failing WCAG 4.5:1. Teaches: Accessibility is achievable with intentional color choices-darker text shades on lighter backgrounds from the same palette. Reproduce as: Contrast checker with pass/fail indicators.
- •[FIGURE - Color-independent design] Shows: Alert message using only color vs using color + icon + text. Teaches: Color should reinforce meaning, not be the only indicator-ensures accessibility for colorblind users. Reproduce as: Alert component with toggleable accessibility features.
Guidelines
- ✓Build your grey scale first (it's used most)-from near-white (#fafafa) to near-black (#111827) in 8-10 steps
- ✓For each primary/accent color, create a full range from very light (backgrounds, highlights) to very dark (text on light backgrounds)
- ✓Use lighter shades for backgrounds, medium for borders and icons, and darker shades for text
- ✓Test all text/background combinations against WCAG contrast requirements before finalizing
- ✓Add a subtle hue to your greys to match your brand temperature-pure grey (#808080) feels lifeless
- ✓Define semantic colors (red=error, green=success, yellow=warning, blue=info) with their own shade ranges for flexible usage
Want to learn this interactively?
Experience hands-on experiments and test your understanding.
🔥
Practice this topic
Active recall - strengthens long-term retention