Free Color Palette Generator

Color Theory: Harmony Rules Explained

Color harmony is the art of combining colors in a way that is pleasing to the eye. The color wheel — a circular arrangement of hues — is the foundation of all harmony rules. By choosing colors at specific geometric relationships on the wheel, you can create palettes that feel balanced, vibrant, or calming.

Complementary colors sit opposite each other (180° apart) and create maximum contrast. Analogous colors are neighbors on the wheel (within 30°) and produce a serene, cohesive feel. Triadic colors are evenly spaced at 120° intervals, offering vibrant variety with balance. Split-complementary uses the two colors adjacent to the complement, giving contrast without the intensity. Tetradic (square) picks four colors at 90° intervals for rich, complex schemes. Monochromatic sticks to a single hue with varying lightness and saturation — the safest choice for beginners.

How to Choose a Color Palette for a Website

Start with your brand color or a color that evokes the right emotion. Use this tool to generate a harmony-based palette, then apply the 60-30-10 rule: 60% dominant (usually the lightest neutral), 30% secondary, and 10% accent. Test your palette against real UI elements — buttons, text, backgrounds — and verify contrast ratios for accessibility (WCAG AA requires at least 4.5:1 for body text).

Keep your palette small — 3 to 5 colors plus neutrals. Too many colors create visual noise. Lock the colors you love, hit Random to explore variations, and export directly to CSS variables or Tailwind when you're ready to code.

What is a color palette?

A color palette is a curated set of colors used together in a design. Well-chosen palettes create visual harmony and brand consistency. They're usually built using color theory rules — complementary, analogous, triadic, etc. — that ensure the colors work well together.

What are complementary colors?

Complementary colors are pairs that sit directly opposite each other on the color wheel — like blue and orange, or red and green. They create strong contrast and visual energy. Use one as your dominant color and the other as a small accent for maximum impact.

What is the 60-30-10 rule?

The 60-30-10 rule is a design guideline for color distribution: 60% dominant color (backgrounds), 30% secondary color (content areas, cards), and 10% accent color (buttons, links, highlights). This ratio creates a balanced, professional look.

How many colors should a website have?

Most well-designed websites use 3 to 5 colors: a primary brand color, a secondary accent, neutrals for backgrounds and text, and optionally a highlight color. Too many colors feel chaotic; too few can look flat. Start with a harmony rule and add neutrals.

What is a monochromatic palette?

A monochromatic palette uses tints (lighter), shades (darker), and tones (desaturated) of a single hue. It guarantees harmony and is the easiest palette to implement. Great for minimalist designs, dashboards, and backgrounds.