# .shades(count:)

Darker steps of any color, one stop apart, for stacked cards that recede.

Stack cards so the ones behind recede with `.shades()`: darker versions of your color, one [stop](https://colortokenskit.com/reference/glossary/index.md#stop) apart, nearest first. You pass how many you want and get them back as colors that work in both modes.

```swift
let behind = brand.backgroundSecondary.shades(count: 2)
// _150 and _200 in light mode, _850 and _900 in dark

VStack(spacing: 0) {
    Rectangle()
        .fill(behind[1])
        .frame(height: 6)
        .padding(.horizontal, 24)
    Rectangle()
        .fill(behind[0])
        .frame(height: 6)
        .padding(.horizontal, 12)
    VStack(alignment: .leading, spacing: 4) {
        Text("Lisbon")
            .font(.headline)
            .foregroundStyle(brand.foregroundPrimary)     // _1000 in light mode, _50 in dark
        Text("3 nights from October 12")
            .font(.subheadline)
            .foregroundStyle(brand.foregroundSecondary)   // _800 in light mode, _200 in dark
    }
    .padding()
    .frame(maxWidth: .infinity, alignment: .leading)
    .background(brand.backgroundSecondary)                // _100 in light mode, _800 in dark
}
.padding()
.background(brand.backgroundPrimary)                      // _50 in light mode, _1000 in dark
```

What this draws, with `#00B386`:

| Color                 | light mode                             | dark mode                              |
| --------------------- | -------------------------------------- | -------------------------------------- |
| `backgroundPrimary`   | #eaf8f2                                | color(display-p3 0.0176 0.1298 0.086)  |
| `_200/_900`           | #9ce2c5                                | color(display-p3 0.0474 0.2188 0.1544) |
| `_150/_850`           | #b9ead5                                | color(display-p3 0.0622 0.2645 0.1889) |
| `backgroundSecondary` | #d2f1e3                                | color(display-p3 0.0797 0.3134 0.2262) |
| `foregroundPrimary`   | color(display-p3 0.0176 0.1298 0.086)  | #eaf8f2                                |
| `foregroundSecondary` | color(display-p3 0.0797 0.3134 0.2262) | #9ce2c5                                |

Pick any color below and change the counts. Near the dark end of the ramp, shades run out: they stop at `_1000`.

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

## Darker in both modes

On a token, shades are darker in both modes: louder on a white page, quieter on a black one. For steps that are louder in both modes, use [`strengthen(by:)`](https://colortokenskit.com/api/strengthen/index.md) instead:

```swift
let louder = (1...2).map { brand.foregroundTertiary.strengthen(by: $0) }
// _750 and _800 in light mode, _250 and _200 in dark
```

## How it behaves

`shades(count: 3)` is [`darken(by: 1)`](https://colortokenskit.com/api/darken/index.md), `darken(by: 2)` and `darken(by: 3)`. A palette color steps to exact stops of its own hue, so its shades keep its hue and chroma. At `_1000` there's nothing darker, so the shades of `_950` are `_1000` three times.

Any other color moves by the same visual steps, keeping its hue and as much [chroma](https://colortokenskit.com/reference/glossary/index.md#chroma) as Display P3 can show. `shades` is on `Color` only; for a family's stops, read them directly, such as `_700` and `_750`.

## API

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

| Parameter | Type  | Default | What other values do                                      |
| --------- | ----- | ------- | --------------------------------------------------------- |
| `count`   | `Int` | 3       | How many darker versions. 0 or less gives an empty array. |

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

## Sources

- ColorTokensKit source: [Color+Harmonies.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Harmonies/Color+Harmonies.swift), which defines `shades`, and [ColorAdjustment.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Adjustments/ColorAdjustment.swift), which moves a color along its stops.

## 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.
- [.monochromatic(count:)](https://colortokenskit.com/api/monochromatic/index.md): Show ordered data, like cheap to pricey days, in evenly spaced steps of one hue.
- [.darken(by:)](https://colortokenskit.com/api/darken/index.md): Make hover and pressed fills from any color, an exact stop darker in both modes.
- [.strengthen(by:)](https://colortokenskit.com/api/strengthen/index.md): Make any token stand out more: darker in light mode, lighter in dark mode.

---

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