Tetradic Colour Palette Generator
Pick a base colour and get four hues arranged as two complementary pairs. The richest standard scheme, and the one that needs the most discipline.
Describe the edit — the AI assistant does it on the canvas.
2 free credits · No signup · ~10 seconds
Four hues, two complementary pairs
Two complementary pairs at once
A tetrad is two complementary pairs sitting on a rectangle across the wheel. That gives you four distinct hues with two built-in high-contrast relationships, which is more raw material than any other standard scheme.
Four colours is past most designs needs
Very few interfaces need four hues. Used at equal weight the result is incoherent, and the usual advice is blunt: pick one dominant colour and treat the other three as accents used sparingly.
Balance warm against cool
A tetrad usually contains both warm and cool hues. Letting one temperature dominate and using the other as accent keeps the set from feeling arbitrary — this is where most four-colour schemes are won or lost.
How it is built
The base hue is rotated to form a rectangle on the wheel, producing two pairs each 180 degrees apart. Saturation and lightness are adjusted so the four remain usable rather than four maximally saturated hues.
Where four colours genuinely helps
Category systems, complex dashboards, and illustration have real need for four distinct hues. Marketing pages and simple interfaces rarely do, and a triad or an analogous set with one accent is usually a better fit.
How to tetradic colour palette generator
Pick your base colour
Set the picker to your starting colour. Nothing to upload.
Read the tetrad
Four hues appear as two complementary pairs, with hex codes.
Copy what you need
Click a swatch to copy one hex, or copy all four.
Tetradic Colour Palette Generator — in the editor
The real editor, start to finish — no signup needed to try it yourself.
2 free credits · No signup · ~10 seconds
Where a four-colour scheme fits
Category systems
Give four product lines or sections distinct but related colours.
Dashboards
Separate four data series with hues that stay distinguishable.
Illustration
Set a rich limited palette with built-in contrast pairs.
Packaging ranges
Differentiate variants of one product while keeping them a family.
Used by designers, indie devs & students at
What people use it for
The jobs the editor was built around — and what it does differently on each one.
Colourways you can revisit
Every edit is a layer, not a bake. When the brand shifts, reopen the file and change the colour rather than rebuilding the variant from the original.
Cutouts with awkward edges
AI background removal that keeps hair, foliage and soft shadows instead of stamping a hard outline around them. The output is a transparent PNG, ready to place.
No export, edit, re-import loop
The Framer plugin runs on the canvas you are already working in, so a recolour or a cutout does not mean a round trip through a second application.
Ten options in the time one used to take
Recolour once and step through the alternatives, so a client review can look at the whole range instead of the one version there was time to make.
Brand colours matched exactly
Pick a colour straight off an existing asset and get the hex, rather than eyeballing it against a screenshot and hoping it is close enough.
Free to preview, priced per export
Previewing is unlimited and costs nothing. A credit is spent only when you download a full-resolution file, so exploring an idea is never the expensive part.
Frequently Asked Questions
Related Tools
Guides worth reading
How to Get Your Website Ready for Google WebMCP
A step-by-step guide to exposing WebMCP tools on your site — the imperative and declarative APIs, how to test them, and the real security downsides.
The Best Free Design Tools for Indie Developers
A working set of free design tools for developers shipping solo — UI, icons, fonts, colour, illustration and asset prep — with the real free-tier limits.
How to Batch Recolor Images (Without Opening Each One)
Three honest ways to recolor a whole folder at once: a browser batch tool, a Photoshop action, and ImageMagick — plus which operations survive batching.
Generate a tetradic palette
Pick a base colour and copy all four hex codes.