Color Generator

Build your perfect palette.

Pick a mood, lock colors you love, and press Space to randomize. Every palette is theory-aware and WCAG-checked.

15 moods 5 harmony rules WCAG AA / AAA Live preview

Quick Tips & Shortcuts

Lock colors you love, then use the controls or hotkeys to generate and shuffle. Watch the Live Preview update instantly.

Randomize SpaceShuffle SSimilar GUndo Ctrl+ZRedo Shift+Z
Choose a MoodReds, oranges, golds
Harmony Rule
Current PaletteClick a swatch to copy
#E07A5F
Background
Copy
#B9314F
Primary Accent
Copy
#D5A18E
Secondary
Copy
#3A4F41
Body Text
Copy
Fine-TuneApplies to unlocked colors
Lightness
Saturation
Palette Colors
AI Prompt
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
ExportOne-click copy
Browse Warm palettes in the library →
Fail
3.0:1
BG vs Text
Fail
2.0:1
BG vs Accent
Fail
1.5:1
Accent/Text

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.

Is the generator free to use?

Completely. Unlimited palettes, no account, no watermark — every palette comes with hex codes, WCAG scores, CSS/Tailwind export and an AI prompt.

How is this different from other palette generators?

Most generators randomize blindly. This one scores every candidate against color-theory harmony rules and WCAG thresholds before showing it, and gives each color a design role so you know exactly where to use it.

Not sure where to start?

Jump into a curated corner of the library, or open the generated palette in the studio to fine-tune it yourself.

Skip to content