"Do these colors go together?" is one of the most common questions in design, and the answer is rarely taste alone. There are a few dependable methods that get you most of the way, and a quick process to finish the job. Here they are.
1. Start from a colour harmony
Colour harmonies are relationships between positions on the colour wheel. They will not make a palette for you, but they give you a reliable starting set.
- Monochromatic: one hue in several lightness steps. Calm, safe, easy to make accessible.
- Analogous: two or three neighbours on the wheel, like blue, blue-green and green. Natural and gentle.
- Complementary: opposites, like blue and orange. High energy. Let one dominate and use the other sparingly.
- Split complementary: one colour plus the two neighbours of its opposite. Lively but easier to balance than pure complements.
- Triadic: three colours evenly spaced. Playful, needs careful restraint.
2. Use the 60-30-10 split
Most clashing palettes are not wrong colours, they are wrong amounts. Give one colour about 60 percent of the space, a second about 30 percent and an accent the last 10 percent. In an interface that usually means a neutral background, a surface or brand colour, and an accent kept for buttons, links and highlights.
3. Match saturation and temperature
Colours that share a similar saturation or temperature feel related, even across hues. A dusty pink, a dusty blue and a dusty green go together because they are all equally muted. A neon green next to muted pastels feels out of place because it shouts in a room where everyone else is talking.
If two colours almost work, try nudging one of them towards the saturation or lightness of the other before changing the hue.
4. Borrow from photos
A photograph is a palette that already works in real light. Pick one that has the mood you want, pull out four or five colours, and you have a starting point that feels natural. We walk through it in how to extract a color palette from an image.
5. Borrow from products you admire
Real interfaces show you colour in use: how much of the accent appears, what the neutrals look like, how hover and disabled states are handled. Inspect the site to get exact values, as described in how to find the colors and fonts used on any website, and save the screenshot with the hex codes in the note so you can find it later.
6. Check contrast early
Colours can go together beautifully and still fail as text and background. For body text, aim for a contrast ratio of at least 4.5:1 against its background, and at least 3:1 for large text and interface elements like icons and input borders. Check while you choose, not at the end, or you will be redesigning your palette in week three.
A quick process that works
- Choose one colour you are sure about. A brand colour, or one from a reference.
- Pick a harmony to generate two or three partners.
- Adjust saturation and lightness until one colour clearly leads.
- Add neutrals: an off-white, a dark text colour and two or three greys tinted slightly towards your main hue.
- Assign the 60-30-10 roles.
- Check contrast for every text and background pair.
- Test the palette on a real screen, not on swatches. Colours change when they surround each other.
Keep the palettes that work
Every time you find a combination that works, in a product, a poster or a photo, save it with its hex values in the note. A library of proven combinations is faster than any generator, because you already know they look good in use. See building a design library for the habit and how to choose a color palette for UI for the interface-specific version.
Common questions
- How do I know which colors go together?
- Start with a colour harmony rule such as complementary, analogous or triadic, then adjust lightness and saturation until one colour leads and the others support it. Check contrast for anything that holds text. Colours that share a similar temperature or saturation also tend to sit well together.
- What are the easiest colors to pair?
- A single hue in several lightness steps (a monochromatic palette) is the safest. Next easiest is a neutral grey or off-white with one strong accent colour. Analogous colours, which sit next to each other on the colour wheel, are also hard to get wrong.
- What is the 60-30-10 rule?
- Use a dominant colour for about 60 percent of the surface, a secondary colour for about 30 percent, and an accent for the remaining 10 percent. In UI, that usually means a neutral background, a supporting surface or brand colour, and an accent kept for buttons and highlights.
- How do I find colors that match from a photo?
- Extract the dominant colours from the image with a palette tool, or sample them yourself with an eyedropper, then pick one as the accent and tone down the others. Photos are reliable sources because their colours already coexist in real light.
