# .tints(count:)

Lighter steps of any color, one stop apart, to tell apart the parts of one thing.

Tell apart the parts of one thing, such as the legs of a trip, with `.tints()`: lighter 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 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)
    }
}
```

What this draws, with `#00B386`:

| Color       | light mode                             | dark mode |
| ----------- | -------------------------------------- | --------- |
| `_700/_300` | color(display-p3 0.1149 0.4143 0.3028) | #4cd2a5   |
| `_650/_250` | color(display-p3 0.1368 0.4655 0.3425) | #79dab5   |
| `_600/_200` | color(display-p3 0.1547 0.5182 0.3824) | #9ce2c5   |

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

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

## 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:)`](https://colortokenskit.com/api/soften/index.md) instead:

```swift
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)`](https://colortokenskit.com/api/lighten/index.md), `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](https://colortokenskit.com/reference/glossary/index.md#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

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

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

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](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Harmonies/Color+Harmonies.swift), which defines `tints`, 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

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

---

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