justyourpaletteSplit Complementary Colors
Strong contrast with less tension than a complementary pair.
- 100% Free
- No Sign Up
- Works in Your Browser
Split complementary
A base color plus the two neighbors of its complement
More Color Tools
View all tools- Color wheelFind color harmonies on an interactive wheel
- Complementary colorsFind the complementary color of any color
- Analogous colorsFind neighboring colors for calm schemes
- Triadic colorsThree colors evenly spaced around the wheel
- Monochromatic colorsLighter and darker versions of one hue
- Palette generatorGenerate color palettes and lock the ones you like
- Color pickerPick a color and copy it as hex, RGB or HSL
- Contrast checkerCheck text and background contrast against WCAG
- Hex to RGBConvert hex color codes to RGB values
Every everyday color tool, right in your browser.
No software. No uploads. No signup.
Browse all 28 tools- Color tools
- 28
- Named colors
- 139
- Curated palettes
- 216
How to use the split complementary
Three steps, all in your browser.
- 1
Pick a base color
Type a code or use the picker to set the starting color.
- 2
Choose the harmony
Switch the scheme or move the base color; the palette follows.
- 3
Copy the codes
Copy any color code in one click, or share the page link.
Split Complementary Colors: what to know
The split-complementary generator takes your base color and, instead of its exact opposite, picks the two colors on either side of the opposite: 150 and 210 degrees around the wheel. You keep most of the contrast of a complementary scheme with less tension, which makes it easier to use well.
For a blue base, the complement lies in the yellow-orange hues; a split-complementary scheme uses the hues on either side of it, an orange and an olive yellow-green. The two accents are close to each other, so they read as a family while both standing out against the base.
It's a good fit when you need two accent colors, for example one for primary buttons and one for highlights or badges.
Popular uses
- Interfaces that need two distinct accent colors
- Illustrations with a main color and warm or cool highlights
- Marketing graphics that need contrast without clashing
- Picking accent colors for a neutral brand
Tips for the best result
- Let the base color dominate and keep the two accents small.
- Swap which accent is used for actions until the hierarchy feels right.
- If the scheme feels too busy, desaturate one accent.
Read how JustYourPalette works, browse named colors and curated palettes, and see our privacy details. Colors you enter and images you open are processed in your browser and are never sent to our server.