.monochromatic(count:)

Show ordered data, such as cheap to pricey days on a fare calendar, with .monochromatic(). You get count stops of your color's hue, spread evenly from the lightest to the darkest.

let levels = brand.foregroundPrimary.monochromatic()   // _50, _300, _550, _750 and _1000, in both modes

HStack(spacing: 4) {
    ForEach(levels.indices, id: \.self) { index in
        Rectangle()
            .fill(levels[index])
            .frame(width: 24, height: 24)
            .border(brand.outlineSecondary)   // _200 in light mode, _800 in dark
    }
}

Pick any color below and change the count.

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

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

Fewer or more steps#

count sets how many steps you get between _50 and _1000. Three steps give the ends and the middle:

let levels = brand.foregroundPrimary.monochromatic(count: 3)   // _50, _550 and _1000

The same steps in both modes#

monochromatic ignores where your color sits on the ramp, so a token gives the same steps in light and dark mode, and the lightest step always means the same thing. The steps differ in lightness, so the scale still reads in grayscale, which a harmony's colors don't. Color theory compares the two.

The lightest step nearly vanishes on a white page, and the darkest on a black one. Give each cell a border, as in the example above.

How it behaves#

The steps sit at evenly spaced places along the 20 stops. A palette color's steps land on the nearest exact stop, so five steps give _300 and _750 in the middle, not points between stops. Any other color gets evenly spaced lightness at its own hue and chroma, not exact stops.

Your color may not be one of the steps. A count below 1 counts as 1, which gives _50 alone. monochromatic is on Color only.

API#

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

It returns count colors of your color's hue, from _50 to _1000.

Sources#

• ColorTokensKit source: Color+Harmonies.swift, which defines monochromatic, and ColorAdjustment.swift, which places a color at a stop.

See also

• .tints(count:) Lighter steps of any color, one stop apart, to tell apart the parts of one thing.
• .shades(count:) Darker steps of any color, one stop apart, for stacked cards that recede.
• Using tokens in charts Give every chart series equal contrast, plus a second cue for readers who can't tell hues apart.
• Stops: ._50 to ._1000 Twenty fixed colors per theme, lightest to darkest, with the same contrast in every hue.