Good palettes rarely come from luck. They come from a few deliberate decisions made in the right order. This method works for websites, apps, brands and slide decks.
1. Define the mood in three words
Before touching a color picker, write three adjectives: for example "calm, trustworthy, modern". These words will help you reject attractive colors that send the wrong message.
2. Pick one primary color
Choose a single color that carries the identity. Blues and teals feel stable, oranges feel energetic, greens feel natural. Explore the encyclopedia or use the palette generator and lock the color you like.
3. Add neutrals first, accents second
Most of any interface is neutral: backgrounds, text, borders. A common structure is:
- 60% neutral background (an off-white or very light gray).
- 30% supporting color (often a darker neutral or a muted version of the primary).
- 10% accent for buttons and highlights.
4. Use a harmony rule for the accent
A complementary accent (opposite on the wheel) gives strong contrast; an analogous accent (next to it) feels calmer. Teal with coral is a classic near-complementary pair. Read more in Understanding Color Harmony.
5. Build a scale for each color
Real interfaces need hover states, disabled states and tinted backgrounds. Generate 5–10 lighter and darker steps for the primary and accent with the shades generator.
6. Test contrast and color blindness
Check every text/background pair with the contrast checker or the whole palette at once with the palette accessibility analyzer. Then preview it in the color blindness simulator.
Common mistakes to avoid
- Too many saturated colors competing for attention.
- Pure black text on pure white for long reading — a very dark gray is gentler.
- Using color alone to signal errors or success.
