# .strengthen(by:)

Make any token stand out more: darker in light mode, lighter in dark mode.

Make a token stand out more with `strengthen(by:)`. It moves the color away from the page by whole stops, darker in light mode and lighter in dark mode, and returns a `Color`:

```swift
VStack(spacing: 0) {
    Text("Lisbon")
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(12)
        .background(brand.backgroundSecondary)                // hovered: _100 and _800
    Text("Kyoto")
        .frame(maxWidth: .infinity, alignment: .leading)
        .padding(12)
        .background(brand.backgroundSecondary.strengthen())   // selected: _150 and _750
}
.foregroundStyle(brand.foregroundPrimary)
```

What this draws, with `#00B386`:

| Color                 | light mode                            | dark mode                              |
| --------------------- | ------------------------------------- | -------------------------------------- |
| `foregroundPrimary`   | color(display-p3 0.0176 0.1298 0.086) | #eaf8f2                                |
| `backgroundSecondary` | #d2f1e3                               | color(display-p3 0.0797 0.3134 0.2262) |
| `_150/_750`           | #b9ead5                               | color(display-p3 0.0977 0.3637 0.2645) |

The selected row sits one stop further from the page than the hovered one, in both modes. Pick a color and a number of stops below:

A playground applies `strengthen()` to a palette stop, a token or a hex color. By default it shows `Color.proBlue._600.toColor().strengthen()`, which gives #3a69a5 in light mode and #4882ca in dark mode. [Try it on the live page](https://colortokenskit.com/api/strengthen/).

With the defaults, `proBlue._600` strengthens to `proBlue._650` in light mode and `proBlue._550` in dark.

## Stronger outlines

Two stops away from the page, `outlineTertiary` lands on the stops of `outlineSecondary`, so a decorative hairline can step up to a stronger line, say around the section in view:

```swift
Text("Lisbon")
    .padding(12)
    .border(brand.outlineTertiary.strengthen(by: 2))   // _200 in light mode, _800 in dark
```

What this draws, with `#00B386`:

| Color               | light mode                            | dark mode                              |
| ------------------- | ------------------------------------- | -------------------------------------- |
| `foregroundPrimary` | color(display-p3 0.0176 0.1298 0.086) | #eaf8f2                                |
| `_200/_800`         | #9ce2c5                               | color(display-p3 0.0797 0.3134 0.2262) |

A control's own edge, like a text field's, takes `outlinePrimary`, which already reaches 3:1 on every background.

## Fills under text

A strengthened fill moves toward the text on it. In dark mode it gets lighter, closer to a light label, so for a pressed fill use [`darken(by:)`](https://colortokenskit.com/api/darken/index.md), which keeps the label's contrast in both modes.

## How it behaves

The direction comes from the appearance, not from what's behind the color, so on an inverted surface strengthening goes the wrong way. On watchOS, which always draws dark, it always goes lighter.

A palette color lands on an exact stop of its family, and stops at `_50` or `_1000`. A color off the palette moves by the same step in lightness and keeps its hue. The result keeps the color's opacity.

## API

```swift
public extension Color {
    func strengthen(by stops: Int = 1) -> Color
}
```

| Parameter | Type  | Default | What other values do                                                           |
| --------- | ----- | ------- | ------------------------------------------------------------------------------ |
| `stops`   | `Int` | `1`     | A negative value moves toward the page, so `strengthen(by: -1)` is `soften()`. |

It returns a new `Color` that resolves in each appearance: darker in light mode and lighter in dark mode.

## Sources

- [Color+Adjustments.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Adjustments/Color+Adjustments.swift), which defines `strengthen(by:)` as `soften(by: -stops)`.
- [ColorAdjustment.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Adjustments/ColorAdjustment.swift), which moves a color along the stops.

## See also

- [.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.
- [Building for interaction states](https://colortokenskit.com/getting-started/interaction-states/index.md): Give buttons and rows hover, pressed, selected and disabled colors that stay readable in both modes.
- [Understanding semantic tokens](https://colortokenskit.com/getting-started/semantic-tokens/index.md): Learn the 20 tokens by the job each one does, and get dark mode and passing contrast with them.
- [.lighten(by:)](https://colortokenskit.com/api/lighten/index.md): Add highlights and lighter steps to any color, landing on an exact palette stop.

---

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