# .triad

Secondary and tertiary colors for tags and categories, at the same contrast as your brand.

Use secondary and tertiary colors across your interface with `.triad`: your color and the two [hues](https://colortokenskit.com/reference/glossary/index.md#hue) a third of the way around the wheel. All three keep your color's lightness, so every tag has the same contrast.

```swift
let secondary = brand.triad[1]   // your brand's family, turned 120°
let tertiary = brand.triad[2]    // and turned 240°

HStack {
    Text("Beach")
        .padding(8)
        .foregroundStyle(brand.foregroundPrimary)   // _1000 in light mode, _50 in dark
        .background(brand.backgroundTertiary)       // _200 in light mode, _700 in dark
    Text("City")
        .padding(8)
        .foregroundStyle(secondary.foregroundPrimary)
        .background(secondary.backgroundTertiary)
    Text("Food")
        .padding(8)
        .foregroundStyle(tertiary.foregroundPrimary)
        .background(tertiary.backgroundTertiary)
}
```

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:286.99.foregroundPrimary`  | #1c1834                                | color(display-p3 0.9574 0.9567 0.9992) |
| `hue:286.99.backgroundTertiary` | color(display-p3 0.8192 0.8118 0.9966) | #5c539a                                |
| `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, then set "See as" to "Lightness only": all three turn one gray.

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

## Naming your secondary and tertiary colors

Name the two new families once, next to your brand, and every token works on them in both modes:

```swift
extension Color {
    static let brand = ProTheme(hex: "#00B386")
    static let brandSecondary = brand.triad[1]
    static let brandTertiary = brand.triad[2]
}
```

## Three backgrounds from one token

The `Color` version keeps a token's job, so the triad of a background is three backgrounds. They share its lightness, so one text color reads on all three:

```swift
let tags = ["Beach", "City", "Food"]
let backgrounds = brand.backgroundSecondary.triad
// _100 in light mode, _800 in dark, at 167°, 287° and 47°

HStack {
    ForEach(tags.indices, id: \.self) { index in
        Text(tags[index])
            .padding()
            .foregroundStyle(brand.foregroundPrimary)
            .background(backgrounds[index])
    }
}
```

What this draws, with `#00B386`:

| Color                            | light mode                             | dark mode                              |
| -------------------------------- | -------------------------------------- | -------------------------------------- |
| `foregroundPrimary`              | color(display-p3 0.0176 0.1298 0.086)  | #eaf8f2                                |
| `backgroundSecondary`            | #d2f1e3                                | color(display-p3 0.0797 0.3134 0.2262) |
| `hue:286.99.backgroundSecondary` | color(display-p3 0.9118 0.9098 0.9984) | #453e76                                |
| `hue:46.99.backgroundSecondary`  | color(display-p3 0.9903 0.8996 0.8489) | #6f3616                                |

## How it behaves

The colors come back in a fixed order: yours, then 120° and 240° around the wheel. Each 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. The built-in families sit every 10°, so a built-in family's triad is built-in too: `Color.proBlue.triad` is blue, ruby and lime.

On a `ProTheme`, you get whole families at the stop you started from. Gray has no hue, so its triad is three grays.

Only hue tells the three apart, so they match in grayscale, and some people with a color vision deficiency can't tell every pair apart. When color carries meaning, add a label or an icon, as [using tokens in charts](https://colortokenskit.com/advanced/charts/index.md) shows.

## API

```swift
public extension Color {
    var triad: [Color] { get }
}

public extension ProTheme {
    var triad: [ProTheme] { get }
}
```

It takes no parameters and returns three colors or families: yours, then the hues 120° and 240° away. It's the same as [`harmony(.triad)`](https://colortokenskit.com/api/harmony/index.md). [Color theory](https://colortokenskit.com/advanced/color-theory/index.md#secondary-and-tertiary-colors) shows the triad across a whole screen.

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

## See also

- [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.
- [.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.
- [.square](https://colortokenskit.com/api/square/index.md): Four hues spaced evenly around the wheel for chart series and categories, at one contrast.
- [.harmony(\_:)](https://colortokenskit.com/api/harmony/index.md): Build the harmony someone picks at runtime, from a picker or a setting, in one call.
- [Setting up themes](https://colortokenskit.com/advanced/themes/index.md): Recolor a view, a screen or your whole app from one value, with the same contrast in every hue.

---

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