Color Palette Generator

Which harmony type to use

The palette type is the setting that decides whether the result is usable, and most generators assume you already know what the words mean. In practice each one produces a distinct feeling.

Monochromatic takes one hue through a range of lightness. It is the safest choice and the hardest to get wrong — ideal for an interface where colour should organise things rather than draw attention. Pair it with one accent from elsewhere for anything that needs to be clicked.

Analogous uses neighbouring hues, which reads as calm and cohesive. Good for backgrounds, illustrations and anything where you want richness without tension.

Complementary takes the opposite hue, which produces maximum contrast. That makes it excellent for one call-to-action against a dominant colour, and exhausting if you use both in equal amounts. Keep one dominant and let the other appear sparingly.

Triadic and tetradic spread three or four hues evenly around the wheel — energetic, playful, and genuinely hard to balance. They work when one colour clearly leads. Split-complementary is the gentler version of complementary: the contrast is there but softened.

Pastel, dark and vibrant are shortcuts by mood rather than by geometry, which is often what you actually want. Random is for when you have no starting point and want something to react to — and reacting to a proposal is usually faster than inventing one.

Copy it as code, not as swatches

Where most palette tools stop is the handover. You get beautiful swatches and then transcribe six hex codes by hand, or sign up to export.

Here the whole palette copies as CSS custom properties ready to paste into a :root block, as JSON for a design token file or a script, or as a Tailwind colors block that drops into your config. Each swatch also copies on its own for the times you need exactly one value. The PNG export is for putting a palette in a document or sending it to someone who does not want code.

Contrast is not checked — check it yourself

Important, and the reason a palette should not go straight into production. Nothing here tests whether text in one of these colours is readable on another. A palette can be beautiful and still fail: mid-tone text on a mid-tone background looks fine to a designer on a good monitor and is genuinely hard to read for a lot of people.

Before you ship, check the pairs you intend to use for text against a contrast checker. The working targets are a ratio of at least 4.5:1 for body text and 3:1 for large text. In practice that usually means the text colour and the background need to sit far apart in lightness — so build the palette here, then verify the specific combinations.

How many colours

Five is the default and about right. A typical interface needs one dominant colour, one accent, and a few neutrals — and neutrals do more work than people expect. Three suits something deliberately restrained; seven or nine is really a source to choose from rather than a set to use all of, which is fine as long as you are choosing.

Related tools

Color Picker pulls exact colours out of an image, which is the usual way to get a base colour from a logo or a photograph you are matching. Lorem Ipsum Generator fills in the placeholder text for the mockup you are about to build with these.