Colour Palette Generator

Generate palettes, extract & check contrast

110 palettes generated ☕ Support
🖼️

Drop an image here or click to upload

JPEG, PNG, WebP supported

5

Extracted Colours

21.0 : 1
AA Normal✓ Pass
AA Large✓ Pass
AAA Normal✓ Pass
AAA Large✓ Pass

Heading Preview

This is a paragraph of body text. Check how readable this looks against the background colour you've chosen. Good contrast is essential for accessibility.

See how your palette appears to people with colour vision deficiency. Uses clinically accurate Brettel/Viénot/Mollon simulation matrices.

⭐ Saved Favourites

No saved palettes yet. Use ⭐ Save on the Generate tab!

🕑 Recent Palettes

No palettes generated yet. Press spacebar on the Generate tab!

Frequently Asked Questions

How does the colour palette generator work?

It generates palettes using colour theory harmony rules (complementary, analogous, triadic, etc.) working in the HSL colour space. Press spacebar to instantly generate new palettes, lock colours you like, and regenerate the rest. Everything runs in your browser — no server calls, no sign-up.

Can I extract colours from an image?

Yes! Upload any JPEG, PNG or WebP image and the tool automatically extracts the dominant colours using a median-cut colour quantisation algorithm. You can adjust how many colours to extract (2–10) and click any extracted colour to add it to your palette.

What is WCAG contrast and why does it matter?

WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios between text and background colours to ensure readability. The AA standard requires 4.5:1 for normal text and 3:1 for large text. The AAA standard is stricter at 7:1 and 4.5:1 respectively. Our contrast checker tests both levels instantly.

How do I check for colour blindness accessibility?

The Colour Blindness Simulator tab shows your palette as seen by people with different types of colour vision deficiency — protanopia, deuteranopia, tritanopia and achromatopsia. It flags when two colours in your palette become indistinguishable, helping you design for everyone.

Can I export my palette to Tailwind CSS?

Yes! The export menu supports CSS custom properties, SCSS variables, Tailwind config, JSON, PNG swatch images and SVG. Click the export button on the Generate tab to choose your format.

Is this colour palette generator really free?

Completely free, forever. No sign-up, no ads, no watermarks. It runs in your browser so your data never leaves your device. Zero API calls, zero cost. Standard anonymous page analytics (Google Analytics) apply to all pages on the site, but no tool-specific data — passwords, images, palettes, etc. — is ever collected or transmitted.

What are colour harmony rules?

Colour harmony rules are based on the colour wheel. Complementary uses opposite colours for high contrast. Analogous uses neighbouring colours for cohesion. Triadic uses three evenly spaced colours for vibrant balance. Monochromatic uses shades of one hue for elegant simplicity. Split-complementary and tetradic offer more complex but balanced combinations.

Is this tool still being improved?

Yes! This is a V1 release and we're actively improving it based on user feedback. If you have suggestions, find a bug, or want a new feature, please visit our Community Feedback page at aguidetocloud.com/feedback/ — every piece of feedback is read and acted on.

💬