Color Palette Generator

Generate beautiful color palettes using color 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.

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

Check dimensions and file details before building a palette.

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

Frequently Asked Questions

What are color harmony modes?

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

How do I extract colors from an image?

Click the 'From Image' tab and upload any image. Our algorithm analyses the image and extracts the 5 most dominant colors to create your palette.

What does the contrast checker do?

The contrast checker shows WCAG accessibility ratings between text and background colors. '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 colors 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.