# .square

Four hues spaced evenly around the wheel for chart series and categories, at one contrast.

Tell four categories apart with `.square`: four [hues](https://colortokenskit.com/reference/glossary/index.md#hue) a quarter of the wheel apart, starting with yours. They're as far apart as four hues can be, and all keep your color's lightness, so they have the same contrast.

```swift
let series = brand.square   // your family, then 257°, 347° and 77°
let names = ["Flights", "Hotels", "Trains", "Tours"]

VStack(alignment: .leading, spacing: 8) {
    ForEach(names.indices, id: \.self) { index in
        HStack {
            Circle()
                .fill(series[index].foregroundTertiary)   // _700 in light mode, _300 in dark
                .frame(width: 12, height: 12)
            Text(names[index])
                .foregroundStyle(brand.foregroundPrimary)
        }
    }
}
```

What this draws, with `#00B386`:

| Color                           | light mode                             | dark mode                              |
| ------------------------------- | -------------------------------------- | -------------------------------------- |
| `foregroundTertiary`            | color(display-p3 0.1149 0.4143 0.3028) | #4cd2a5                                |
| `foregroundPrimary`             | color(display-p3 0.0176 0.1298 0.086)  | #eaf8f2                                |
| `hue:256.99.foregroundTertiary` | #305d9b                                | color(display-p3 0.5965 0.7425 0.9948) |
| `hue:346.99.foregroundTertiary` | #8d436d                                | color(display-p3 0.9516 0.6343 0.8167) |
| `hue:76.99.foregroundTertiary`  | color(display-p3 0.4777 0.3341 0.0294) | #eeb24e                                |

Pick your color below, then set "See as" to a color vision deficiency to see which of the four stay apart.

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

## Four chart series

A chart legend is where `square` fits best: four series, each with its own family, and the `foregroundTertiary` token keeps every mark readable on the page in both modes. [Using tokens in charts](https://colortokenskit.com/advanced/charts/index.md) shows the whole chart, with a label on each series so color isn't the only cue.

## Square or tetrad

`square` is [`tetrad(offset: .degrees(90))`](https://colortokenskit.com/api/tetrad/index.md): the same four hues, in the same order. Reach for `tetrad()` when you want two pairs closer together.

## How it behaves

The colors come back as yours, then 90°, 180° and 270° around the wheel: for `Color.proBlue`, that's blue, magenta, amber and jade. The built-in families sit every 10°, so a built-in family's square is built-in too.

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 square is all gray.

## API

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

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

It takes no parameters and returns four colors or families, a quarter of the wheel apart, yours first. It's the same as [`harmony(.square)`](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 `square`, and [ColorHarmony.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Harmonies/ColorHarmony.swift), which lists each harmony's hues.

## See also

- [Using tokens in charts](https://colortokenskit.com/advanced/charts/index.md): Give every chart series equal contrast, plus a second cue for readers who can't tell hues apart.
- [.tetrad(offset:)](https://colortokenskit.com/api/tetrad/index.md): Four colors in two opposite pairs for tags and categories, all at your color's 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.

---

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