# .invert()

Get the mirrored stop of any color for the opposite surface, with its hue kept.

Get the matching color for the opposite surface with `invert()`: the same hue at the mirrored stop, `_200` to `_850` and back. It takes nothing and returns a `Color` that follows dark mode, so a badge can be dark on a light page and light on a dark one:

```swift
let fill = brand.backgroundTertiary   // _200 in light mode, _700 in dark
let twin = fill.invert()              // _850 in light mode, _350 in dark

HStack {
    Text("Booked").padding(8).foregroundStyle(brand.foregroundPrimary).background(fill)
    Text("Booked").padding(8).foregroundStyle(brand.foregroundPrimary.invert()).background(twin)
}
```

What this draws, with `#00B386`:

| Color                | light mode                             | dark mode                              |
| -------------------- | -------------------------------------- | -------------------------------------- |
| `foregroundPrimary`  | color(display-p3 0.0176 0.1298 0.086)  | #eaf8f2                                |
| `backgroundTertiary` | #9ce2c5                                | color(display-p3 0.1149 0.4143 0.3028) |
| `_50/_1000`          | #eaf8f2                                | color(display-p3 0.0176 0.1298 0.086)  |
| `_850/_350`          | color(display-p3 0.0622 0.2645 0.1889) | color(display-p3 0.3144 0.7788 0.5953) |

Pick a color below to see its mirror in both modes:

A playground applies `invert()` to a palette stop, a token or a hex color. By default it shows `Color.proBlue._600.toColor().invert()`, which gives #579aef in both modes. [Try it on the live page](https://colortokenskit.com/api/invert/).

With the defaults, `proBlue._600` inverts to exactly `proBlue._450`.

## Not colorInvert()

SwiftUI's `colorInvert()` is a view modifier that flips everything a view draws, hue included, so blue turns yellow. `invert()` changes one color and keeps its hue.

## Text on inverted surfaces

For text on the `invertedBackground` tokens, use the `invertedForeground` tokens rather than inverting your text colors. We picked those stops for inverted surfaces, and they aren't all mirrors: `invertedForegroundSecondary` is `_150` in light mode and `_800` in dark, where inverting `foregroundSecondary` gives `_250` and `_850`. [Understanding semantic tokens](https://colortokenskit.com/getting-started/semantic-tokens/index.md) lists every pair.

## How it behaves

A palette color moves to the mirrored stop of its family: `_50` and `_1000` swap, and so do `_500` and `_550`. Inverting twice gives back the stop you started from. Gray mirrors along gray's own stops.

A color off the palette moves to the mirrored point between stops and keeps its hue and chroma, as much as Display P3 can show. The result keeps the color's opacity.

## API

```swift
public extension Color {
    func invert() -> Color
}
```

It takes no parameters and returns a new `Color` at the mirrored stop in each appearance.

## Sources

- [Color+Adjustments.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Adjustments/Color+Adjustments.swift), which defines `invert()`.
- [ColorAdjustment.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Adjustments/ColorAdjustment.swift), which mirrors a color's place on the stops.

## See also

- [Managing dark mode](https://colortokenskit.com/getting-started/dark-mode/index.md): Get dark mode without extra code: tokens switch stops for you, and your own colors can too.
- [.lighten(by:)](https://colortokenskit.com/api/lighten/index.md): Add highlights and lighter steps to any color, landing on an exact palette stop.
- [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.
- [How colors land on exact stops](https://colortokenskit.com/under-the-hood/palette-snapping/index.md): Derived colors land on exact stops, so you know their contrast before you run the app.

---

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