Design5 min read

Color Theory for UI

Apply color theory to UI - building harmonious palettes, ensuring contrast, using hue/saturation/lightness for semantic meaning and brand expression.

Color TheoryUI DesignColor PaletteHSLDesign

skill: Color Theory for UI category: Design tags: [Color Theory, UI Design, Color Palette, HSL, Design] readingTime: 5

Color in UI is functional first, aesthetic second. Every color decision should answer 'what does this communicate?' before 'does this look nice?'. Use HSL for systematic palette generation - it's the most intuitive model for predictable color relationships. Never convey meaning through color alone.

Workflow

Work in HSL, design in HSLHSL (Hue, Saturation, Lightness) is the most intuitive color model for UI - you can predict how changing one value affects the color without experimentation.
Build a 9-step color scale per hueA systematic scale (50-900) ensures you have the right tint for every context - background, border, text, and interactive states - without ad hoc color picking.
Assign semantic color rolesNamed roles (brand, success, warning, danger, neutral) make color decisions consistent and enable theming - every button doesn't have to look up the hex for primary.
Select harmonious multi-color palettesColor harmony rules (complementary, analogous, triadic) create visual balance - colors that feel intentionally related rather than randomly picked.
Design the dark mode paletteDark mode isn't just 'invert colors' - it requires different saturation and lightness values to maintain contrast and visual hierarchy.

Output Format

Color system: 9-step scale per brand hue, semantic roles, harmonious accent palette, and dark mode overrides.

Colors:
  Brand blue: hsl(220, 90%, 50-90% scale)
  Accent amber: hsl(40, 90%, scale) - complementary
  Success: hsl(142, 76%, scale)
  Warning: hsl(40, 95%, scale)
  Danger: hsl(0, 93%, scale)
  Neutral: hsl(220, 10%, scale) - slightly tinted gray

Usage:
  80% neutral | 15% brand | 5% accent

Examples

Input

Output

Edge Cases & Gotchas

Brand color WCAG failure - Many brand colors fail WCAG contrast on white backgrounds. Create a 'text-safe' version of the brand color (darker, L ≤ 45%) specifically for text - never compromise contrast for brand accuracy.
Colorblind accessibility - 8% of males have red-green colorblind. Don't use red vs green alone (success/error) - add icons, patterns, or text labels. Test with Sim Daltonism or Chrome's vision deficiency emulation.
Color temperature in dark mode - Blue-tinted grays (#1E2030) feel cool and tech-focused; warm grays (#1E1C1A) feel more inviting. Match color temperature to brand personality.
Oklch for perceptual uniformity - HSL has perceptual non-uniformity - hsl(60°, 100%, 50%) appears much brighter than hsl(240°, 100%, 50%). Use oklch() for palettes where perceived brightness must be equal across hues.

When to Break These Rules

Use oklch() instead of HSL when building large palettes requiring perceptually uniform lightness (data visualization with 8+ categorical colors).
Use pre-built color systems (Radix Colors, Material Design 3 color scheme generator) instead of building from scratch when time is short and the brand isn't highly specific.

Reference Files

https://www.radix-ui.com/colors
https://oklch.com/