Build your perfect palette
Pick a mood, lock colors you love, and press Space to randomize. Every palette is theory-aware and WCAG-checked.
Quick Tips & Shortcuts
Lock colors you love, then use controls or hotkeys to generate and shuffle. Watch the Live Preview window update instantly on the right!
Choose a Mood
Harmony Rule
Create a high-converting SaaS Landing Page with a clean #FAFAFA canvas, hero section with title highlights, rounded pill badges, primary CTA button, and 3 feature cards. Use a clean, modern #FAFAFA canvas background. Apply the exact palette hex codes consistently across components: - Color Tokens: #E07A5F (Primary Brand / Accent), #B9314F (Secondary Accent), #D5A18E (Supporting Highlight), #3A4F41 (Detail / Tag Color) Design Guidelines: 1. Maintain high contrast text (WCAG AAA) on buttons and interactive elements. 2. Use soft 1px borders (#E5E7EB) and subtle elevation shadows (0 10px 30px rgba(0,0,0,0.05)). 3. Apply rounded corners (8px - 14px) and modern 2026 typography (Syne / DM Sans). 4. Overall Mood: Warm Palette (warm). Ensure the visual hierarchy matches the live preview.
Open in AI Copilot 🤖Live Preview
Live preview · Shuffle Roles to swap color assignments
About Warm Palettes
Warm palettes use hues from 0°–60° (reds, oranges, golds). High saturation creates energy and appetite; lower saturation reads as cozy and approachable. Warm colors advance visually — they pull the eye forward.
About ihatecolors's Generator
Theory-Aware Generation
Every palette uses one of five harmony rules — complementary, analogous, triadic, split-complementary, or tetradic — selected automatically based on your chosen mood. Colors are scored and re-generated until they pass a harmony threshold.
WCAG Accessibility
Every generated palette is automatically checked against WCAG 2.1 contrast ratio standards. You'll see live AA and AAA grades for background/text, background/accent, and accent/text combinations.
Frequently Asked Questions
How do I use this color palette generator?
Select a mood (like Warm, Cool, or Neon) from the dropdown and press Space to randomize. You can lock any color you like by clicking the lock icon, and the generator will find harmonious matches for the remaining slots.
What is color harmony?
Color harmony is the use of color theory to create combinations that are visually pleasing and balanced. Our generator uses mathematical models like complementary and analogous harmonies to ensure your website colors work together.
What is WCAG contrast?
WCAG (Web Content Accessibility Guidelines) ensures that text is readable against its background. A contrast ratio of 4.5:1 (AA) is the standard for normal text, while 7:1 (AAA) is the highest standard. We display these scores in real-time.
Can I use these palettes in Figma or Canva?
Yes. Simply click on any hex code to copy it to your clipboard, then paste it into your design tool's color picker. You can also copy the entire palette or the AI prompt for use in other workflows.