Color Palette Generator

How to use the colour palette generator

1. Set a base colour — pick it with the colour box, type a hex code, or press Shuffle for a random starting point.
2. Choose a harmony — analogous for calm, complementary for punch, triadic or tetradic for variety, monochromatic for a single-hue scheme, or Auto to explore.
3. Lock & shuffle — click the lock on the swatches you want to keep, then press space or Shuffle to regenerate only the rest.
4. Copy or export — click a swatch to copy its hex, grab the tints & shades for variations, or export the whole palette as CSS variables, JSON or a hex list.

Colour harmonies explained

What you can build with it

• A website or app theme — a primary, a few accents and neutral tints/shades for surfaces and borders.
• A brand colour system — lock your brand colour, then find harmonious secondaries.
• Slides & infographics — a coordinated set of distinct colours for charts and sections.
• Design tokens — export as JSON or CSS variables straight into your code or design system.
• Illustration & art — explore harmonies quickly before committing to a scheme.

A short history of the colour wheel

Every harmony in this generator traces back to a single idea: that colours can be arranged in a circle so their relationships become visible. The idea is younger than you might think. In 1704, Isaac Newton published Opticks, in which he bent the straight band of the spectrum into a closed ring — the first true colour circle. Newton was not decorating; he was modelling. He spaced the hues unequally, by analogy with the intervals of a musical scale, and showed that you could predict the colour of a mixture by finding the “centre of gravity” of the component rays on the circle. Joining the spectrum’s ends meant inserting the purples and magentas, which have no single wavelength, between red and violet — the part of the wheel that physics alone does not give you.

A century later, in 1810, Goethe published Theory of Colours (Zur Farbenlehre). Goethe cared less about wavelengths than about what the eye actually does, and he observed that colours “diametrically opposed to each other… reciprocally evoke each other in the eye” — an early description of after-images and opponent colour, later formalised by Ewald Hering. His symmetric wheel, and the work of artist-naturalists such as Moses Harris in the eighteenth century, pushed later wheels toward equal spacing and the familiar layout artists still use.

Two figures turned these wheels into teachable systems. At the Bauhaus (where he taught the famous preliminary course from 1919 to 1922), Johannes Itten built a twelve-hue colour wheel and codified seven kinds of colour contrast — among them contrast of hue, of light and dark, of temperature, of complements, of saturation, and of extension — ideas he later gathered in The Art of Color. Separately, the American painter Albert H. Munsell began work in 1898 and published A Color Notation in 1905, giving colour three independent, measurable axes: hue (the colour family), value (lightness, black to white) and chroma (intensity). Munsell was the first to separate those dimensions so they matched how people actually see differences rather than how pigments mix — the conceptual ancestor of modern perceptual spaces like CIELAB and OKLCH.

Colour harmonies and the maths behind them

This tool works in HSL, where every colour is three numbers: a hue measured as an angle from 0° to 360° around the wheel, a saturation and a lightness. Because hue is an angle, the classic harmonies become simple arithmetic. To find a complement you add 180°; for a triad you add 120° and 240°; for a square you step round in four 90° jumps. The generator rotates only the hue and leaves saturation and lightness broadly intact, which is exactly why the results look like a family: the colours sit at deliberate angles on the same wheel and share a common brightness and vividness, instead of being five unrelated picks.

Why do those particular angles read as “harmonious”? Two reasons. Evenly spaced hues (analogous, triadic, square) divide the circle into equal arcs, so no single colour dominates the hue balance — the eye perceives an ordered set rather than a jumble. Opposite hues (complementary, and the gentler split-complementary at 150° and 210°) maximise hue contrast, which is what makes an accent “pop” against its background. Analogous schemes, sitting within roughly ±30° of the base, do the reverse: they stay so close on the wheel that they almost always share a temperature and feel calm and unified.

One honest caveat about the geometry. Because this is an additive, screen-based (RGB/HSL) wheel, a colour’s “opposite” is its light complement: red’s complement here is cyan, not the green you would get on a traditional red-yellow-blue paint-mixing wheel. Neither is “wrong” — they answer different questions (mixing light versus mixing pigment) — but it explains why a complementary pair from a screen tool can look slightly different from the one in an old artists’ colour handbook. HSL is also not perceptually uniform: a yellow and a blue at the same numeric lightness will not look equally bright, which is the single biggest reason a mathematically perfect palette can still need a human eye to balance it.

Tints, shades and tones

A harmony chooses your hues; tints, shades and tones give you the lighter, darker and softer variations of each one — and you need those far more often than you need new hues. In painting terms the distinction is precise: a tint mixes a colour with white, a shade mixes it with black, and a tone mixes it with grey. In the HSL numbers this generator uses, tints and shades hold the hue and saturation steady and only move the lightness up or down, while a tone keeps the lightness but pulls the saturation toward grey.

This is what the tints-and-shades strip above the FAQ is for. A real interface is rarely five flat colours — it is one or two hues expressed as a whole ladder of values: a near-white background tint, a slightly darker border, a mid-tone body colour, and a deep shade for headings or pressed states. Design systems formalise exactly this. Google’s Material Design and Tailwind CSS both ship each colour as a numbered ramp (roughly 50–900, light to dark) generated from a single source hue, so designers reach for “blue 100” or “blue 700” rather than re-picking. Build your palette the same way and you will have enough colour to finish a project — not just enough to start one.

The 60-30-10 rule and building a usable palette

