Colour Palette Generator

Generate colour palettes using colour theory. Create from random, extract from images, or build harmonious schemes.

Free to use. Runs in your browser.

Generate harmonious colour palettes from a base colour using complementary, analogous, triadic, or tetradic rules. Export as CSS variables, Tailwind config, or JSON.

Use it to test palette ideas, check contrast, and export usable colour values for design and code.

#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)	Lively, 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.

Worked Example: Product Page Palette

Jack is building a product page for a reusable water bottle. The hero photo has a dark forest background, a teal bottle, and a warm cream label. He wants a palette that feels connected to the photo without making the page hard to read.

1. Extract from the image

Uploading the photo gives five dominant colours. The forest green is strong, the teal is distinctive, and the cream is useful for backgrounds.

2. Pick roles, not just swatches

The teal becomes the primary action colour. The forest green becomes a dark section background. The cream becomes a soft page background.

3. Check contrast

White text on teal fails for small body copy, so he uses dark text on cream and keeps teal for larger buttons with bold labels.

4. Export tokens

He exports CSS variables and renames them to semantic tokens: --brand, --surface, --accent, and --ink.

Palette Roles and What They Mean

A palette becomes easier to use when every swatch has a job. Five attractive colours are not enough if nobody knows which one should sit behind text or which one means danger.

Role	Typical use	What to check
Primary	Main buttons, links, active states	Contrast with white and dark text
Secondary	Supporting actions and secondary badges	Visual distance from the primary colour
Surface	Page backgrounds, cards, panels	Text contrast and dark mode behaviour
Accent	Highlights, charts, small visual cues	Avoid using it for long paragraphs
Semantic	Success, warning, error, and info states	Text labels or icons alongside colour

Image Extraction Edge Cases

Mostly neutral photos

A grey office photo may produce several similar neutrals. Lock the one you like, then switch to harmony mode to add a clearer accent.

Tiny accent details

A small red logo in a large blue photo may not appear in the extracted set because it covers too few pixels. Add that brand colour manually if it matters.

Transparent images

Transparent PNG areas can affect sampling depending on how the browser draws the canvas. Try placing the asset on a realistic background before extracting.

Wide-gamut photos

Very vivid photos can look different across screens. Test final colours on at least one ordinary sRGB display before committing brand tokens.

Common Palette Mistakes

Too many saturated colours. If every swatch shouts, nothing feels important. Keep one main accent and let neutrals do most of the page work.
No neutral scale. A palette needs quiet surfaces, borders, and text colours. Add greys or tinted neutrals before building components.
Colour-only meaning. Error and success states need text or icons as well as colour so people with colour-vision differences can understand them.
Ignoring dark mode. A palette that works on white may fail on charcoal. Check both modes early instead of recolouring every component later.
Exporting names too early. Rename swatches by role after you know how they will be used. --primary is easier to maintain than --blue-500 when the brand shifts to green.

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 Metadata Viewer

Check dimensions and file details before building a palette.

How to use this tool

Choose Random, From Image, or Harmony mode.

Lock any colours you want to keep, then regenerate the rest.

Copy individual colours, export the palette, or save it in your browser.

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

Frequently Asked Questions

What are colour harmony modes?

Colour harmonies are combinations based on the colour wheel. Complementary uses opposite colours. Analogous uses adjacent colours. Triadic uses three evenly spaced colours. Split-complementary uses a colour and two adjacent to its complement. Tetradic uses four colours in a rectangle.

How do I extract colours from an image?

Click the 'From Image' tab and upload any image. The tool analyses the image and extracts the 5 most dominant colours to create your palette.

What does the contrast checker do?

The contrast checker shows WCAG accessibility ratings between text and background colours. 'AA' means the contrast is suitable for normal text. 'AAA' meets the highest accessibility standard.

Can I save my palettes?

Yes! Click 'Save Palette' to store palettes in your browser's local storage. They persist between sessions. You can save up to 10 palettes.

What export formats are available?

Copy individual colours as HEX, RGB, or HSL. Export the full palette as CSS variables, Tailwind config, or download as a PNG image.

How many colours are in a generated palette?

Each palette generates 5 colours by default. You can lock any colour you like and regenerate the rest to refine your palette.

What's the difference between complementary and split-complementary?

Complementary uses two colours directly opposite on the wheel (maximum contrast). Split-complementary uses one base colour plus the two colours adjacent to its complement, giving variety with less visual tension.

Can I use these palettes in Figma or Sketch?

Yes. Copy the HEX values and paste them directly into any design tool's colour picker. You can also export as CSS variables and convert them to design tokens.

What makes a good colour palette for a website?

A strong web palette typically has one primary brand colour, one or two accent colours, and a neutral scale for text and backgrounds. Use the 60-30-10 rule: 60% dominant colour, 30% secondary, 10% accent.

How does image colour extraction work?

The tool samples pixels across the uploaded image, clusters similar colours together, and returns the most dominant groups. It's the same approach professional design tools use to build palettes from photography.

Is my uploaded image sent to a server?

No. Image processing happens entirely in your browser using the Canvas API. Nothing is uploaded or stored anywhere.

What is WCAG contrast and why does it matter?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios so text remains readable for people with visual impairments. AA requires 4.5:1 for normal text. AAA requires 7:1. Failing these means some users literally can't read your content.

Results are for general informational purposes only and should be checked before use. They are not professional advice. See our Disclaimer and Terms of Service.