Split Complementary Palette Generator
Generate split-complementary color palettes — the base color plus the two hues adjacent to its complement. Strong visual contrast with the softer, more usable feel that modern brands prefer.
Colors
CSS Variables
What Is a Split Complementary Palette?
A split-complementary palette uses three colors: a base, and the two colors that sit on either side of the base's complement (typically ±30° from 180°). It is one of the most balanced color harmonies — less tense than pure complementary, more vibrant than analogous.
How Split Complementary Palettes Work
Base: #155EEF (hue 215°)
Split-complementary hues:
Base → 215°
+150° → 5° (red-orange)
+210° → 65° (yellow-orange)
The two accents sit on either side of the true
complement (35° = orange), creating a triangle
that is grounded but energetic.When to Use Split Complementary Palettes
- Modern SaaS: A brand color with two warm accents that pop without tension.
- E-commerce: Base color for navigation, split pair for product highlights and CTAs.
- Product packaging: Shelf impact without harshness.
- Logos: Modern, design-forward, energetic but balanced.
- Editorial: Pull quotes and drop caps in split-complementary accents.
Best Practices
Use the base color for backgrounds and primary UI, and split the two accents between secondary UI (25%) and CTAs (10%). Split-complementary palettes feel harmonious because the two accent colors are near each other — use both, but emphasize one slightly so the palette has direction rather than symmetry.