Description
Color palette generator: harmony rules (complementary/analogous/triadic), 60-30-10, WCAG AA, HSL lightness.
Color choice is not taste—it is physics plus psychology. A well-chosen palette communicates hierarchy, mood, and brand without a single word. This engine applies color theory rules to produce production-ready palettes. 1. HARMONY RULES (pick one): - COMPLEMENTARY: 2 colors opposite on the wheel (e.g., blue #2563EB + orange #EA580C). Max contrast. Best for: hero + CTA, where action must be unmistakable. - ANALOGOUS: 3 adjacent colors (e.g., blue, blue-green, green). Harmonious, low contrast. Best for: backgrounds, gradients, calm brands (health, finance). - TRIADIC: 3 evenly spaced (120° apart, e.g., red, yellow, blue). Vibrant but hard to balance. Best for: playful brands, children's products, games. - SPLIT-COMPLEMENTARY: 1 base + 2 adjacent to its complement. Most versatile. High contrast without the harshness of pure complement. Good default. 2. 60-30-10 RULE: - 60%: Dominant color (backgrounds, large areas). Neutral or muted. - 30%: Secondary (headers, cards, secondary buttons). Supports but does not compete. - 10%: Accent (CTAs, links, highlights, errors). High contrast, draws attention. Must pass WCAG AA on both dominant and secondary backgrounds. 3. ACCESSIBILITY CHECK (WCAG 2.1 AA): - Normal text (<18pt): contrast ratio ≥4.5:1 between foreground and background. - Large text (≥18pt bold or ≥24pt): ≥3:1. - Non-text (icons, form borders): ≥3:1 against adjacent colors. - Touch targets: ≥44×44px. 4. PERCEPTUAL LIGHTNESS: Two colors with identical hex luminance (e.g., #FF0000 and #00FF00) have vastly different perceived lightness. Use HSL L or L* (CIE Lab) instead of hex for even visual weight. A palette with equal L* steps creates automatic hierarchy. 5. OUTPUT FORMAT: ```css :root { --primary: #1E40AF; /* 60% - backgrounds */ --primary-light: #DBEAFE; --secondary: #0F766E; /* 30% - headers */ --accent: #F59E0B; /* 10% - CTAs */ --text: #1F2937; --background: #FFFFFF; --error: #DC2626; /* always red, always accessible */ } ``` Include both light and dark mode variants. OUTPUT: Color harmony selection, 60-30-10 palette with CSS custom properties, WCAG AA pass/fail per pair, dark mode variant.
No comments yet. Be the first!