# Color Split Complement

Generate split complementary color schemes with harmonious contrast using base color and two adjacent colors to complement

> Canonical page: https://elysiatools.com/en/tools/color-split-complement

- **Category:** Design

- **Keywords:** color, split complement, harmonious contrast, color harmony, color scheme, adjacent colors, triadic harmony

## Overview

The Color Split Complement tool helps designers and artists generate harmonious color palettes by pairing a base color with the two colors adjacent to its direct complement, creating a balanced, high-contrast aesthetic.

## Inputs

- **Base Color** (color)
- **Split Angle (degrees)** (number): Angle between complement and split colors (typically 15-45 degrees)
- **Saturation Adjustment** (number): Multiplier for saturation (0.5-2.0)
- **Lightness Adjustment** (number): Adjust lightness (-0.3 to 0.3)
- **Include Base Color** (checkbox)
- **Show HEX Codes** (checkbox)
- **Show RGB Values** (checkbox)
- **Show HSL Values** (checkbox)
- **Generate Extended Palette** (checkbox)

## When to use

- When you need a professional color scheme that offers more nuance than a simple two-color contrast.
- When designing UI elements that require a primary focus color supported by secondary accent colors.
- When you want to avoid the intensity of a direct complementary scheme while maintaining visual interest.

## How it works

- Select your base color using the color picker to define the starting point of your palette.
- Adjust the split angle to determine how far the secondary colors deviate from the direct complement.
- Fine-tune the saturation and lightness sliders to ensure the colors meet your specific design requirements.
- Toggle the display options to view the resulting HEX, RGB, or HSL values for easy implementation in your design software.

## Use cases

- Creating balanced website themes that use a primary brand color with complementary accent buttons.
- Developing interior design palettes that require a main wall color paired with two harmonious furniture or decor accents.
- Designing marketing graphics that need to stand out without using overly aggressive or clashing color combinations.

## Frequently asked questions

### What is a split complementary color scheme?

It is a color harmony that uses a base color and the two colors located on either side of its direct complement on the color wheel.

### How does the split angle affect the result?

The split angle determines the distance between the two accent colors; a smaller angle creates a tighter, more unified look, while a larger angle increases contrast.

### Can I adjust the brightness of the generated colors?

Yes, use the lightness adjustment slider to shift the entire palette toward lighter or darker tones.

### Are the color codes provided for all colors?

Yes, you can enable or disable the display of HEX, RGB, and HSL values based on your project needs.

### Is this tool suitable for web design?

Absolutely, the tool provides standard color formats like HEX and RGB, making it easy to copy and paste values directly into your CSS or design files.

## Related tools

- [CMYK Color Converter](https://elysiatools.com/en/tools/cmyk-converter): Convert HEX, RGB, HSL, and CMYK colors into all four representations.
- [Color Analogous](https://elysiatools.com/en/tools/color-analogous): Generate harmonious analogous color schemes with adjacent colors on the color wheel, creating unified and peaceful combinations
- [Color Complement](https://elysiatools.com/en/tools/color-complement): Find complementary colors and create harmonious color schemes with triadic, tetradic, and analogous color relationships
- [Color Gradient Generator](https://elysiatools.com/en/tools/color-gradient-generator): Generate smooth color gradients between multiple colors with customizable steps and formats
- [Color Inverter](https://elysiatools.com/en/tools/color-inverter): Invert colors and create negative versions with RGB, HSL, and brightness inversion methods
- [Color Scheme Generator](https://elysiatools.com/en/tools/color-scheme-generator): Generate professional color schemes and palettes for design projects
- [Color Sepia Toner](https://elysiatools.com/en/tools/color-sepia-toner): Apply sepia toning effects to colors with classic, warm, cool, and custom sepia styles
- [Color Shade Generator](https://elysiatools.com/en/tools/color-shade): Generate darker variations of a color by adding black, creating rich shades for depth and contrast in design

## Samples

- [Color Code Samples](https://elysiatools.com/en/samples/color-code): Collection of color codes in various formats (Hex, RGB, HSL, named colors) for validation testing
- [Web Image Processing Python Samples](https://elysiatools.com/en/samples/web-image-processing-python): Web Python image processing examples using PIL/Pillow including reading, saving, resizing, and format conversion
- [Android Image Processing Java Samples](https://elysiatools.com/en/samples/android-image-processing-java): Android Java image processing examples including reading/saving images, scaling, and format conversion
- [Android Image Processing Kotlin Samples](https://elysiatools.com/en/samples/android-image-processing-kotlin): Android Kotlin image processing examples including reading/saving images, scaling, and format conversion

## Related content

- [Accessible Color System Design Tools](https://elysiatools.com/en/hubs/color-design-tools): Build a reusable color system by transforming colors, generating harmonies, checking contrast and color vision, and documenting tokens.
- [Color System and CSS Effect Design Workflow](https://elysiatools.com/en/hubs/design-generate): Extract a palette, build accessible color relationships, generate tokens, and apply CSS effects that stay consistent in real interface states.
