# .analogous(count:spread:)

Close neighbors of your color for banners, illustrations and gradients, at matching contrast.

Fill a banner or an illustration with close neighbors of your color with `.analogous()`. You get `count` [hues](https://colortokenskit.com/reference/glossary/index.md#hue) `spread` apart, centered on yours, all at your color's lightness.

```swift
Rectangle()
    .fill(brand._400.analogous().proGradient(from: .leading, to: .trailing))   // 137°, 167° and 197°
    .frame(height: 64)
```

What this draws, with `#00B386`:

| Color             | light mode                             | dark mode                              |
| ----------------- | -------------------------------------- | -------------------------------------- |
| `hue:136.99._400` | #6db64a                                | #6db64a                                |
| `_400`            | color(display-p3 0.2666 0.7286 0.5502) | color(display-p3 0.2666 0.7286 0.5502) |
| `hue:196.99._400` | color(display-p3 0.0742 0.7206 0.7462) | color(display-p3 0.0742 0.7206 0.7462) |

It draws a linear gradient from `hue:136.99._400` to `_400` to `hue:196.99._400`, with `.vivid` and `.smooth`.

Pick your color below and change the count and spread. With the defaults, you get three hues 30° apart.

A harmony explorer marks each harmony's hues on a strip of every OKLCH hue. By default it shows the analogous of `Color.proBlue._400`: #25b2e0, #63a7fd, #979afd. [Try it on the live page](https://colortokenskit.com/api/analogous/).

## More neighbors, closer together

Raise `count` for more colors and lower `spread` to keep them close. Five hues 15° apart stay within 30° of yours either way:

```swift
let neighbors = brand._400.analogous(count: 5, spread: .degrees(15))
```

- 137°: #7eb459
- 152°: #62b872
- 167°: #44ba8c
- 182°: #22baa6
- 197°: #13b8be

## Hues around the whole wheel

A spread of 360° divided by `count` spaces the colors evenly around the wheel, with yours in the middle of the list. That gives five chart series as far apart as five hues can be:

```swift
let series = brand.analogous(count: 5, spread: .degrees(72))   // families at 23°, 95°, 167°, 239° and 311°
```

- 23°: #ef847e
- 95°: #bfa320
- 167°: #44ba8c
- 239°: #4dabf5
- 311°: #c18dee

[Using tokens in charts](https://colortokenskit.com/advanced/charts/index.md) shows which token each series takes.

## How it behaves

The colors come back from the most negative offset to the most positive, so yours sits in the middle: `Color.proBlue.analogous()` is cerulean, blue and iris. With an even `count` there is no middle, so your color isn't one of them: `analogous(count: 2)` gives the hues 15° either side.

A `count` below 1 counts as 1, which gives your color alone. Each color is turned with [`rotateHue(by:)`](https://colortokenskit.com/api/rotate-hue/index.md), so a palette color lands on the same stop at its new hue. On a `ProTheme`, you get whole families at the stop you started from. Gray has no hue, so its neighbors are all gray.

## API

```swift
public extension Color {
    func analogous(count: Int = 3, spread: Angle = .degrees(30)) -> [Color]
}

public extension ProTheme {
    func analogous(count: Int = 3, spread: Angle = .degrees(30)) -> [ProTheme]
}
```

| Parameter | Type    | Default | What other values do                                                                   |
| --------- | ------- | ------- | -------------------------------------------------------------------------------------- |
| `count`   | `Int`   | 3       | How many colors. With an even count, yours isn't one of them. Below 1 counts as 1.     |
| `spread`  | `Angle` | 30°     | The gap between neighbors. 360° divided by `count` spaces them around the whole wheel. |

It returns `count` colors or families, centered on yours. It's the same as [`harmony(.analogous(count:spread:))`](https://colortokenskit.com/api/harmony/index.md).

## Sources

- ColorTokensKit source: [Color+Harmonies.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Harmonies/Color+Harmonies.swift) and [ProTheme+Harmonies.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Harmonies/ProTheme+Harmonies.swift), which define `analogous`, and [ColorHarmony.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Harmonies/ColorHarmony.swift), which works out its hues.

## See also

- [Color theory](https://colortokenskit.com/advanced/color-theory/index.md): Pair stops that always read, and pick secondary hues that match your brand, in both modes.
- [.proGradient()](https://colortokenskit.com/api/pro-gradient/index.md): Fill cards and buttons with gradients that stay vivid end to end, in light and dark mode.
- [.triad](https://colortokenskit.com/api/triad/index.md): Secondary and tertiary colors for tags and categories, at the same contrast as your brand.
- [Gradient theory](https://colortokenskit.com/advanced/gradient-theory/index.md): Add depth with gradients that stay vivid, from a single color or a recipe, in both modes.

---

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