Monochromatic
One hue in lighter and darker shades. Calm, consistent and hard to get wrong.
Best for minimal brands and interfaces
●Free colour tool
Color Harmony Tool
Start from one colour and get a full palette for your site or brand. See it on a real page, fix contrast in one click, and copy the code.
Press Space for a new palette. Lock the colours you like and they'll stay. Click a colour to copy it.
Your palette in use
New: team spaces
Plan less. Ship more.
The project tool for small teams who'd rather build than sit in status meetings.
Start freeSee how it works
One clear planEveryone sees what's next.
Updates write themselvesProgress rolls up from the work.
Built for focusFewer pings, more done.
Is it readable?
Contrast checks against WCAG AA, the standard most accessibility guidelines use.
The five roles
What does each color in a palette do?
Instead of five random swatches, every colour has a job. That's what makes a palette work on a real page.
The basics
What is color harmony?
Color harmony is a set of colors that look good together because of where they sit on the color wheel. Picking colors by their relationship (next to each other, opposite, or evenly spaced) gives you a palette that feels balanced instead of random.
Harmony gets you colors that belong together. Roles and contrast make them usable: which color is the background, which is for text, and whether people can actually read it. This tool handles all three.
Color schemes
What are the main types of color harmony?
Six relationships cover nearly every palette. Each one below is generated from the same indigo by the tool above.
Analogous
Neighbours on the color wheel, like blue, indigo and violet. Relaxed and cohesive.
Best for wellness, nature and editorialComplementary
Two opposite colors, like blue and orange. High energy: use one as the lead and the other for accents.
Best for calls to action and sportSplit complementary
One color plus the two neighbours of its opposite. Bold like complementary, but easier to balance.
Best for brands that want contrast without clashingTriadic
Three colors evenly spaced around the wheel. Playful and lively. Let one dominate.
Best for kids, food and creative brandsSquare and tetradic
Four colors in two opposite pairs. Rich, but needs a neutral background to stay calm.
Best for illustration and data visuals
Step by step
How do you create a color palette for your brand?
Start from one color that fits your brand's personality, choose a harmony to generate the rest, then give each color a job: background, surface, text, primary and accent. Check that text is readable on every background, and test the palette on a real page before you commit.
- Pick one starting colorBlue reads as trustworthy, green as natural, orange as energetic. Start with the feeling you want.
- Choose a harmonyAnalogous for calm, complementary or split for energy, mono for minimal.
- Balance it with 60-30-10About 60% background, 30% supporting color, 10% accent. It keeps bright colors from overwhelming the page.
- Check contrast, then test itFix any text that fails, then see the palette on a real layout, like the preview above.
60% backgroundLarge, calm areas: page backgrounds and panels.
30% primaryHeaders, buttons and key sections.
10% accentHighlights and the one thing you want clicked.
Accessibility
How much contrast do colors need for text?
Body text needs a contrast ratio of at least 4.5:1 against its background to meet WCAG AA, the accessibility standard most guidelines use. Large text (about 24 pixels, or 19 pixels bold) and icons need at least 3:1.
Contrast is measured between two colors, from 1:1 (identical) to 21:1 (black on white). Pastel text on a white background is the most common failure. The “Fix” buttons above nudge lightness until a pair passes.
Aa
Dark text on a light background
Aa
White text on indigo
Aa
Orange text on white
Aa
Pastel text on white
Mistakes to avoid
What makes a color palette look wrong?
Too many bright colors
Five saturated colors all fight for attention. Let one lead, keep one for accents, and make the rest light neutrals.
Text that's hard to read
A palette can look great as swatches and still fail as a page. Always check text against the background it sits on.
Grey that doesn't belong
Pure grey looks dull next to a colorful palette. Tint your neutrals slightly toward your main hue, as the background and text colors here do.
Color as the only signal
Red for errors and green for success isn't enough on its own: about 1 in 12 men has some color blindness. Add an icon or a word too.
FAQ
Color harmony FAQ
What colors go well together?
Colors with a clear relationship on the color wheel: neighbours (analogous), opposites (complementary) or evenly spaced sets (triadic). Pair one of those with light and dark neutrals, and almost any color works.
How many colors should a brand palette have?
Three to five is typical: one or two brand colors, an accent, and light and dark neutrals for backgrounds and text. More than that gets hard to use consistently.
What's the difference between HEX, RGB and HSL?
They're three ways to write the same color. HEX (#4F46E5) is the most common in design tools and CSS, RGB lists red, green and blue values, and HSL describes hue, saturation and lightness, which makes it easy to create lighter or darker versions.
How does “Fix” change my colors?
It keeps the same hue and saturation and adjusts only the lightness, just enough to pass, so the color still feels like yours.
Can I share a palette?
Yes. “Copy share link” creates a link that opens this exact palette, including the harmony you picked.
More free tools
Finish your visual system
Find colour ideas in real designs
Browse hand-picked designs from brands with palettes worth borrowing from.
Browse the design library