.splitComplement(spread:)

Get two accents that stand apart from your color, but less starkly than its complement, with .splitComplement(). They sit either side of the opposite hue, at your color's lightness.

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

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

let color = Color.proBlue._400.toColor()
color.splitComplement()

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:

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

At 60°, you get the same three hues as triad.

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:), 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#

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

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

It returns three colors or families: yours, then the two accents. It's the same as harmony(.splitComplement(spread:)).

Sources#

• ColorTokensKit source: Color+Harmonies.swift and ProTheme+Harmonies.swift, which define splitComplement, and ColorHarmony.swift, which works out its hues.

See also

• .complement Give a price or badge an accent that stands apart from your brand, at the same contrast.
• .triad Secondary and tertiary colors for tags and categories, at the same contrast as your brand.
• Color theory Pair stops that always read, and pick secondary hues that match your brand, in both modes.
• .harmony(_:) Build the harmony someone picks at runtime, from a picker or a setting, in one call.