.tints(count:)

Tell apart the parts of one thing, such as the legs of a trip, with .tints(): lighter versions of your color, one stop apart, nearest first. You pass how many you want and get them back as colors that work in both modes.

let legs = [brand.foregroundTertiary] + brand.foregroundTertiary.tints(count: 2)
// _700, _650 and _600 in light mode; _300, _250 and _200 in dark

HStack(spacing: 2) {
    ForEach(legs.indices, id: \.self) { index in
        Rectangle()
            .fill(legs[index])
            .frame(width: 80, height: 12)
    }
}

Pick any color below and change the counts. Near the light end of the ramp, tints run out: they stop at _50.

let color = Color.proGreen._400.toColor()

color.monochromatic()
color.tints()
color.shades()

Lighter in both modes#

On a token, tints are lighter in both modes: quieter on a white page, louder on a black one, as the legs above show. For steps that are quieter in both modes, use soften(by:) instead:

let quieter = (1...2).map { brand.foregroundTertiary.soften(by: $0) }
// _650 and _600 in light mode, _350 and _400 in dark

How it behaves#

tints(count: 3) is lighten(by: 1), lighten(by: 2) and lighten(by: 3). A palette color steps to exact stops of its own hue, so its tints keep its hue and chroma. At _50 there's nothing lighter, so the tints of _100 are _50 three times, and so are the light-mode tints of backgroundSecondary. Pick a color from the middle of the ramp when you need every step to differ.

Any other color moves by the same visual steps, keeping its hue and as much chroma as Display P3 can show. tints is on Color only; for a family's stops, read them directly, such as _300 and _250.

API#

public extension Color {
    func tints(count: Int = 3) -> [Color]
}

It returns count colors, each one stop lighter than the last, starting one stop above yours. Your color isn't in the array.

Sources#

• ColorTokensKit source: Color+Harmonies.swift, which defines tints, and ColorAdjustment.swift, which moves a color along its stops.

See also

• .shades(count:) Darker steps of any color, one stop apart, for stacked cards that recede.
• .monochromatic(count:) Show ordered data, like cheap to pricey days, in evenly spaced steps of one hue.
• .lighten(by:) Add highlights and lighter steps to any color, landing on an exact palette stop.
• .soften(by:) Make quieter text and fills from any token: lighter in light mode, darker in dark mode.