Color Palette Generator
Generate beautiful color palettes using color theory. Create from random, extract from images, or build harmonious schemes.
#6366F1
#8B5CF6
#D946EF
#F43F5E
#F97316
Contrast Checker (WCAG)
4.5:1
AA Large
4.2:1
AA Large
3.5:1
AA Large
3.7:1
AA Large
2.8:1
Fail
Export Palette
Colour Theory in 5 Minutes
Every great design starts with colour relationships. A single brand colour sitting on its own looks fine — but the magic happens when you pair it with complementary, analogous, or triadic neighbours. That's what colour harmony is: colours that sit at predictable intervals on the colour wheel and naturally look balanced together.
Think of it like music. A single note is just a tone. Combine it with a third and a fifth and you've got a chord that sounds intentional. Colour harmony works the same way — mathematically spaced hues create visual "chords" that feel cohesive rather than random.
This generator handles the maths for you. Pick a base colour, choose a harmony mode, and you've got an instant palette that follows the rules designers have used for centuries — no guesswork required.
Harmony Modes Explained
| Mode | How It Works | Best For | Example Use |
|---|---|---|---|
| Complementary | Two colours opposite on the wheel (180°) | High contrast, CTAs, bold designs | Blue brand + orange buttons |
| Analogous | Three colours next to each other (30° apart) | Calm, harmonious, nature-inspired | Green/teal/blue dashboard |
| Triadic | Three colours evenly spaced (120° apart) | Vibrant, playful, balanced contrast | Primary/secondary/accent system |
| Split-Complementary | Base + two colours adjacent to its complement | Less tension than complementary, more variety | Portfolio with nuanced highlights |
| Tetradic (Square) | Four colours evenly spaced (90° apart) | Complex designs with multiple accents | Data visualisation with 4 series |
| Monochromatic | One hue at different lightness/saturation levels | Minimalist, elegant, easy to get right | Single-brand landing page |
What this means for you: If you're unsure, start with complementary (bold) or analogous (safe). Triadic works well for illustrations and playful brands. Monochromatic is almost impossible to mess up.
Building a Real Design System Palette
A generated palette is your starting point, not the finish line. Most design systems need at least these layers built on top of your base harmony:
Tints and Shades
For each harmony colour, generate 5-9 steps from near-white to near-black. These become your 100-900 scale (like Tailwind's colour system). Buttons use the 500, hover uses 600, disabled uses 300.
Semantic Tokens
Map palette colours to roles: primary, secondary, success, warning, danger, info. This way you can swap the entire palette later without touching component code.
Neutral Scale
Your palette won't include greys. Add a desaturated version of your primary hue for backgrounds, borders, and text colours. Pure grey (#808080) feels flat — tinted greys feel intentional.
Accessibility Pairs
Every foreground/background combination needs a WCAG contrast ratio of at least 4.5:1 for body text and 3:1 for large text. Test your pairs before committing.
WCAG Contrast Quick Reference
| Level | Normal Text | Large Text (18px+ bold / 24px+) | UI Components |
|---|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 | Not defined |
What this means for you: That gorgeous pastel yellow might look lovely in your palette, but if it's sitting behind white text, nobody can read it. Always check contrast before shipping — the built-in contrast checker in this tool handles that for you.
Extracting Palettes from Images
Sometimes the best palette isn't designed — it's discovered. Upload a photograph, illustration, or brand asset and the tool pulls the dominant colours automatically. This is useful when you're designing around an existing hero image, product photo, or brand photography.
The extraction uses colour clustering to find the most visually distinct hues in the image. You'll typically get 5-8 colours that represent the image's mood. From there, you can lock one as your base and generate harmony variations around it.
Related Tools
Colour Converter
Convert palette colours between HEX, RGB, and HSL formats.
CSS Gradient Generator
Turn palette colours into smooth CSS gradients.
CSS Box Shadow Generator
Add depth to UI elements with coloured shadows.
CSS Border Radius Generator
Shape the corners of your coloured components.
Meta Tag Generator
Set theme-color meta tags to match your palette.
Image Colour Picker
Sample exact pixel colours from any image.
How to use this tool
Choose a generation mode - Random, From Image, or From Base Color.
Adjust colors - Lock colors you want to keep, then regenerate.
Copy or export - Copy individual colors or export the full palette.
Common uses
- Creating brand colour palettes for websites and apps
- Extracting colours from product photography
- Building accessible colour systems with WCAG contrast checking
- Generating Tailwind CSS and CSS variable exports for developers
Share this tool