Split Complementary Color Wheel
Split complementary softens a direct complement: your base hue plus the two colors flanking its opposite — contrast without tension.
Base color plus two adjacent to its complement.
Color tools
More free color tools
Palettes, gradients, accessibility checks, and print-ready conversions — all in one place.
- Color Palette Generator
Generate harmonious palettes from one color — complementary, triadic, analogous, and more. CMYK values and print gamut warnings included.
- CSS Gradient Generator
Build linear, radial, and conic CSS gradients with live preview. Copy production-ready code instantly.
- WCAG Contrast Checker
Check color contrast ratios against WCAG 2.1 AA and AAA. Includes palette matrix mode and auto-fix suggestions.
- Tint & Shade Generator
Turn one brand color into a Tailwind-compatible 50–950 scale with WCAG contrast badges on every swatch.
- Palette from Image
Extract dominant colors from any photo — runs entirely in your browser. Send colors to converters or palette tools.
- Color Blindness Simulator
Preview palettes as seen with protanopia, deuteranopia, or tritanopia. Essential for accessible design.
- Print Gamut Checker
See exactly how a screen color shifts when printed in CMYK. Side-by-side press preview with shift warnings.
- Compare Colors (Delta E)
Measure the perceptual difference between two colors with ΔE2000 — plus HEX, RGB, CMYK, and HSL values for both.
- Random Color Generator
Generate a random HEX color, a lockable five-color palette, or a two-color CSS linear gradient. Copy HEX, RGB, HSL, and CMYK.
How this harmony sits on the wheel
Split complementary starts with a base hue, then takes the two hues on either side of its opposite instead of the opposite itself. You still get contrast, and you avoid a single head-on complement. On the wheel the two accent markers sit just off the 180-degree line.
The scheme is easier to live with in an interface than a pure complement because the two accents are related to each other. They are analogous to one another and both contrast with the base. Use the base for the brand field and one accent for actions. The second accent can mark a different state, as long as that state also has a label or an icon.
Do not assume the two accents are distinguishable to everyone. They sit near each other, so a red-green pair in this arrangement can collapse under a color-vision simulation. Run the colors through the simulator and add a second cue.
Lightness still does the work for text. A split complement chosen only for hue can be too light for body copy on white. The color theory guide is the short version of why value is a separate decision from the wheel position.
The relationships are introduced in color theory 101. Explore every rule on the main color wheel, or lock swatches in the split-complementary palette generator. Named swatches live in the color index.
FAQ
Frequently asked questions
Questions about the split-complementary color wheel.
- How is split complementary different from complementary?
- Complementary uses the exact opposite hue. Split complementary uses the two hues beside that opposite. The color theory guide describes both as hue relationships.
- Which color should be dominant?
- Usually the base hue, in a larger area, with the two split accents used sparingly. Build that balance in the split complementary palette generator.
- Can the two accent hues be too close?
- Yes. They are neighbors of each other. If a status depends on telling them apart, add a label and check the color blindness simulator.
- Does this scheme handle text contrast?
- The wheel does not measure contrast. Check text and background in the contrast checker.