A base color paired with the two colors adjacent to its complement (150° and 210°).

Split-Complementary Harmony Calculator

Drag the handle around the wheel or use sliders below

Harmony Formula

RGB(16, 183, 127)

Hue Angle160°

Saturation84%

Lightness39%

Generated Harmonies (3 Colors)

Primary Base

#10B77F

oklch(0.690 0.148 162.2)

Split Accent 1

#B7109B

oklch(0.535 0.228 337.2)

Split Accent 2

#B72C10

oklch(0.513 0.179 32.8)

Design System Validation

Live UI Component Preview

Apex Analytics

Team Dashboard

Harmonized Active

Total Conversion+18.4%

$84,290

Active Users+34.2%

14,820

Harmonic Health99.8%

Optimal

Interactive Button & State Styles

Verify clickability, state contrasts, and visual weight across primary and secondary controls.

Badge Tag (#B72C10)

Accessibility Audit

WCAG 2.1 Contrast Matrix

Evaluates minimum contrast ratios for regular body text (4.5:1 AA, 7:1 AAA) and large text (3:1).

Color Role	Hex	On Pure White (#FFF)	On Dark Obsidian (#0B0F19)	Recommended Usage
Primary Base	#10B77F	2.59:1(Fail)	7.39:1(AAA)	Best on Dark UI / Buttons
Split Accent 1	#B7109B	5.90:1(AA)	3.25:1(AA (large text))	Best on Light UI / Backgrounds
Split Accent 2	#B72C10	6.21:1(AA)	3.08:1(AA (large text))	Best on Light UI / Backgrounds

Design Token Generator

50–950 Tailwind Shade Ramp

Click any swatch to copy its HEX value. Formatted for Tailwind CSS v4 / v3 color configurations.

Developer Export Center

Ready-to-Use Code Snippets

// tailwind.config.js / CSS @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#F5FAF8',
          100: '#E7F3EF',
          200: '#B4F8E2',
          300: '#85F4CF',
          400: '#4DEFB9',
          500: '#10B77F',
          600: '#11C589',
          700: '#0EA06F',
          800: '#0A7552',
          900: '#015539',
          950: '#013222',
        },
        secondary: '#B7109B',
        accent: '#B72C10',
      }
    }
  }
};

Theoretical Foundation

Understanding Split-Complementary Harmony

Split-complementary harmony takes the standard complementary pair and splits the opposite hue into its two immediate neighbors. This delivers the dynamic tension and contrast of complementary colors while smoothing out the harshness. It is widely considered by senior UI designers to be the most forgiving and versatile color scheme for web applications.

✓Ideal Use Cases in Web & App UI

•Marketing landing pages that require multiple accent buttons without clashing.
•Fintech apps that need an organic, trustworthy base with crisp secondary accents.
•Design systems seeking high accessibility scores across diverse user demographics.

✗Common Design Mistakes to Avoid

•Confusing split-complementary with triadic by placing the accents too far apart.
•Forgetting to check contrast on the secondary split tone.

UI Implementation Architecture

How to Structure Split-Complementary Harmony in Production Code

Follow this token role hierarchy when integrating split-complementary harmony spokes into your design system tokens:

60% Primary Tone

Base Surface & Canvas

Use shade 50 (or 950 in dark mode) as your primary canvas background tint to establish emotional mood without compromising readability.

30% Secondary Spokes

Borders & Secondary Pills

Apply secondary harmony spokes to component card borders, tag badges, sidebar active indicators, and chart telemetry tracks.

10% Accent Spoke

High-Impact Action & CTA

Reserve your sharpest harmony spoke for conversion buttons, primary checkout buttons, and interactive focus rings.

Other Color Harmony Calculators

Complementary Harmony

Two colors positioned directly opposite on the wheel (180° apart).

Triadic Harmony

Three colors evenly spaced around the color wheel (120° apart).

Analogous Harmony

Three colors sitting side-by-side on the wheel (typically 30° apart).

Tetradic (Square) Harmony

Four colors arranged into two complementary pairs or spaced at 90° intervals.

Monochromatic Harmony

A single hue explored across varying saturation, tint, and shade levels.