🎨 Split Complementary Color Generator
By ToolNimba Editorial Team · Updated 2026-06-19
Split-complementary scheme
Complement (for reference)
Pick a base color. Click any swatch to copy its hex code.
This split-complementary generator takes one base color and builds a balanced three-color scheme around it. Instead of pairing your color with its direct opposite, it uses the two colors sitting on either side of that opposite, at +150 and +210 degrees around the color wheel. Pick a color or paste a hex code, and the tool shows the base plus the two split-complementary swatches. Click any swatch to copy its hex. Everything runs in your browser, so your colors never leave your device.
What is the Split Complementary Generator?
A split-complementary scheme starts from a base color and its complement (the hue directly opposite on the color wheel, 180 degrees away). Rather than using that opposite hue itself, the scheme splits it into the two hues that flank it: one at +150 degrees from the base and one at +210 degrees. The result is a trio that keeps the strong contrast of a complementary pairing but softens it, because neither accent sits exactly opposite the base. That makes split-complementary schemes one of the most forgiving and beginner-friendly ways to combine colors.
The tool works in HSL (hue, saturation, lightness). Your hex color is converted to HSL, the hue is rotated by +150 and +210 degrees while saturation and lightness are held steady, and the two new hues are converted back to hex. Holding saturation and lightness constant is what keeps the three colors feeling like a family: they share the same vividness and brightness, so no single swatch jumps out as washed out or muddy next to the others.
In practice you use the base color for the dominant area (a background, a large block, or your primary brand color) and reserve the two split colors as accents: buttons, links, highlights, icons, or call-to-action elements. Because the two accents are close to each other on the wheel, they read as a coordinated pair rather than competing, while still standing out clearly against the base. This balance of contrast and harmony is why designers reach for split-complementary palettes for logos, posters, dashboards, and data visualizations.
When to use it
- Choosing two accent colors for buttons, links, and highlights that contrast cleanly with a primary brand color without clashing.
- Building a poster, flyer, or slide deck palette that feels bold but still coordinated.
- Picking distinct yet harmonious colors for charts, tags, or category labels in a dashboard.
- Refreshing a single brand hue into a small, usable scheme when a full palette feels like too much.
How to use the Split Complementary Generator
- Pick a base color with the color picker, or type or paste a hex code into the HEX field.
- Read off the base color plus the two split-complementary swatches at +150 and +210 degrees.
- Check the complement swatch shown for reference to see where the split is coming from.
- Click any swatch to copy its hex code to the clipboard.
Formula & method
Worked examples
Your base color is a pure blue at hue 240 degrees.
- Complement = 240 + 180 = 420, then 420 mod 360 = 60 (yellow).
- Split 1 = 240 + 150 = 390, then 390 mod 360 = 30 (orange).
- Split 2 = 240 + 210 = 450, then 450 mod 360 = 90 (yellow-green).
- Saturation and lightness stay the same, so the orange and yellow-green match the blue in vividness.
Result: Base hue 240 (blue), split-complementary hues 30 (orange) and 90 (yellow-green).
Your base color is a red at hue 0 degrees.
- Complement = 0 + 180 = 180 (cyan).
- Split 1 = 0 + 150 = 150 (spring green).
- Split 2 = 0 + 210 = 210 (azure blue).
- The two accents sit either side of cyan, giving contrast with red while staying coordinated.
Result: Base hue 0 (red), split-complementary hues 150 (spring green) and 210 (azure).
Base hue and its split-complementary pair (+150 and +210 degrees)
| Base hue | Approx. color | Split 1 (+150) | Split 2 (+210) |
|---|---|---|---|
| 0 | Red | 150 (spring green) | 210 (azure) |
| 60 | Yellow | 210 (azure) | 270 (violet) |
| 120 | Green | 270 (violet) | 330 (magenta) |
| 180 | Cyan | 330 (magenta) | 30 (orange) |
| 240 | Blue | 30 (orange) | 90 (yellow-green) |
| 300 | Magenta | 90 (yellow-green) | 150 (spring green) |
How common harmony schemes differ by hue spacing
| Scheme | Hues used | Feel |
|---|---|---|
| Complementary | Base and base + 180 | Maximum contrast, can feel harsh |
| Split-complementary | Base, base + 150, base + 210 | Strong contrast, more balanced |
| Triadic | Base, base + 120, base + 240 | Even, vibrant, evenly spaced |
| Analogous | Base and nearby hues (about +30) | Calm, low contrast, harmonious |
Common mistakes to avoid
- Using all three colors in equal amounts. A split-complementary scheme works best with one dominant color and the other two as accents. Splitting the page evenly across all three tends to look busy and removes the sense of a clear primary color.
- Confusing split-complementary with triadic. A triadic scheme spaces three hues evenly at 120 degrees apart. Split-complementary keeps the base, then uses +150 and +210, which are 60 degrees apart from each other and clustered opposite the base. The two are not the same.
- Changing saturation or lightness between the three colors. Rotating only the hue keeps the colors feeling like a set. If you also bump the saturation or lightness of one accent, it can look out of place. Adjust those deliberately, not by accident.
- Forgetting to check contrast for text. A harmonious palette is not automatically readable. If you put text in one scheme color over another, verify the contrast ratio meets accessibility guidance before shipping it.
Glossary
- Hue
- The position of a color on the color wheel, measured in degrees from 0 to 360 (red at 0, green near 120, blue near 240).
- Complement
- The hue directly opposite a color on the wheel, 180 degrees away, giving the strongest contrast.
- Split-complementary
- A scheme using a base color plus the two hues flanking its complement, at +150 and +210 degrees from the base.
- HSL
- A color model defined by hue, saturation, and lightness, used here to rotate hue while holding the other two steady.
- Saturation
- How vivid or intense a color is, from gray (0) to fully colorful (100%).
Frequently asked questions
What is a split-complementary color scheme?
It is a three-color scheme made from a base color plus the two hues sitting on either side of its complement. Instead of pairing your color with its exact opposite, you use the two neighbours of that opposite, at +150 and +210 degrees around the wheel. The result keeps strong contrast but feels more balanced and easier to use.
How is split-complementary different from complementary?
A complementary scheme uses just two colors: your base and the hue directly opposite it (180 degrees away). That contrast can feel harsh. Split-complementary swaps that single opposite for the two hues beside it (+150 and +210), giving you three colors with similar contrast but a softer, more forgiving balance.
How does the generator calculate the colors?
It converts your base color to HSL, then rotates the hue by +150 and +210 degrees while keeping saturation and lightness the same. Each new hue is converted back to RGB and shown as a hex code. Holding saturation and lightness steady is what keeps the three colors looking like a coordinated family.
Why use +150 and +210 instead of the exact complement?
The exact complement at +180 gives maximum, sometimes jarring contrast. Splitting it into +150 and +210 keeps almost as much contrast against the base while letting the two accents work together as a pair, since they are close to each other on the wheel. This makes the palette more flexible and less likely to clash.
How should I use the three colors in a design?
Use the base color for the dominant area such as a background or primary brand element, and use the two split colors as accents for buttons, links, highlights, or icons. Keeping one color dominant and the other two as smaller accents gives the cleanest, most professional result.
Is split-complementary good for beginners?
Yes. It is one of the most beginner-friendly schemes because it almost always produces a pleasing, high-contrast result without the harshness of a pure complementary pairing. As long as you let one color dominate and use the other two sparingly, it is hard to get wrong.