Free Color Palette Generator
This color palette generator builds accessible, harmony-based color schemes right in your browser.
8 harmony modes • 60+ curated palettes • URL sharing • Gradients • PNG/SVG export • Color blindness simulator
Palette generator
All 5 swatches are locked, so generating won't change anything — unlock at least one swatch first.
Sample heading
This is how your current palette looks applied to a real layout, not just isolated swatches.
Generator Features
Extract from Image
Upload a photo to automatically extract its dominant colors into a palette.
Choose or drop an image
Gradient Generator
A quick 2-color gradient. For linear, radial, conic, and multi-stop gradients, use the full gradient generator.
Color Blindness Simulator
Preview the current palette under different vision types.
WCAG Accessibility
AA = 4.5:1 • AAA = 7:1 contrast ratios, checked against black and white text for each swatch. Need to check two of your own colors against each other? Use the full contrast checker.
Saved Palettes
Saved locally in your browser. No account required.
No saved palettes yet — click Save above to add one.
What Your Palette Means
A quick read on what your current colors tend to communicate. For the full reference guide, visit Color Meanings.
60+ Curated Color Palettes
Click any palette to load it instantly. Organized by category.
Tools & Features
8 Harmony Modes
Accessible Mode
URL Sharing
Image Extraction
Gradient Generator
Color Blindness Sim
WCAG Checker
PNG/SVG/CSS Export
Save Unlimited
How to use this generator
- Pick a harmony mode from the eight buttons above — each shows a short description and what it's typically good for.
- Click Generate (or press Space) to produce a new 5-color palette in that mode.
- Click the lock icon on any swatch to keep it fixed the next time you regenerate.
- Turn on Accessible palettes only if you need every swatch to already support readable black-or-white text.
- Save, share, or export the palette using the action row once you're happy with it.
Frequently Asked Questions
How do I share a palette?
Click Share URL to copy a link with your palette's colors encoded in it. Anyone who opens that link sees the exact same palette, no account needed.
What harmony modes do you offer?
Eight modes: Complementary, Analogous, Triadic, Tetrad, Square, Split-Complementary, Monochrome, and Random, each generating a 5-color palette from your base color.
Can I export palettes?
Yes. Export as CSS custom properties, a PNG image of your swatches, or an SVG file, all generated instantly in your browser.
How does the Accessibility Checker work?
It compares two colors using the WCAG 2.2 relative luminance formula and reports whether the pairing clears the 4.5:1 (AA) or 7:1 (AAA) contrast ratio for text.
Is this tool free to use?
Yes, every feature on this page is free with no signup, including image extraction, the color blindness simulator, and all export formats.
What's a good number of colors for a palette?
Five colors is a practical default for most projects. A common composition guideline is roughly 60% dominant color, 30% secondary, and 10% accent, which this generator's five swatches map onto reasonably well.
How do I choose a palette for my brand?
Start from one color that already represents your brand, generate a harmony from it, and check the pairing you plan to use for text against the contrast checker before finalizing it.
Sources
- WCAG 2.2 contrast ratio and relative luminance formulas — W3C Web Content Accessibility Guidelines 2.2Used for the mini WCAG check on each swatch.
- Color blindness simulation matrices (protanopia, deuteranopia, tritanopia) — standard, widely-published simplified simulation matricesNot a substitute for testing with actual assistive tools or real users.
- 60-30-10 color composition guidelineA common, widely-cited practical design convention, not attributed to a single publisher.