Color Harmony Calculator
Generate harmonic palettes based on color theory: complementary, analogous, triadic, tetradic, square and monochromatic with live preview, export and WCAG analysis
Color Wheel
Palette Strip
Generated Palette
#7126D9
rgb(113, 38, 217) · hsl(265, 70%, 50%)
#8ED926
rgb(142, 217, 38) · hsl(85, 70%, 50%)
Preview
Sample Title
This is sample text showing how your harmonic colors look in a real design.
Sample Title
This is sample text showing how your harmonic colors look in a real design.
WCAG Contrast Between Colors
Export Palette
About Color Harmonies
Color harmonies are combinations that work well together based on their position on the color wheel. Each type of harmony creates a different visual effect and is suitable for different design purposes. Experiment with saturation, lightness and rotation to find the perfect combination.
How it works
Color harmonies are combinations based on geometric relationships within the color wheel. Color theory shows that certain angles between hues produce naturally balanced and visually pleasing palettes.
What This Calculator Offers
- 7 harmony types: Complementary, Analogous, Triadic, Tetradic (rectangular), Split-Complementary, Square and Monochromatic.
- Real-time controls: Adjust saturation, lightness and rotation to fine-tune each palette.
- Interactive color wheel: See every color's position on the wheel with connecting lines.
- Color roles: Each color displays its function (Base, Complement, Accent, etc.).
- Design preview: See how your colors look on real cards and buttons.
- WCAG contrast: Check accessibility between every pair of generated colors.
- Professional export: Copy your palette as CSS Variables, SCSS, Tailwind config or JSON.
- Use as base: Click any generated color to make it the new base color.
The 7 Harmony Types Explained
🎯 Complementary (180°)
Two diametrically opposite colors on the wheel. They produce the maximum contrast possible between chromatic hues. Ideal for CTAs, alerts and elements that need to stand out. Classic example: blue + orange.
🌈 Analogous (30°)
Neighboring colors on the wheel (~30° apart). They create soft, cohesive palettes, perfect for backgrounds, gradients and designs that convey calm. Nature uses analogous colors constantly (sunset tones, green leaves with yellows).
🔺 Triadic (120°)
Three equidistant colors forming an equilateral triangle. Offers variety with balance. Works great for illustrations, infographics and youthful brands that need energy without chaos.
🔷 Tetradic / Rectangular (60° + 180°)
Four colors forming a rectangle on the wheel. Provides maximum chromatic variety with two complementary pairs. Ideal for dashboards, complex design systems and data palettes. Unlike square, the rectangle gives more control over dominant pairs.
✨ Split-Complementary (150° + 210°)
The base color plus the two colors adjacent to its complement. High but softer contrastthan pure complementary. Excellent for beginners: it's hard to go wrong with this harmony.
⬛ Square (90°)
Four equidistant colors (every 90°) forming a perfect square. Offers total symmetric balance. More challenging to use than tetradic, but produces very dynamic palettes. Works best when one color dominates and the rest serve as accents.
🎨 Monochromatic
Variations of a single hue by altering saturation and lightness. The most safe and elegant harmony. Perfect for minimalist design, fashion, photography and premium brands. Never produces visual dissonance.
The 60-30-10 Rule
The golden rule of color design: use the dominant color at 60% of the surface (backgrounds, large areas), the secondary at 30% (sections, cards, headers) and the accent at only 10% (buttons, icons, links). This ratio creates natural visual hierarchy and prevents chromatic overload.
🛠️ Professional Tips
Differentiated saturation: Don't use the same saturation for all colors. Lower saturation for the dominant (60%) and raise it for the accent (10%) to create depth.
Try "Use as base": Click a generated color to explore it as a new base. It's the fastest way to iterate and discover unexpected combinations.
Check the contrast: The WCAG section shows which pairs in your palette are accessible for text. Don't use "Fail" pairs as text on background.
Export with roles: When exporting CSS/SCSS, variable names reflect the color's role (--base, --complement, --accent), making integration straightforward.
💡 5 Practical Use Cases
Case 1: Tech startup landing page
Base color blue #3B82F6. You need a professional, cohesive palette.
→ Analogous harmony: Add violet #6366F1 and cyan #06B6D4
→ Result: Cool, uniform tech palette. Use blue at 60%, violet at 30%, cyan at 10%.
Case 2: CTA button on a green website
Your site uses green #10B981 as primary. You need a button that draws attention.
→ Complementary harmony: Generates pink/red #F43F5E
→ Maximum chromatic contrast guides the eye to the CTA. Check WCAG contrast for the button text.
Case 3: Dashboard with 4 data categories
You need to visually differentiate 4 sections without visual chaos.
→ Tetradic harmony from #8B5CF6 (purple)
→ Get 4 harmonic tones. Lower saturation to ~40% for section backgrounds, raise to 80% for icons and badges.
Case 4: Premium / minimalist brand
You want a sleek, restrained look for a luxury brand or design studio.
→ Monochromatic harmony from dark blue #1E3A5F
→ Generates 5 variations: near-black for dense backgrounds to light blue for accents. Zero dissonance risk.
Case 5: Children's illustration / casual game
You need a vibrant, fun palette for kids' content or a casual game.
→ Triadic harmony from red #EF4444 with high saturation (80%+)
→ Get equidistant red, green, blue/violet. Raise lightness for a cheerful, accessible look.
Harmonies vs. Other Tools
| Need | Recommended tool |
|---|---|
| Create palette from a hue | This calculator |
| Check contrast between 2 colors | Contrast Calculator |
| Check full palette (NxN) | Contrast Matrix |
| Palette from an image | Image Analyzer |
| Explore named colors | Color Explorer |