Split-complementary colors
A split-complementary scheme uses a base color plus the two colors on either side of its complement, about 150 and 210 degrees away. Below: how split-complementary schemes work, examples for eight hues with hex codes, and how to use them.
What are split-complementary colors?
A split-complementary scheme uses a base color plus the two colors on either side of its complement, about 150 and 210 degrees away. Instead of red and green, for example, you use red with yellow-green and blue-green.
You keep most of the punch of a complementary pair, but the contrast is spread across two colors, so the scheme is easier to balance and less harsh. It is one of the safest high-contrast schemes for beginners.
Which color wheel?
On the RYB wheel, yellow’s split complements are red-violet and blue-violet. The examples below use OKLCH hue rotation of 150 and 210 degrees.
Split-complementary colors examples
| Base | Hex codes | Palette |
|---|---|---|
| Red | #FF0000, #009F8A, #0092D4 | Open in generator |
| Orange | #FFA500, #00D0FC, #AFB4FF | Open in generator |
| Yellow | #FFFF00, #EFF5FF, #FCF0FF | Open in generator |
| Green | #008000, #6F4DC3, #AF2D72 | Open in generator |
| Teal | #008080, #96597C, #9C5D40 | Open in generator |
| Blue | #0000FF, #844100, #565B00 | Open in generator |
| Purple | #800080, #495400, #005B4E | Open in generator |
| Pink | #FFC0CB, #ACE3C0, #9BE0F3 | Open in generator |
How to use split-complementary colors
- Use the base color for large areas and the two split complements as accents.
- Keep one of the split complements warm and the other cool for a lively, balanced feel.
- Mute the accents if the result feels too busy.
In interface design, a split-complementary palette usually becomes a set of roles rather than equal colors: one color for primary actions, one for supporting surfaces or illustrations, and neutrals for text and backgrounds. Generate a full tint and shade scale for each hue so you have light backgrounds, borders and accessible text in the same family.
Every palette here opens in the palette generator, where you can lock colors, adjust them in OKLCH and check contrast before exporting to CSS, Tailwind or Figma.
Other color harmonies
- Complementary colorsComplementary colors sit directly opposite each other on the color wheel, 180 degrees apart.
- Analogous colorsAnalogous colors are three or more colors that sit next to each other on the color wheel, usually within about 30 degrees of each other: yellow, yellow-orange and orange, for example.
- Triadic colorsA triadic color scheme uses three colors evenly spaced around the color wheel, 120 degrees apart, forming a triangle.
- Monochromatic colorsA monochromatic color scheme uses a single hue in several lightness and saturation levels: tints (with white), shades (with black) and tones (with gray).
Frequently asked questions
What is a split-complementary color scheme?
A base color with the two hues adjacent to its complement, forming a narrow Y shape on the color wheel.
What is the split-complement of blue?
On the RYB wheel, yellow-orange and red-orange. On the digital wheel, colors either side of yellow.
Is split-complementary better than complementary?
It is easier to balance and less harsh, while still giving strong contrast. Complementary gives the maximum contrast.
Make a split-complementary palette
Start from any color in the generator, choose a harmony and adjust it in OKLCH.