Free Accessible Color Palette Generator
This color palette generator builds accessible color schemes by design, not by luck — 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. Want a website's colors? Take a screenshot of it and upload that.
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 pick my own starting color?
Yes. Type a hex code or use the color picker above the mode buttons to set your own base color, and every harmony mode will build from it instead of a random starting point. Click "Reset to random" at any time to go back to random generation.
Can I extract colors from a website?
Not directly from a URL — browser security rules block a page from reading another site's content that way. But you can take a screenshot of the website and upload it to the Extract from Image tool above, which gets you the same result.
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.
How do I figure out my color palette for free?
Pick any harmony mode above and generate a palette instantly, or upload a photo you already like to the image extractor and pull colors straight from it. Both are free, with no account needed.
Is there a free color palette app?
This isn't a downloadable app, but it works free in any browser, including on your phone, so there's nothing to install.
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.