Color Palette Generator
Generate cohesive 5-color schemes anchored in classical color harmony. Fine-tune hues, lock your favorites, and export production-ready CSS variables or Tailwind tokens.
rgb(96, 165, 250)
hsl(213°, 94%, 68%)
rgb(56, 189, 248)
hsl(198°, 93%, 60%)
rgb(59, 130, 246)
hsl(217°, 91%, 60%)
rgb(99, 102, 241)
hsl(239°, 84%, 67%)
rgb(129, 140, 248)
hsl(234°, 89%, 74%)
:root {
--color-1: #60a5fa;
--color-2: #38bdf8;
--color-3: #3b82f6;
--color-4: #6366f1;
--color-5: #818cf8;
}Color Theory & Harmony Rules in Digital UI Design
1The 5 Classical Harmony Models Explained
- Monochromatic: Derived from a single hue with varied saturation and lightness. Creates low-friction, elegant SaaS interfaces and calm dashboards where content needs full user focus.
- Analogous: Hues that sit adjacent to each other on the 360° color wheel (e.g., cyan, sky blue, and cobalt). They feel natural and harmonious, reminiscent of landscapes or water.
- Complementary: Colors positioned directly opposite on the color wheel (180° apart). Delivers maximum visual tension, ideal for Primary Action (CTA) buttons contrasting against deep background tones.
- Triadic: Three hues evenly spaced at 120° intervals. Provides vibrant balance and energy; best applied when one color dominates while the other two serve as accents.
- Split-Complementary: Uses the base hue plus the two colors flanking its opposite (150° and 210°). Offers high contrast with less visual vibration than pure complementaries.
2The 60-30-10 Rule & Contrast Accessibility
A proven design framework for applying palette colors to digital layouts is the 60-30-10 distribution rule:
Always verify that any text placed on a color swatch satisfies WCAG 2.1 Level AA requirements: a minimum contrast ratio of 4.5:1 for normal text (under 18pt) and 3.0:1 for large headlines (18pt+ or bold 14pt+). Each swatch in our tool includes an automatic Contrast Ratio (CR) badge calculated using relative luminance.