# .complement

Give a price or badge an accent that stands apart from your brand, at the same contrast.

Give the one thing that has to catch the eye, such as a price, an accent that stands apart from your brand with `.complement`. It turns your color or family halfway around the [hue](https://colortokenskit.com/reference/glossary/index.md#hue) wheel and keeps its lightness, so the accent has the same contrast.

```swift
let accent = brand.complement   // your brand's family, turned 180°

HStack(spacing: 16) {
    VStack(alignment: .leading, spacing: 4) {
        Text("Lisbon")
            .font(.headline)
            .foregroundStyle(brand.foregroundPrimary)
        Text("3 nights from October 12")
            .font(.subheadline)
            .foregroundStyle(brand.foregroundSecondary)
    }
    Text("€480")
        .padding(8)
        .foregroundStyle(accent.foregroundPrimary)   // _1000 in light mode, _50 in dark
        .background(accent.backgroundTertiary)       // _200 in light mode, _700 in dark
}
.padding()
.frame(maxWidth: .infinity, alignment: .leading)
.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                               |
| `foregroundSecondary`           | color(display-p3 0.0797 0.3134 0.2262) | #9ce2c5                               |
| `hue:346.99.foregroundPrimary`  | #2f1222                                | #fff1f8                               |
| `hue:346.99.backgroundTertiary` | color(display-p3 0.9671 0.7712 0.879)  | #8d436d                               |

Pick any color below, then set "See as" to "Lightness only": your color and its complement turn the same gray.

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

## An accent from any token

The `Color` version works on any color, tokens included, and keeps the token's job. The complement of a text token is a text color for both modes:

```swift
Text("Sold out")
    .foregroundStyle(brand.foregroundTertiary.complement)   // _700 in light mode, _300 in dark, at 347°
```

What this draws:

| Color                           | light mode | dark mode                              |
| ------------------------------- | ---------- | -------------------------------------- |
| `hue:346.99.foregroundTertiary` | #8d436d    | color(display-p3 0.9516 0.6343 0.8167) |

## Complements of the built-in families

The built-in families sit every 10° around the wheel, so the complement of one is another. `Color.proBlue` sits at 250°, and its complement is `Color.proAmber`, at 70°:

```swift
let accent = Color.proBlue.complement   // Color.proAmber
```

- proBlue.\_400: #63a7fd
- proAmber.\_400: #da9630

## How it behaves

`complement` turns the hue with [`rotateHue(by: .degrees(180))`](https://colortokenskit.com/api/rotate-hue/index.md). A palette color lands on the same stop of the opposite hue, so its contrast doesn't change. Any other color keeps its lightness and as much [chroma](https://colortokenskit.com/reference/glossary/index.md#chroma) as Display P3 can show at the new hue.

On a `ProTheme`, you get a whole family at the stop you started from, so every token works on it. Gray has no hue, so its complement is gray.

`complement` returns only the turned color. [`harmony(.complement)`](https://colortokenskit.com/api/harmony/index.md) returns both, yours first. Only hue tells the two apart, so they match in grayscale; when color carries meaning, add a label. [Color theory](https://colortokenskit.com/advanced/color-theory/index.md#other-hues-that-go-with-yours) covers when an accent this strong is the right pick.

## API

```swift
public extension Color {
    var complement: Color { get }
}

public extension ProTheme {
    var complement: ProTheme { get }
}
```

It takes no parameters. On `Color`, it returns the opposite hue at the same lightness, in both light and dark mode. On `ProTheme`, it returns the family on the opposite side of the wheel, at this color's stop.

## 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 `complement`, and [ColorHarmony.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Harmonies/ColorHarmony.swift), which lists each harmony's hues.

## See also

- [.splitComplement(spread:)](https://colortokenskit.com/api/split-complement/index.md): Two accents that stand apart from your brand, softer than its opposite, 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.
- [.rotateHue(by:)](https://colortokenskit.com/api/rotate-hue/index.md): Make an accent or a whole second theme from your brand color, at the same lightness.
- [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.

---

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