Color Palette Generator
Create a harmonious colour scheme from a base colour, or pull a palette out of a photo. Lock the colours you like, shuffle the rest and export the result for your code.
- Runs in your browser
- No sign-up
- Free to use
How to use Color Palette Generator
- Choose a base colour and a harmony rule, such as complementary or analogous, or select Random.
- Or switch to From image and drop a photo to extract its dominant colours.
- Click a colour's lock to keep it, then select Generate to vary the others.
- Copy individual colours or export the palette as CSS variables, Tailwind config, JSON or an image.
Color Palette Generator features
Six harmony rules
Complementary, analogous, triadic, split-complementary, tetradic and monochromatic.
Palettes from photos
Extracts the dominant colours of an image using clustering, not just the average.
Lock and shuffle
Keep the colours you like while generating variations of the rest.
Readable labels
Each swatch shows its code in black or white, whichever contrasts better.
Developer exports
CSS custom properties, Tailwind theme colours, JSON and a PNG swatch image.
Keyboard friendly
Press the space bar to generate a new palette.
When to use Color Palette Generator
- Choosing colours for a website, app or presentation.
- Building a brand palette around an existing logo colour.
- Matching a design to the mood of a hero photograph.
- Generating colour sets for charts and data visualisations.
Color Palette Generator FAQ
What is a colour harmony?
A rule for picking colours based on their positions on the colour wheel. Complementary colours sit opposite each other and contrast strongly; analogous colours sit side by side and feel calm; triadic colours are evenly spaced and feel balanced.
How are colours extracted from an image?
The image is sampled and similar pixels are grouped with a clustering algorithm. The centre of each group becomes a palette colour, ordered by how much of the image it covers.
How many colours should a palette have?
Most interfaces work well with one or two main colours, a few neutrals and an accent, often five colours in total. Fewer colours used consistently look more polished than many used occasionally.
Can I use these colours commercially?
Yes. Colours themselves cannot be owned; the palettes you create here are yours to use.
Will the colours be accessible?
Harmony rules do not guarantee readable text. Check text and background combinations with the contrast checker in the Color Picker tool.
Building a palette that works
Colour harmonies are a starting point, not a finished design. A practical palette usually combines a harmony for the main colours with neutral greys for text and backgrounds, and uses the most saturated colour sparingly, for actions and highlights. The 60-30-10 rule is a helpful guide: a dominant colour for most surfaces, a secondary colour for supporting areas, and an accent for emphasis.
Extracting colours from a photograph is another reliable approach, because natural scenes contain colours that already sit well together. Clustering finds the colours that genuinely make up the image rather than a muddy average, so the palette captures its mood.