Color palette generator: build a palette from any image
Extract the dominant colors from any image, or generate a harmonious palette from a base color - with HEX/RGB/HSL, WCAG contrast checks, and one-click CSS, Tailwind, SCSS, and JSON export. Free, runs in your browser.
Drop an image here or click to upload
Processed in your browser - nothing is uploaded
A good color palette makes a brand feel intentional and a website easy to use. This generator builds one two ways - by pulling the dominant colors out of an image, or by expanding a single base color into a harmonious scheme - and then gives you the HEX/RGB/HSL values, accessibility checks, and code exports you need to actually ship it.
What this tool produces
Colors from an image
Dominant colors extracted from a logo, photo, or moodboard - in your browser.
Harmonies from a color
Analogous, complementary, triadic, monochromatic, and shade schemes.
Accessibility built in
A WCAG contrast ratio and AA/AAA verdict on every swatch.
Dev-ready export
Copy as CSS variables, Tailwind config, SCSS, or JSON tokens.
How to build a brand palette
- Choose a source - upload an image, or pick a base color and a harmony rule.
- Set the size - choose how many colors you want (3-10).
- Review & check contrast - inspect the values and WCAG level on each swatch.
- Export - copy the palette as CSS, Tailwind, SCSS, or JSON.
Color harmony rules
| Scheme | How it's built | Best for |
|---|---|---|
| Analogous | Colors next to each other on the wheel | Calm, cohesive brands |
| Complementary | Opposite colors on the wheel | High-contrast CTAs and accents |
| Triadic | Three evenly spaced colors | Vibrant, balanced, playful |
| Monochromatic | One hue, varied saturation | Minimal, focused UIs |
| Shades | One hue, varied lightness | Design-system tints/shades |
The 60-30-10 rule
Once you have a palette, balance it: use one color for roughly 60% of the design (usually a neutral background), a second for 30% (supporting surfaces and sections), and an accent for the final 10% (buttons, links, highlights). Reserving the accent for the 10% is what gives calls-to-action enough visual contrast to get clicked - which is why an accessible, high-contrast accent color matters as much for conversion as it does for accessibility.
Color accessibility (WCAG)
Contrast determines whether people can actually read your text. WCAG requires a ratio of at least 4.5:1 for normal text (AA) and 7:1 for AAA; large text can pass at 3:1. Each swatch here shows its best text color and the ratio it achieves, so you can spot a beautiful brand color that's unusable for body text before it ships. Verify specific text/background pairings with our brand color & contrast checker, and see the WCAG contrast guidance for the full rules.
Frequently asked questions
- What is a color palette generator?
- A tool that builds a coordinated set of colors - from an image or a base color - with HEX/RGB/HSL, contrast checks, and code export.
- How do I make a palette from an image?
- Upload or drop in a photo; the tool clusters its pixels and returns the dominant colors, entirely in your browser.
- What are analogous, complementary, and triadic schemes?
- Color-wheel harmonies: adjacent (calm), opposite (high-contrast), and three evenly spaced (vibrant) colors.
- What is the 60-30-10 rule?
- Use a dominant color ~60%, a secondary ~30%, and an accent ~10% to keep designs balanced and CTAs prominent.
- How do I check accessibility?
- Each swatch shows its contrast ratio and AA/AAA verdict; aim for at least 4.5:1 for normal text.
- Can I export to CSS or Tailwind?
- Yes - copy-ready CSS variables, Tailwind config, SCSS, or JSON tokens.
- Is my image private?
- Yes - extraction happens in your browser via the canvas API; nothing is uploaded.
- Is it free?
- Yes - free, no signup, no watermarks, no limits.
Related design tools
- Brand color & contrast checker - test specific text/background pairs for WCAG.
- Favicon & app icon generator - create icons in your new brand colors.
- Open Graph generator - build social cards that match your brand.
- Image compressor - optimize the brand imagery you ship.
Related free tools
Keep going with these tools
CSS Gradient Generator
Linear, radial & conic gradients
Brand Color & Contrast Checker
Check your colors for accessibility
Favicon & App Icon Generator
ICO, PNG, Apple touch & PWA icons
QR Code Generator
Free static QR codes, no expiry
Email Signature Generator
Professional HTML signatures, free
Dental Website Grader
Score your practice website in 2 minutes
Want a team to handle it for you? We design and build fast, SEO-ready websites that convert. Explore AI web development.
Related guides
Go deeper with our guides
Practical, up-to-date guides on the strategy, costs, and execution behind this tool.
UX Design Principles for Small Business Websites
UX principles that drive revenue: navigation, forms, mobile patterns, accessibility, and a full audit checklist.
Landing Page Design 2026: Beat the 6.6% Median Conversion Rate
Design principles, psychological triggers, and testing frameworks that turn landing pages into conversion engines.
Ready to ship your next product?
Tell us what you're building. Senior engineers will scope, plan, and start delivering your product with production-ready architecture - fast.