Split-Complementary
Embed This Widget
Add the script tag and a data attribute to embed this widget.
Embed via iframe for maximum compatibility.
<iframe src="https://colorfyi.com/iframe/glossary/split-complementary/" width="420" height="400" frameborder="0" style="border:0;border-radius:10px;max-width:100%" loading="lazy"></iframe>Paste this URL in WordPress, Medium, or any oEmbed-compatible platform.
https://colorfyi.com/glossary/split-complementary/Add a dynamic SVG badge to your README or docs.
[](https://colorfyi.com/glossary/split-complementary/)Use the native HTML custom element.
A color scheme using one base color and the two colors adjacent to its complement on the color wheel.
Split-complementary is a variation of the complementary scheme that offers strong visual contrast but with less tension. For example, instead of pairing blue with orange (its complement), a split-complementary scheme pairs blue with yellow-orange and red-orange. This provides the contrast benefits of complementary colors while being more forgiving and versatile. It is one of the most recommended schemes for beginners because it is hard to get wrong and always produces a balanced, appealing result.
Try It Out
Related Articles
What Color Is Teal? The Complete Guide
Teal is a cyan-green with hex code #008080. Discover how it differs from turquoise, cyan, and aqua — plus design applications for web, fashion, and interiors.
What Is Color Harmony? Rules for Pleasing Palettes
Learn what color harmony means — complementary, analogous, triadic, and tetradic schemes. Understand the rules behind visually pleasing color combinations.
What Color Is Chartreuse? The Most Confusing Color
Chartreuse confuses everyone. CSS defines it as #7FFF00 — a yellow-green — but many people insist it's red or pink. Here's the science, history, and design breakdown.
Analogous Color Schemes: Creating Visual Harmony
Learn how analogous color schemes use neighboring hues to create natural harmony. Includes tips for choosing palettes, real design examples, and hex codes.
CSS Relative Color Syntax: Transform Any Color Dynamically
Master CSS relative color syntax to transform colors dynamically. Adjust hue, saturation, lightness, and alpha channels directly in your stylesheets.
Primary, Secondary, and Tertiary Colors Explained
Discover what primary, secondary, and tertiary colors are, how they are mixed, and how RYB and RGB models differ with practical hex code examples.