Why Color Palettes Matter in UI Design
A well-chosen color palette does three things simultaneously: it establishes visual hierarchy (directing the eye to what matters), communicates personality and brand, and meets accessibility standards so the interface is usable for everyone, including people with color vision deficiencies.
Choosing colors by feel — clicking around a color picker until something looks right — rarely produces a palette that works across all these dimensions. Color theory gives you a systematic approach: start with one anchor color and derive the rest using geometric relationships on the color wheel.
Color Theory Fundamentals
The Color Wheel
The modern color wheel arranges hues in a circle based on their perceptual relationships. Adjacent colors feel harmonious; opposite colors create contrast. The wheel is the foundation of every color harmony system.
Hue, Saturation, and Lightness (HSL)
HSL is more intuitive for design work than RGB:
- Hue: Position on the color wheel, 0–360°
- Saturation: Intensity, 0% (gray) to 100% (vivid)
- Lightness: Brightness, 0% (black) to 100% (white)
To create a tint (lighter version), increase lightness. To create a shade (darker version), decrease lightness. To desaturate for a background, reduce saturation. All while keeping the same hue.
Color Harmony Schemes
Monochromatic
One hue across a range of lightness and saturation values. Creates cohesion and sophistication. Safe choice for minimalist designs.
Base: hsl(220, 80%, 50%)
Light tint: hsl(220, 80%, 90%)
Mid shade: hsl(220, 80%, 35%)
Dark shade: hsl(220, 80%, 20%)
Complementary
Two colors directly opposite on the color wheel (180° apart). High contrast — good for call-to-action buttons against backgrounds. Use one color as dominant, the other as accent.
Blue hsl(220, 80%, 50%) + Orange hsl(40, 80%, 50%)
Split Complementary
One base color plus the two colors adjacent to its complement. More nuanced than complementary — high contrast but less visually aggressive.
Analogous
Three or more colors adjacent on the color wheel (within ~30–60°). Creates harmony and a natural feel. Common in nature-inspired designs.
Triadic
Three colors evenly spaced (120° apart). Vibrant and balanced. Requires careful management — usually one dominant, one secondary, one accent.
Tetradic (Square)
Four colors at 90° intervals. Rich palette but challenging to balance. Limit saturated versions to accents only.
Tints, Shades, and Tones
A single hue produces a full range of usable colors:
- Tint: Add white (increase lightness). Use for backgrounds, hover states.
- Shade: Add black (decrease lightness). Use for text, borders, shadows.
- Tone: Add gray (reduce saturation). Use for muted UI elements.
A practical scale for a UI palette:
| Step | Lightness | Use case |
|---|---|---|
| 50 | 95% | Page background |
| 100 | 90% | Card background |
| 200 | 80% | Subtle border |
| 300 | 70% | Disabled state |
| 400 | 60% | Placeholder text |
| 500 | 50% | Primary color |
| 600 | 40% | Hover state |
| 700 | 30% | Active state |
| 800 | 20% | Heading text |
| 900 | 10% | Body text |
This approach mirrors design systems like Tailwind CSS, Material Design, and Radix UI Colors.
Accessibility: Contrast Ratios
WCAG 2.1 accessibility guidelines require minimum contrast between text and background:
- AA level: 4.5:1 for normal text, 3:1 for large text (18pt+)
- AAA level: 7:1 for normal text, 4.5:1 for large text
Common failure patterns:
- Light gray text on white background (often fails at #999 on white)
- Colored text on colored backgrounds with similar lightness
- Icon-only buttons without sufficient contrast
A quick rule: if both text and background have similar lightness values (both light or both dark), contrast will be insufficient. Aim for a lightness difference of at least 40–50 percentage points.
Applying a Palette in CSS
Once you have your palette, define it as CSS custom properties at the :root level:
:root {
--color-primary-50: hsl(220, 80%, 95%);
--color-primary-100: hsl(220, 80%, 90%);
--color-primary-500: hsl(220, 80%, 50%);
--color-primary-600: hsl(220, 80%, 40%);
--color-primary-900: hsl(220, 80%, 10%);
--color-accent-500: hsl(40, 80%, 50%);
--color-neutral-100: hsl(220, 10%, 95%);
--color-neutral-900: hsl(220, 10%, 10%);
}
Reference these variables throughout your stylesheets. When you adjust the palette, change one value and it updates everywhere.
Dark Mode Color Palettes
Dark mode isn't simply inverting your light palette. Pure black (#000000) backgrounds create harsh contrast with white text. Instead:
- Use dark grays (hsl(220, 10%, 8–12%)) for backgrounds
- Keep primary accent colors at the same hue but adjust saturation (+10%) and lightness (+10%) to compensate for the Helmholtz–Kohlrausch effect (saturated colors appear brighter on dark backgrounds)
- Background elevations use subtle lightness increments (10%, 12%, 15%) rather than shadows
Generate Your Palette
→ Use the Color Palette Generator to generate tints, shades, and complementary colors from any base color. Export values in HEX, RGB, or HSL.
→ The Color Converter converts between HEX, RGB, and HSL so you can use your palette values in any format your codebase requires.