Create a harmonious color palette

Start from an intention, not a color

Before opening a swatch book, put three words on what the visual should convey: “calm, natural, handmade”, “energetic, urban, young”, “understated, technical, reliable”. These words steer the temperature (warm or cool), the saturation (vivid or restrained) and the contrast (soft or strong) far more reliably than a favorite color.

A photo, a material or an old poster also makes an excellent starting point: its colors already work together. The palette generator can extract them from an uploaded image.

Color harmonies, simply

Harmonies describe where the colors sit on the color wheel. They don’t guarantee a beautiful palette, but they give a solid structure to refine:

• Monochrome: a single hue from light to dark. Elegant and risk-free, ideal for an understated look.
• Analogous: neighboring hues (blue, blue-green, green). Soft and natural, the easiest harmony to get right.
• Complementary: two opposite hues (blue and orange, purple and yellow). Maximum contrast, to be balanced: one dominates, the other punctuates.
• Split complementary: one hue and the two neighbors of its opposite. The energy of complementary colors, less harsh.
• Triadic: three evenly spaced hues. Cheerful and colorful, best calmed by desaturating two of the three colors.
• Square and compound: four hues or more, for rich worlds (illustration, children’s books, festivals).

The 60-30-10 rule

A good palette can still fail in use if every color has the same weight. The 60-30-10 rule, borrowed from interior design, gives a balance almost every time:

• 60% for the dominant color, often the background: neutral, light or very dark;
• 30% for the secondary color: large shapes, blocks of text, illustrations;
• 10% for the accent color: buttons, key words, details. It is the one that catches the eye, as long as it stays rare.

Three to five colors are enough for the vast majority of projects. Add shades (lighter, darker) of those same colors rather than new hues.

Check readability

Two colors can look superb side by side and be unreadable one on top of the other. The web accessibility guidelines (WCAG) measure the contrast ratio between a text and its background:

• 4.5:1 at least for body text;
• 3:1 at least for a large heading or an icon;
• 7:1 for optimal reading comfort.

Also think of people with color blindness, nearly one man in twelve: a red and a green of the same lightness can look identical to them. Never rely on color alone to carry information, and check your palette in simulation. The generator shows the contrast of each pair and simulates the main forms of color blindness.

Colors that blend well

If your palette is meant for a gradient, the blending space matters as much as the colors: a gradient computed naively between a blue and a yellow goes through a dull gray in the middle. “Perceptual” color spaces such as OKLab blend colors the way the eye sees them, with no gray zone. That is what the gradient generator uses.

Export and reuse your palette

• For Illustrator, Photoshop or InDesign: the .ASE format imports straight into the Swatches panel.
• For a website: the CSS export gives variables ready to paste into a style sheet.
• For a presentation or brand guidelines: the PNG or SVG export gives a sheet with the code of each color.
• To share it: a link reproduces the exact palette for your client or colleagues.

A graphic designer’s tips

• Desaturate before adding. A garish palette is better fixed by lowering the saturation of two colors than by changing one.
• Plan a neutral. An off-white, a warm gray or a tinted near-black lets the other colors breathe.
• Test in context. Put the palette on a real visual (poster, post, page) before approving it: that is where you see whether the accent stands out.
• Lock and iterate. Keep the two colors you like and regenerate the rest with the space bar until you find the right company.

Once you have your palette, try it big in a grainy background or a pattern: our guide to social media image sizes will help you pick the right format.