A common beginner mistake is to give every colour in a palette equal airtime. Harmony is about proportion as much as selection, and the most durable rule of thumb comes from interior design: the 60-30-10 rule. Spend about 60% of a layout on a dominant colour (usually a neutral or a quiet tint — backgrounds and large surfaces), about 30% on a secondary colour that supports it and adds depth, and roughly 10% on a vivid accent reserved for the things you actually want clicked: buttons, links, highlights. The exact numbers are not sacred, but the hierarchy is — a dominant, a supporter and a small spark.

That maps cleanly onto what this tool produces. Treat your most muted or neutral swatch as the 60% background, a mid-tone harmony partner as the 30% secondary, and your most saturated colour as the 10% accent. The tints-and-shades ladder then fills in everything between — the hover state of the button, the faint border, the disabled-text grey. A practical workflow: lock your anchor colour (a brand colour, or simply the one you love), shuffle until the supporting hues feel right, then build value ramps from the two or three you keep. You will almost always end up using fewer hues and more values than you expected.

Warm, cool and the role of neutrals

The wheel splits loosely into a warm half (reds, oranges, yellows) and a cool half (greens, blues, violets). Warm colours tend to advance and feel energetic; cool colours tend to recede and feel calm. This is partly why analogous palettes feel so settled — staying within ±30° usually keeps you on one side of the divide — and why a single well-chosen contrasting accent can make an otherwise cool design feel alive.

The colour that most often rescues a palette is the one that is barely a colour at all: a neutral. Whites, off-whites, greys, beiges and near-blacks are the connective tissue of almost every professional scheme. They give the saturated hues somewhere to rest, carry most of your text, and stop a bright palette from becoming exhausting. A useful trick is to avoid pure #000000 and #FFFFFF: instead, take your dominant hue and push it to a very high lightness for backgrounds and a very low lightness for text. The faint shared undertone makes the neutrals feel like they belong to the palette rather than being borrowed from a different one — which is exactly what the tints-and-shades strip gives you for free.

Does colour psychology hold up?

You have certainly read that blue “means” trust, green “means” nature, and red “means” danger. Treat these claims with care. The honest summary from the research is that colour–emotion associations are real but heavily dependent on culture and context, and that much of the popular advice is overstated. Meanings are not universal: cross-cultural studies find red linked to anger in several countries, yet other associations diverge sharply — one study found only Polish participants tied purple to anger and jealousy, while German participants linked jealousy to yellow. Colour symbolism that feels obvious in one culture (white for weddings, say) can mean the opposite in another.

A few effects are better supported than the rest. There is reasonable evidence that long-wavelength red can raise arousal and draw attention, and that blue light is calming — findings sturdy enough that some cities have experimented with blue street lighting. But the wider field is soft science: classic results such as Goldstein’s 1940s colour-and-movement experiments have repeatedly failed to replicate, and “colour therapy” is widely regarded as pseudoscience. The practical takeaway is modest and reliable: use colour associations as a starting hypothesis for your audience, keep them consistent within your own product so they build meaning through repetition, and test rather than trust. Brand recognition, contrast and consistency move behaviour far more dependably than any claimed innate “meaning” of a hue.

Accessibility: harmony is not enough

A palette can be perfectly harmonious and still be unreadable. Harmony describes how hues relate; accessibility describes whether a human can actually tell two adjacent colours apart — and the two are independent. The relevant standard is the contrast ratio defined by the Web Content Accessibility Guidelines (WCAG 2): for the AA level, normal-size text needs a contrast ratio of at least 4.5:1 against its background, and large text (around 18 pt, or 14 pt bold) needs at least 3:1. Two beautifully complementary mid-tones placed as text on background will frequently fail this; a calm monochromatic scheme often fails it too, because the values sit too close together.

So check, don’t assume. Decide colour roles first — which swatch is a background, which carries text, which is an interactive accent — then verify each text-on-background pair against the 4.5:1 (or 3:1) threshold with our WCAG contrast checker. Two further habits matter: never rely on hue alone to carry meaning (colour-blind users may not see the difference between your “success green” and “error red”, so pair colour with an icon, label or pattern), and remember that the WCAG 2 ratio is a screen-light formula, not a perfect model of perception — newer approaches such as APCA aim to predict real readability more accurately, but WCAG 2 remains the current accessibility baseline.

Common palette mistakes

Most palettes that fail in practice fail for the same handful of reasons. Watch for these:

• Too many competing hues. Five fully saturated, unrelated colours read as noise. Most strong palettes lean on one or two hues plus neutrals, and find their variety in values, not in extra hues.
• No neutral or anchor. Without a dominant background colour and a quiet neutral to rest on, even a textbook-perfect harmony feels frantic. Give your accents somewhere to sit.
• Equal weighting. Using every colour in roughly equal amounts removes hierarchy — nothing leads the eye. Apply the 60-30-10 split so one colour dominates and the accent stays rare.
• Ignoring contrast and accessibility. Picking colours that look nice side by side as swatches, then discovering the text on them is illegible. Verify text pairs against WCAG before you commit.
• Trusting numbers over the eye. Because HSL is not perceptually uniform, identical numeric steps do not look identical. Always eyeball the final palette on a real screen, in both light and dark contexts, and nudge by hand.
• Maxed-out saturation everywhere. All-vivid palettes vibrate and tire the eye. Knock the saturation back to a tone on the supporting colours and reserve full intensity for the accent.

A last bit of context: this generator sits in a long line of palette tools, from Adobe Color (once called Kuler) and Fabrizio Bianchi’s Coolors to the colour ramps baked into Material Design and Tailwind. They all rest on the same century-old wheel. The tool can hand you a harmonious, mathematically sound starting point in a second — but the judgement about proportion, neutrals, contrast and context is still yours, and that is exactly where good colour work lives.

Frequently asked questions