How to use the Complementary Colors
- Enter or pick a color.
- Choose the RGB wheel (for screens) or the RYB artist's wheel (for traditional color theory).
- See the complement, split-complements and a live preview; click to copy.
Complementary Colors features
- Complement and split-complementary colors for any HEX, RGB or HSL value
- RGB wheel for screens and RYB wheel for traditional color theory
- Your color and its partners plotted on the color wheel
- Live preview of the colors together in a sample layout
- Shareable link that remembers your color
Find the complementary color of any color
Complementary colors sit directly opposite each other on the color wheel. Put them side by side and each one makes the other look more intense, which is why complementary pairs are used for logos, sports kits, movie posters and call-to-action buttons. Enter any HEX, RGB or HSL color here and the generator shows its complement, its two split-complementary partners and a live preview of how they look together.
Your color is plotted on the wheel along with its partners, so you can see exactly how they relate. The link in your address bar updates as you go, so you can bookmark or share a result.
RGB wheel or RYB wheel?
There are two color wheels in common use, and they give different answers to "what is the opposite of this color?":
- RGB wheel (for screens). Based on red, green and blue light. It is the wheel behind CSS, HSL and digital design tools. Opposites here are exact inverses in light: blue and yellow, red and cyan, green and magenta.
- RYB wheel (for artists). The traditional painter's wheel based on red, yellow and blue pigments, taught in art schools for centuries. Opposites here are the classic pairs: red and green, blue and orange, yellow and purple.
Choose RGB when you are designing for screens and want mathematically opposite hues. Choose RYB when you want the pairings people recognise from art and interior design, or when you are working with paint, fabric or print.
Common complementary colors
| Color | Complement on the RGB wheel | Complement on the RYB wheel |
|---|---|---|
| Red | Cyan | Green |
| Blue | Yellow | Orange |
| Yellow | Blue | Purple |
| Green | Magenta / purple | Red |
| Orange | Azure blue | Blue |
| Purple | Green | Yellow-green |
What is split-complementary?
A split-complementary scheme uses your color plus the two colors on either side of its complement, 30° away from it. You keep most of the contrast of a complementary pair, but the scheme is easier to balance and less likely to feel harsh. It is a good choice when a straight complementary pair feels too loud, for example when you want a blue site with warm accents that are not quite orange.
How to use complementary colors well
- Let one color dominate. Use your main color for most of the design and the complement sparingly for accents, buttons and highlights. A 70/30 or 80/20 split usually looks better than an even one.
- Vary lightness and saturation. Pure complements at full saturation can appear to vibrate where they meet. Use a darker or softer version of one of them; the Shades & Tints Generator gives you options.
- Mind text contrast. Complementary colors can have similar lightness, so text in one on the other is often hard to read. Check it with the Contrast Checker.
- Think about color blindness. Red and green, the classic RYB pair, are the hardest colors to tell apart for most color-blind people. Preview your design in the Color Blindness Simulator.
Beyond complementary
Complementary and split-complementary are only two of the classic color harmonies. The Color Picker shows analogous, triadic, tetradic, square and monochromatic schemes for any color, and the Color Palette Generator can generate complete palettes from any of these rules.
Complementary Colors: frequently asked questions
What is the complementary color of blue?
On the RGB wheel used by screens it is yellow. On the traditional RYB artist's wheel it is orange.
What is split-complementary?
Instead of the direct opposite, it uses the two colors on either side of it (±30°). It keeps strong contrast but is easier to balance.
What is the complementary color of red?
Cyan on the RGB wheel used for screens, and green on the traditional RYB wheel.
What is the opposite color of yellow?
Blue on the RGB wheel and purple (violet) on the RYB artist's wheel.
Do complementary colors go well together?
Yes, they create the strongest contrast of any pair. They work best when one color dominates and the other is used for accents, and when their lightness differs.
Which color wheel should I use for web design?
The RGB wheel, because screens and CSS are based on it. Use the RYB wheel when you want traditional pairings like red and green or blue and orange.