How to Choose Colors That Go Together: A Color Wheel Guide
Use the color wheel to build color schemes that work, from complementary to triadic, with tips on balance and contrast, and a free color wheel tool.
Published
Free tool: Color WheelChoosing colors that look good together isn't just a matter of taste. Designers rely on the color wheel, which arranges colors in a circle, and a handful of simple rules about where on the circle to pick them. This guide explains the classic color schemes, the two kinds of color wheel and how to turn a scheme into a palette that works, using the free Color Wheel.
Two kinds of color wheel
- The painter's wheel (RYB) is built on red, yellow and blue, the primaries of traditional art. Its opposite pairs are the classic ones: red and green, yellow and purple, blue and orange. It's the wheel most color theory is taught with.
- The screen wheel (RGB) is built on red, green and blue light, the way screens produce color. Its opposites are red and cyan, green and magenta, and blue and yellow.
The two give different answers: the complement of pure red is green on the painter's wheel but cyan on the screen wheel. The Color Wheel tool lets you switch between them. The painter's wheel tends to give the more familiar, pleasing combinations; the screen wheel gives exact opposites on screen.
The classic color schemes
Each scheme picks colors by their position on the wheel. Here they are for a medium blue, #2A78D6, on the painter's wheel:
| Scheme | How it's built | Example palette | Feel |
|---|---|---|---|
| Complementary | The color directly opposite | #2A78D6 #D66D2A | Strongest contrast, bold |
| Analogous | The neighbors on either side | #2A78D6 #2AD688 #492AD6 | Calm, harmonious, common in nature |
| Triadic | Three colors evenly spaced | #2A78D6 #D62A5E #D6C32A | Vibrant but balanced |
| Split complementary | The two colors beside the complement | #2A78D6 #D6422A #D6982A | Strong contrast with less tension |
| Tetradic (rectangle) | Two complementary pairs | Four colors | Rich; let one color lead |
| Square | Four colors evenly spaced | Four colors | Lively; needs careful balance |
| Monochromatic | Lighter and darker versions of one hue | #0C2440 #1B4F8D #2A78D6 #83B0E7 #D4E4F7 | Simple, cohesive, calm |
If you're not sure where to start, analogous and monochromatic schemes are the hardest to get wrong, and complementary is the easiest way to make something stand out, such as a button or a highlight.
Turning a scheme into a palette that works
A color scheme gives you hues; a good palette also needs proportions, contrast and neutrals.
- Use the 60-30-10 rule. Let one color cover about 60% of the space, a second about 30% and an accent about 10%. Equal amounts of every color usually look chaotic.
- Vary lightness and saturation, not only the hue. A dark navy and a pale sky blue are the same hue but play very different roles.
- Lean on neutrals. Whites, grays and near-blacks do most of the work in good designs, so the scheme's colors can be used where they matter.
- Check the contrast of text. The web accessibility guidelines (WCAG) ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. White text on
#2A78D6comes to about 4.4:1, just short for small text, so you'd darken the blue a little for body text, or keep it for large headings and bold buttons. - Don't rely on color alone. Around 1 in 12 men has some form of color vision deficiency, most often red–green, so pair color with labels, icons or patterns where meaning matters.
How to use the Color Wheel
- Open the Color Wheel.
- Pick a base color. Drag the marker around the wheel, type a color code (HEX, rgb() or hsl()) or a color name, or click the random button. With the wheel selected, the arrow keys change the hue and saturation.
- Adjust the brightness with the slider.
- Choose a color scheme, from complementary to monochromatic. A short description explains each one.
- Choose the wheel: Painter's (RYB) or Screen (RGB).
- Work with the palette. Click any swatch to make it the new base color, copy its HEX code, or click Shades & codes to open it in the Color Picker, which shows its RGB, HSL and CMYK codes and checks text contrast.
- Copy the whole palette as a list of HEX codes or as CSS variables. The page address also updates as you go, so you can bookmark a palette or send the link to someone.
Want to start from a photo you love instead? The Image Color Picker pulls the main colors out of any image, and you can then build a scheme around one of them.
Frequently asked questions
What colors go well together?
Colors opposite each other on the color wheel, such as blue and orange, make bold, high-contrast pairs. Neighboring colors, such as blue, teal and green, look calm together. Shades of a single color always work. Whatever you choose, use one main color and keep the others in smaller amounts.
What's the difference between the RYB and RGB color wheels?
The RYB wheel is the traditional artist's wheel with red, yellow and blue as primaries; the RGB wheel is based on the red, green and blue light that screens use. They place colors slightly differently, so the same scheme can produce different partners: red's complement is green on the RYB wheel and cyan on the RGB wheel.
How many colors should a palette have?
Usually three to five, including at least one neutral. More colors are harder to balance and make a design feel busy.