# .splitComplement(spread:)

Two accents that stand apart from your brand, softer than its opposite, at the same contrast.

Get two accents that stand apart from your color, but less starkly than its [complement](https://colortokenskit.com/api/complement/index.md), with `.splitComplement()`. They sit either side of the opposite [hue](https://colortokenskit.com/reference/glossary/index.md#hue), at your color's lightness.

```swift
let accents = brand.splitComplement()   // your family, then 317° and 17°

HStack {
    Text("Lisbon")
        .font(.headline)
        .foregroundStyle(brand.foregroundPrimary)   // _1000 in light mode, _50 in dark
    Spacer()
    Text("New")
        .padding(8)
        .foregroundStyle(accents[1].foregroundPrimary)
        .background(accents[1].backgroundTertiary)   // _200 in light mode, _700 in dark
    Text("Deal")
        .padding(8)
        .foregroundStyle(accents[2].foregroundPrimary)
        .background(accents[2].backgroundTertiary)
}
.padding()
.background(brand.backgroundPrimary)                 // _50 in light mode, _1000 in dark
```

What this draws, with `#00B386`:

| Color                           | light mode                            | dark mode                              |
| ------------------------------- | ------------------------------------- | -------------------------------------- |
| `backgroundPrimary`             | #eaf8f2                               | color(display-p3 0.0176 0.1298 0.086)  |
| `foregroundPrimary`             | color(display-p3 0.0176 0.1298 0.086) | #eaf8f2                                |
| `hue:316.99.foregroundPrimary`  | #27152e                               | #faf2fd                                |
| `hue:316.99.backgroundTertiary` | #edc7fb                               | #794a8a                                |
| `hue:16.99.foregroundPrimary`   | #321214                               | color(display-p3 0.9978 0.9489 0.9483) |
| `hue:16.99.backgroundTertiary`  | color(display-p3 0.9946 0.772 0.7734) | #954249                                |

Pick your color below and change the spread: a smaller spread moves both accents toward the complement.

A harmony explorer marks each harmony's hues on a strip of every OKLCH hue. By default it shows the splitComplement of `Color.proBlue._400`: #63a7fd, #ec8860, #b8a524. [Try it on the live page](https://colortokenskit.com/api/split-complement/).

## A narrower or wider split

`spread` is how far either side of the complement the two accents sit. At 15°, they're nearly opposite yours:

```swift
let accents = brand._400.splitComplement(spread: .degrees(15))   // 167°, 332° and 2°
```

- 167°: #44ba8c
- 332°: #d786d3
- 2°: #eb82a3

At 60°, you get the same three hues as [`triad`](https://colortokenskit.com/api/triad/index.md).

## How it behaves

The colors come back as yours, then the accent 180° minus `spread` away, then the one 180° plus `spread` away. For `Color.proBlue`, that's blue, coral and yellow.

Each accent is turned with [`rotateHue(by:)`](https://colortokenskit.com/api/rotate-hue/index.md), so a palette color lands on the same stop at its new hue, with the same contrast. On a `ProTheme`, you get whole families at the stop you started from. Gray has no hue, so its split complement is all gray.

## API

```swift
public extension Color {
    func splitComplement(spread: Angle = .degrees(30)) -> [Color]
}

public extension ProTheme {
    func splitComplement(spread: Angle = .degrees(30)) -> [ProTheme]
}
```

| Parameter | Type    | Default | What other values do                                                                                       |
| --------- | ------- | ------- | ---------------------------------------------------------------------------------------------------------- |
| `spread`  | `Angle` | 30°     | How far either side of the complement the accents sit. 0° gives the complement twice; 60° gives the triad. |

It returns three colors or families: yours, then the two accents. It's the same as [`harmony(.splitComplement(spread:))`](https://colortokenskit.com/api/harmony/index.md).

## Sources

- ColorTokensKit source: [Color+Harmonies.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Harmonies/Color+Harmonies.swift) and [ProTheme+Harmonies.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Harmonies/ProTheme+Harmonies.swift), which define `splitComplement`, and [ColorHarmony.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Harmonies/ColorHarmony.swift), which works out its hues.

## See also

- [.complement](https://colortokenskit.com/api/complement/index.md): Give a price or badge an accent that stands apart from your brand, at the same contrast.
- [.triad](https://colortokenskit.com/api/triad/index.md): Secondary and tertiary colors for tags and categories, at the same contrast as your brand.
- [Color theory](https://colortokenskit.com/advanced/color-theory/index.md): Pair stops that always read, and pick secondary hues that match your brand, in both modes.
- [.harmony(\_:)](https://colortokenskit.com/api/harmony/index.md): Build the harmony someone picks at runtime, from a picker or a setting, in one call.

---

From ColorTokensKit, by Penguin Design Ventures: https://colortokenskit.com/api/split-complement/ (updated September 26, 2026).