How to Create a Color Palette: Harmonies, the 60-30-10 Rule and Contrast

Why a Palette Matters

Colors are the first thing people notice about a website, a logo or a presentation — before reading a single word. A coherent palette makes a project look professional and recognizable; a random mix of colors makes it look improvised, even when the content is excellent.

The good news: you don't need to be a designer. Color harmonies are based on simple geometric rules on the color wheel.

The Main Color Harmonies

Harmony	Principle	Effect	Good for
Monochromatic	Shades of a single hue	Calm, elegant, very coherent	Minimalist sites, corporate documents
Analogous	2–4 neighboring hues on the wheel	Natural, soothing	Nature, wellness, photography
Complementary	Two opposite hues	Strong contrast, energetic	Call-to-action buttons, sport, promotions
Triadic	Three hues evenly spaced (120°)	Vivid and balanced	Children's brands, creative projects
Tetradic	Two pairs of complementary hues	Rich, hard to balance	Illustrations, complex interfaces

Generate a Palette in a Few Seconds

The color palette generator creates harmonies from any base color: complementary, analogous, triadic, tetradic and monochromatic.

• Click a swatch to copy its HEX code; each color also shows its RGB and HSL values.
• Export as CSS: the tool generates a :root block with custom properties (--color-1, --color-2…) ready to paste into your stylesheet.
• Everything is calculated in your browser.

Need to find the base color? Take it from an image (a photo of your shop, your logo) with the image color picker, or fine-tune it with the color picker.

The 60-30-10 Rule

Choosing colors is only half the job; you also need to dose them. The 60-30-10 rule, borrowed from interior design, works very well on screen:

• 60% — a dominant, neutral color: backgrounds, large areas (often white, off-white or a very dark color).
• 30% — a secondary color: headers, cards, sections.
• 10% — an accent color: buttons, links, important elements.

The accent color is the one that should attract the eye. If it's everywhere, it no longer attracts anything.

Don't Forget Contrast

A beautiful palette is useless if the text can't be read. The WCAG accessibility guidelines define minimum contrast ratios between text and background:

Element	Minimum ratio (AA level)
Normal text	4.5 : 1
Large text (24 px+, or 19 px bold)	3 : 1
Interface components, icons	3 : 1

Pale yellow text on white or mid-grey on light grey almost never pass. Check your text/background pairs before validating the palette.

Tips for a Professional Palette

1. Limit yourself to 3–5 colors, plus neutrals (white, greys, near-black).
2. Avoid pure black (#000000) for text: a very dark grey or dark blue is softer to read.
3. Plan light and dark variants of each color for hover states, borders and backgrounds.
4. Test on real content: a palette that looks great as swatches can be tiring on a full page.
5. Write down your codes: keep your HEX values and CSS variables in one place to reuse them everywhere (site, presentations, social media).

Conclusion

A good palette starts with one color, follows a harmony rule, is dosed with the 60-30-10 rule and respects contrast. With a generator that exports directly to CSS, you go from an idea to a usable palette in a few minutes.