.square

Tell four categories apart with .square: four hues 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.

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)
        }
    }
}

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

let color = Color.proBlue._400.toColor()
color.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 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)): 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:), 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#

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).

Sources#

• ColorTokensKit source: Color+Harmonies.swift and ProTheme+Harmonies.swift, which define square, and ColorHarmony.swift, which lists each harmony's hues.

See also

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