# .tetrad(offset:)

Four colors in two opposite pairs for tags and categories, all at your color's contrast.

Color four categories with `.tetrad()`: your color, the [hue](https://colortokenskit.com/reference/glossary/index.md#hue) `offset` around the wheel, and the opposite of each. The four form two opposite pairs, and all keep your color's lightness, so every tag has the same contrast.

```swift
let tags = ["Beach", "City", "Food", "Nature"]
let families = brand.tetrad()   // your family, then 227°, 347° and 47°

HStack {
    ForEach(tags.indices, id: \.self) { index in
        Text(tags[index])
            .padding(8)
            .foregroundStyle(families[index].foregroundPrimary)   // _1000 in light mode, _50 in dark
            .background(families[index].backgroundTertiary)       // _200 in light mode, _700 in dark
    }
}
```

What this draws, with `#00B386`:

| Color                           | light mode                             | dark mode                              |
| ------------------------------- | -------------------------------------- | -------------------------------------- |
| `foregroundPrimary`             | color(display-p3 0.0176 0.1298 0.086)  | #eaf8f2                                |
| `backgroundTertiary`            | #9ce2c5                                | color(display-p3 0.1149 0.4143 0.3028) |
| `hue:226.99.foregroundPrimary`  | color(display-p3 0.0083 0.1203 0.1753) | #e9f7fe                                |
| `hue:226.99.backgroundTertiary` | #98ddfc                                | color(display-p3 0.0678 0.3901 0.5302) |
| `hue:346.99.foregroundPrimary`  | #2f1222                                | #fff1f8                                |
| `hue:346.99.backgroundTertiary` | color(display-p3 0.9671 0.7712 0.879)  | #8d436d                                |
| `hue:46.99.foregroundPrimary`   | #311405                                | color(display-p3 0.9945 0.9523 0.9287) |
| `hue:46.99.backgroundTertiary`  | color(display-p3 0.9816 0.7877 0.6793) | #91481f                                |

Pick your color below and change the offset to move the second pair around the wheel.

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

## Choosing the offset

`offset` sets where the second pair starts. A small offset gives two close pairs, each opposite the other:

```swift
let families = brand._400.tetrad(offset: .degrees(30))   // 167°, 197°, 347° and 17°
```

- 167°: #44ba8c
- 197°: #13b8be
- 347°: #e383bc
- 17°: #ef8388

An offset of 90° spaces all four evenly, the same hues as [`square`](https://colortokenskit.com/api/square/index.md).

## How it behaves

The colors come back as yours, the hue `offset` away, your complement, then the complement of the second: for `Color.proBlue`, that's blue, purple, amber and lime.

Each color 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. On a `ProTheme`, you get whole families at the stop you started from. Gray has no hue, so its tetrad is all gray. Only hue tells the four apart, so when color carries meaning, add a label, as [using tokens in charts](https://colortokenskit.com/advanced/charts/index.md) shows.

## API

```swift
public extension Color {
    func tetrad(offset: Angle = .degrees(60)) -> [Color]
}

public extension ProTheme {
    func tetrad(offset: Angle = .degrees(60)) -> [ProTheme]
}
```

| Parameter | Type    | Default | What other values do                                                              |
| --------- | ------- | ------- | --------------------------------------------------------------------------------- |
| `offset`  | `Angle` | 60°     | Where the second hue sits; the other two are the complements. 90° gives `square`. |

It returns four colors or families, in the order above. It's the same as [`harmony(.tetrad(offset:))`](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 `tetrad`, and [ColorHarmony.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Harmonies/ColorHarmony.swift), which works out its hues.

## See also

- [.square](https://colortokenskit.com/api/square/index.md): Four hues spaced evenly around the wheel for chart series and categories, at one contrast.
- [.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.
- [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/tetrad/ (updated September 26, 2026).