Colour Palette Generator

Generate a harmonious palette from a base colour — or upload any image to extract its dominant colours automatically. Lock colours you want to keep, then regenerate the rest. 7 harmony types, 8 mood themes, adjustable palette size.

colour-palette.tool
or Space
Theme Presets

Two Ways to Build a Palette

Generate tab — pick a base colour and a harmony type. The palette is built mathematically from colour theory: complementary, analogous, triadic, tetradic, split-complementary, shades, or tints. Hit Random (or Spacebar) for a surprise palette. Lock any colour you want to keep and regenerate the rest.

From Image tab — upload any photo, illustration, or screenshot. The tool samples the image and uses k-means clustering to find the most dominant distinct colours, outputting them as a ready-to-use palette. This is how Canva's palette generator works and is useful for matching a design to a photograph, brand imagery, or a mood board.

Palette Size

Use the colour count selector to generate palettes of 3, 4, 5, 6 or 8 colours. Smaller palettes are easier to keep consistent across a design. Larger palettes give more flexibility for complex UIs or multi-section designs.

Mood Theme Presets

Eight curated themes give you a starting point when you do not have a base colour in mind: Pastel for soft, approachable designs; Warm for energetic, welcoming tones; Cool for calm, professional feels; Sunset for dramatic gradients; Vintage for muted, aged aesthetics; Earthy for organic, natural palettes; Neon for high-contrast digital looks; and Mono for dark, deep UI themes.

Locking Colours

Click the padlock icon on any colour strip to lock it. Locked colours stay fixed when you hit Random or change the harmony type — only unlocked colours are replaced. This is the fastest way to find palette companions when you already have a required brand colour.

Frequently Asked Questions

The image is drawn onto an off-screen canvas at a reduced size (100×100 pixels). Pixel colour values are sampled across the image, then grouped using a k-means clustering algorithm that finds the most distinct colour centroids. The result is the set of dominant colours that best represent the image. The process runs entirely in your browser — the image is never uploaded to any server.
Colour harmony refers to combinations of colours that look pleasing together based on their relationships on the colour wheel. Complementary colours (opposite each other) create bold contrast. Analogous colours (neighbouring) feel natural and calming. Triadic colours (evenly spaced) feel balanced and vibrant. Using harmonious colours in design creates a sense of intention rather than random clashing — it is why professional designs feel polished.
Click Copy CSS Vars to get a :root {} block with all colours as custom properties: --color-1, --color-2, etc. Paste into your global stylesheet. Then reference them anywhere with var(--color-1). This lets you change your entire colour scheme from one place. For Tailwind CSS, use the hex codes to extend your colour configuration in tailwind.config.js.
When you lock a colour (the padlock icon on each strip), it stays fixed when you press Random or change the harmony type. Only unlocked colours are regenerated. This is essential when you have a brand colour or client-specified colour that must appear in the palette — lock it and find complementary colours that work with it.
Split-complementary uses one base colour plus the two colours on either side of its complement, rather than the complement directly. For example, if your base is blue, instead of orange you get yellow-orange and red-orange. The result has strong contrast like a complementary palette but feels less harsh and gives more palette variety. Good for designs that need visual tension without being aggressive.

Related Tools

🎨
HEX to RGB
Convert colour codes
◑
CSS Gradient
Build CSS gradients
{}
JSON Formatter
Format JSON data
🔗
URL Encoder
Encode & decode URLs