Split Complementary Colors
A base hue plus the two hues adjacent to its complement — a harmony with the punch of a complementary pair and the flexibility of a triad.
Example palette
Base at 0° (red), split complements at 150° (spring green) and 210° (azure).
The 150°/210° rule
On the HSL color wheel, split complementary hues sit at 150° and 210° from the base. Equivalently, they sit 30° on either side of the base's complement at 180°.
hue1 = base
hue2 = (base + 150) % 360
hue3 = (base + 210) % 360For example, red at 0° → split complements at 150° (spring green) and 210° (azure). Violet at 275° → split complements at 65° (yellow) and 125° (lime).
Split complementary vs complementary
| Harmony | Hues | Character |
|---|---|---|
| Complementary | Base + 180° | Maximum contrast, two hues |
| Split complementary | Base + 150° + 210° | Strong but nuanced, three hues |
| Triadic | Base + 120° + 240° | Vibrant, balanced, three hues |
Why split complementary is easier to use
A pure complementary pair forces a two-part design: one color dominates, the other becomes the accent. There is no middle ground. Split complementary replaces the exact opposite with two neighbors, which means you can spread emphasis across three hues more naturally. The palette feels energetic without the visual "vibration" that pure complementary pairs sometimes produce.
How to use split complementary well
-
Choose the base hue carefullyThe base carries most of the design weight — it is the color of your brand, your primary buttons, your surfaces. It should be the color you care most about.
-
Balance the two split partnersDo not use them equally. Pick one as the visible accent, and the other as a rare highlight. This is where most split complementary designs either succeed or fail.
-
Vary saturation and lightnessThree hues at full saturation vibrate. Softening at least one — usually by reducing saturation by 15–25% — makes the palette feel refined.
-
Add a solid neutral scaleSplit complementary palettes work best with a clean warm, cool or neutral gray scale for surfaces and text.
Practical examples
- Marketing hero sections — a vivid brand color with two unexpected accents creates a memorable composition.
- Product packaging — three hues give each product variant a distinct feel while remaining part of the same family.
- App onboarding screens — one base with two accents guides the eye through a step-by-step flow.
- Editorial layout — one base color for headlines, two accents for categories and callouts.
Frequently asked questions
What are split complementary colors?
A palette with one base hue plus the two hues adjacent to its complement — typically at 150° and 210° from the base. This produces strong contrast with more nuance than a pure complementary pair.
What is the difference between complementary and split complementary?
A complementary palette uses a base hue and its exact opposite at 180°. A split complementary palette replaces that opposite with the two hues on either side of it, at 150° and 210°. Split complementary is easier to balance because three hues provide more flexibility.
Why is split complementary easier to use?
Because three colors give you room to create hierarchy. With a pure complementary pair, one color must dominate and the other becomes an immediate accent. With split complementary, you can distribute emphasis across three hues — one dominant, one visible accent, one highlight.
When should I use split complementary?
Split complementary works well when you want strong, distinctive color without the harshness of a pure complementary pair. It is common in marketing, product packaging, illustration and any design that needs energy without feeling aggressive.