Color Systems

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

Related Topics