Color Palette Generator: Build Harmonious, Accessible UI Palettes (60-30-10 Rule)

TL;DR — Build a balanced palette in 60 seconds with the Color Palette Generator (analogous, complementary, triadic, tetradic, monochromatic, OKLCH). Verify every text-on-background pair passes WCAG with the Contrast Checker. Explore relationships visually on the Color Theme Wheel.

The 60-30-10 rule (and why it works)

Borrowed from interior design and used by almost every well-known design system: 60% dominant (usually a neutral background), 30% secondary (panels, surfaces), 10% accent (CTAs, focus states). Without this ratio, UIs feel either flat or chaotic.

The 6 harmony rules

Harmony	Description	Best for
Monochromatic	One hue, varied lightness/saturation	Minimal, brand-focused UIs
Analogous	Adjacent on the wheel (blue → teal → green)	Calm, cohesive landing pages
Complementary	Opposite hues	High-contrast CTAs against background
Split-complementary	Base + two adjacent to its complement	Vibrant but not chaotic
Triadic	Three evenly spaced hues	Playful brands, dashboards with categories
Tetradic	Two complementary pairs	Rich illustration palettes

Build a palette in 60 seconds

1. Open the Color Palette Generator.
2. Pick a starting color (your brand hue if you have one).
3. Choose a harmony. Re-roll until the palette feels right.
4. Tweak any swatch individually for fine control.
5. Export as HEX list, Tailwind config, CSS custom properties, or SCSS variables.

Accessibility is not optional

A palette that fails WCAG is a palette that legally and practically excludes users. The targets:

• 4.5:1 contrast for normal text against its background (WCAG AA).
• 3:1 for large text (18pt+) and UI components.
• 7:1 for AAA — required in some regulated industries.

The Contrast Checker shows the ratio for any foreground/background pair, with a pass/fail badge. Run every CTA, body text, and link color through it before shipping.

OKLCH: the 2026 default for design systems

RGB and HSL look familiar but interpolate badly — try going from red to green in HSL and watch it pass through gray. OKLCH (lightness, chroma, hue in OK color space) is perceptually uniform: equal lightness values look equally bright across hues. Every major design system (Tailwind v4, Radix, Open Props) has moved to OKLCH for scales.

:root {
  /* OKLCH primary scale - perceptually uniform */
  --primary-50:  oklch(97%  0.02 250);
  --primary-500: oklch(60%  0.18 250);
  --primary-900: oklch(20%  0.10 250);
}

Common palette mistakes

• Too many accents. Pick one. Reserve the others for charts.
• Pure black (#000) text. Often too harsh — try #111 or oklch(20% 0 0).
• Untested dark mode. Inverting lightness alone breaks chroma. Build dark and light palettes intentionally, not by computation.
• Color as the only signal. ~8% of men have some red/green color blindness — always pair color with an icon or label.

FAQ

How many colors should a UI palette have?

5–9 is the sweet spot: one neutral scale (gray, 9 steps), one primary scale (9 steps), one accent, and 2–3 semantic colors (success, warning, danger).

What’s the difference between HSL and OKLCH?

HSL is older and not perceptually uniform — equal-L values can look very different in brightness. OKLCH fixes this. Browser support is now universal.

How do I make a palette accessible?

Run every text-on-background combination through the Contrast Checker. Aim for 4.5:1 minimum on body text.

Can I export to Tailwind?

Yes — the generator outputs a ready-to-paste colors object for tailwind.config.js.

Color toolkit

• Color Palette Generator — harmonies + export.
• Contrast Checker — WCAG pass/fail in one glance.
• Color Theme Wheel — explore relationships visually.