Color Palette Balance AI
Analyze color palette harmony, balance, and WCAG accessibility compliance. Enter values for instant results with step-by-step formulas.
Formula
Balance Score = 100 - |Primary-60| - |Secondary-30| - |Accent-10|
Balance is measured against the 60-30-10 ideal ratio. Harmony is determined by hue relationships on the color wheel. Contrast ratios follow WCAG luminance calculations.
Worked Examples
Example 1: Corporate Tech Brand
Problem:Design a professional SaaS palette: primary blue, secondary gray, accent orange.
Solution:Primary: #2563EB (Blue, 60%)\nSecondary: #6B7280 (Gray, 30%)\nAccent: #F97316 (Orange, 10%)\n\nAnalysis:\n- Harmony: Split-complementary (blue-orange)\n- Balance: 60-30-10 perfect\n- Contrast: Blue on white = 4.8:1 ✓ WCAG AA\n- Psychology: Trust + neutrality + energy\n\nScore: 92/100
Result:Professional palette | 4.8:1 contrast | Split-complementary harmony
Example 2: Health & Wellness App
Problem:Create a calming palette for a meditation app with green primary.
Solution:Primary: #059669 (Emerald, 60%)\nSecondary: #E0F2FE (Light Blue, 30%)\nAccent: #FBBF24 (Amber, 10%)\n\nAnalysis:\n- Harmony: Analogous-adjacent\n- Cool dominant with warm accent\n- Contrast: Green on white = 3.9:1 (borderline)\n- Consider darker green for text\n\nScore: 78/100
Result:Calming palette | Consider darker primary for text accessibility
Example 3: E-commerce Fashion
Problem:Bold, modern palette for fashion brand with high visual impact.
Solution:Primary: #18181B (Near-black, 60%)\nSecondary: #FAFAF9 (Off-white, 30%)\nAccent: #E11D48 (Rose, 10%)\n\nAnalysis:\n- Harmony: Achromatic + pop color\n- Maximum contrast base\n- Accent creates focal points\n- Sophisticated, editorial feel\n\nScore: 95/100
Result:High contrast | Editorial aesthetic | Strong accent impact
Frequently Asked Questions
What is the 60-30-10 color rule?
The 60-30-10 rule is a classic interior design principle adapted for all visual design. It suggests using 60% dominant color (primary), 30% secondary color, and 10% accent color. This creates visual balance and hierarchy. The primary color sets the overall tone, secondary provides contrast and support, and accent adds visual interest and focal points.
What is color harmony?
Color harmony refers to color combinations that are aesthetically pleasing. Common harmonies include: Analogous (adjacent on wheel), Complementary (opposite), Triadic (equidistant), Split-complementary, and Tetradic. Harmonious palettes create visual coherence and professional appearance.
How does saturation affect palette balance?
Saturation (color intensity) affects visual weight. Highly saturated colors draw attention and feel energetic; desaturated colors feel calm and sophisticated. Mix saturation levels: use high saturation for accents, moderate for secondary, and variable for primary based on mood. Uniform saturation can feel flat or overwhelming.
What is color temperature in palette design?
Color temperature refers to perceived warmth or coolness. Warm colors (red, orange, yellow) advance and energize; cool colors (blue, green, purple) recede and calm. Balanced palettes often mix temperatures: warm accent on cool base creates focal points. All-warm or all-cool palettes create specific moods but less contrast.