Palette Generator
New ExtensionMain Palette
86%
Saturation
Very high — may cause visual fatigue
53%
Lightness
Balanced — ideal for most designs
5
Tones
Very diverse — wide color range
2.9
Contrast
Low — limited text readability
How to Create Professional Color Palettes — Guide & FAQ
Create Your First Palette in 3 Steps
Pick a base color
Use the color picker in the sidebar, paste a HEX code, or pick one of the quick presets. This is your starting point.
Choose a harmony
Each harmony type produces a different mood. Not sure which one? Start with "Analogous" for something safe, or "Complementary" for impact.
Refine and export
Lock colors you like, regenerate the rest, adjust manually, and check accessibility. When you're happy, export as CSS, Tailwind, or Brand Kit PDF.
What Can You Do Here?
This generator has more than it looks. Explore the tabs above the palette to unlock these features:
Variations
Tints, shades, and tones of each color for light/dark themes
Accessibility
WCAG contrast ratios between all pairs — check before you ship
Typography
Font suggestions based on your palette's mood, with scale generator
Preview
See your palette in a real website mockup, dashboard, or landing page
Statistics
Harmony score, balance, saturation distribution, and breakdown
Gradients
Auto-generated gradients from your colors, with CSS export
Animations
Animated gradient backgrounds ready to copy — CSS or video
Brand Kit PDF
Export a full brand guide with your palette, fonts, and usage rules
Harmony Types — When to Use Each One
Analogous — Calm, cohesive
Best for: Blogs, wellness, nature brands, portfolios
Monochromatic — Elegant, minimal
Best for: Luxury brands, resumes, minimalist UI
Complementary — Bold, high contrast
Best for: CTAs, sports brands, attention-grabbing banners
Triadic — Vibrant, balanced
Best for: Kids brands, gaming, creative agencies
Tetradic — Rich, complex
Best for: Dashboards, data viz, editorial design
Split-Complementary — Contrast without tension
Best for: E-commerce, SaaS, marketing sites
Square — Dynamic, diverse
Best for: Events, festivals, multi-brand platforms
Double Split-Comp. — Nuanced contrast
Best for: Complex UIs, magazines, media sites
Clash — Provocative, edgy
Best for: Streetwear, music, experimental art
Five-Tone — Diverse, colorful
Best for: Infographics, presentations, playful apps
Six-Tone — Full spectrum
Best for: Color-rich illustrations, comprehensive themes
Quick Setup by Project Type
🌐 Website / SaaS
Use Analogous or Split-Complementary with 5 colors. Assign roles: primary for buttons, secondary for headers, accent for highlights, 2 neutrals for backgrounds and text. Check accessibility before deploying.
🏷️ Brand Identity
Start with your brand's main color. Try Complementary for boldness or Monochromatic for elegance. Assign roles, then export the Brand Kit PDF — it includes variations, pairings, and usage guidelines.
📱 Mobile App
Keep it to 4-5 colors. Analogous works well for calm UIs. Make sure the primary and background pass WCAG AA contrast. Use the Preview tab to visualize in a mobile mockup.
📊 Presentation / Deck
Use Five-Tone or Six-Tone for data-rich slides. Each data series gets a distinct color. Check the Statistics tab to ensure your colors are visually balanced and distinguishable.
Common Mistakes to Avoid
✗ Too many saturated colors
→ Pick 1-2 vibrant colors and keep the rest muted or neutral. The Monochromatic harmony helps with this.
✗ Ignoring contrast
→ Beautiful colors can be unreadable. Always check the Accessibility tab — your text needs at least a 4.5:1 ratio against its background.
✗ No neutral colors
→ Pure palettes without grays, whites, or off-whites leave no room for breathing space. Add at least 1-2 neutrals.
✗ Same saturation for all colors
→ Variety in saturation creates depth. Mix vivid accent colors with desaturated backgrounds. Check the Statistics tab for distribution.
✗ Not testing in dark mode
→ Colors that work on white might fail on dark backgrounds. Use the Variations tab to generate dark-mode-safe tints and shades.
✗ Picking colors in isolation
→ A color looks different depending on its neighbors. Always judge colors together in context — use the Preview tab.
Pro Tips
- ✓The 60-30-10 rule: primary color 60%, secondary 30%, accent 10%. This ratio always works.
- ✓Lock your best colors (click the lock icon on a card), then hit Regenerate to find the perfect companions.
- ✓Assign roles (Primary, Secondary, Accent, Neutral) using the ROL button on each card — it helps when exporting.
- ✓Use the quality score as a guide, not a rule. A score of 70+ is generally good, but break rules intentionally if your design calls for it.
- ✓Export your palette as Tailwind config or CSS variables for instant integration. The Brand Kit PDF is great for sharing with clients or teams.
- ✓Try trending palettes in the sidebar for real-world inspiration, then customize them to make them yours.
Frequently Asked Questions
How many colors should my palette have?
For most projects, 5 colors work great: 1 primary, 1 secondary, 1 accent, and 2 neutrals. Data-heavy projects (dashboards, infographics) may need 7-10. Start with fewer and add only if needed.
I have a brand color — how do I build a full palette around it?
Paste your brand color as the base color, choose Analogous for a subtle palette or Complementary for more contrast. Lock your brand color, regenerate until you find colors you like, assign roles, and export as Brand Kit PDF.
What do the lock icons on each color card do?
Locked colors stay fixed when you regenerate. This lets you build your palette step by step — lock colors you love, keep regenerating the rest until everything works together.
My palette looks good but the quality score is low — should I worry?
The score evaluates harmony, contrast, balance, and accessibility objectively. A low score often flags poor contrast or unbalanced saturation. Check the breakdown to see what's off, but trust your eye for creative decisions.
How do I make my palette accessible?
Switch to the Accessibility tab. It shows WCAG contrast ratios between every pair of colors. Your body text needs a 4.5:1 ratio (AA) or 7:1 (AAA) against its background. Large text only needs 3:1.
What's the best way to export for developers?
Click Export and choose your format: CSS custom properties, Tailwind config, SCSS variables, JSON, or direct code. If roles are assigned, they'll be included as variable names (e.g., --color-primary).
Can I use this for dark mode design?
Yes. Generate your base palette, then switch to the Variations tab. It generates tints (lighter) and shades (darker) for each color. Use darker shades as backgrounds and lighter tints for text in dark mode.
What are the trending palettes for?
They're real-world color combinations organized by style (modern, elegant, nature, etc.). Great for quick inspiration or as a starting point. Click one, then customize it — change individual colors, lock what you like, regenerate the rest.