# .monochromatic(count:)

Show ordered data, like cheap to pricey days, in evenly spaced steps of one hue.

Show ordered data, such as cheap to pricey days on a fare calendar, with `.monochromatic()`. You get `count` [stops](https://colortokenskit.com/reference/glossary/index.md#stop) of your color's hue, spread evenly from the lightest to the darkest.

```swift
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
    }
}
```

What this draws, with `#00B386`:

| Color              | light mode                             | dark mode                              |
| ------------------ | -------------------------------------- | -------------------------------------- |
| `_50`              | #eaf8f2                                | #eaf8f2                                |
| `outlineSecondary` | #9ce2c5                                | color(display-p3 0.0797 0.3134 0.2262) |
| `_300`             | #4cd2a5                                | #4cd2a5                                |
| `_550`             | color(display-p3 0.1717 0.5709 0.4222) | color(display-p3 0.1717 0.5709 0.4222) |
| `_750`             | color(display-p3 0.0977 0.3637 0.2645) | color(display-p3 0.0977 0.3637 0.2645) |
| `_1000`            | color(display-p3 0.0176 0.1298 0.086)  | color(display-p3 0.0176 0.1298 0.086)  |

Pick any color below and change the count.

The live page shows lightness sets for any color. For `Color.proGreen._400`, `monochromatic()` gives #eff7ef, #8acd8f, #4b9053, #2e5c33, #0c210f; `tints()` gives #71c47a, #8acd8f, #a1d6a4; `shades()` gives #5aab63, #539d5b, #4b9053. [Try it on the live page](https://colortokenskit.com/api/monochromatic/).

## Fewer or more steps

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

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

- \_50: #edf8f2
- \_550: #2c926c
- \_1000: #042116

## 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](https://colortokenskit.com/advanced/color-theory/index.md#lighter-and-darker-steps-of-one-hue) 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](https://colortokenskit.com/reference/glossary/index.md#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

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

| Parameter | Type  | Default | What other values do                                           |
| --------- | ----- | ------- | -------------------------------------------------------------- |
| `count`   | `Int` | 5       | How many steps, from lightest to darkest. Below 1 counts as 1. |

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

## Sources

- ColorTokensKit source: [Color+Harmonies.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Harmonies/Color+Harmonies.swift), which defines `monochromatic`, and [ColorAdjustment.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Adjustments/ColorAdjustment.swift), which places a color at a stop.

## See also

- [.tints(count:)](https://colortokenskit.com/api/tints/index.md): Lighter steps of any color, one stop apart, to tell apart the parts of one thing.
- [.shades(count:)](https://colortokenskit.com/api/shades/index.md): Darker steps of any color, one stop apart, for stacked cards that recede.
- [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.
- [Stops: .\_50 to .\_1000](https://colortokenskit.com/api/stops/index.md): Twenty fixed colors per theme, lightest to darkest, with the same contrast in every hue.

---

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