# .toColor()

Turn a stop or a color value back into a SwiftUI Color you can draw with.

Draw with a stop or a color value by turning it back into a SwiftUI `Color` with `toColor()`. It's on `ProTheme`, `OKLCHColor`, `LCHColor` and `OKLabColor`, takes nothing, and returns one fixed, opaque `Color`:

```swift
let tint = OKLCHColor(l: 0.68, c: 0.14, h: 167)

HStack {
    Circle().fill(tint.toColor()).frame(width: 48, height: 48)                 // #00B386
    Circle().fill(Color.proBlue._600.toColor()).frame(width: 48, height: 48)   // one stop
}
```

What this draws:

| Color       | light mode | dark mode |
| ----------- | ---------- | --------- |
| `#00B386`   | #00b386    | #00b386   |
| `blue._600` | #2c77bd    | #2c77bd   |

Tokens are already `Color` values that follow dark mode, so they don't need it. Use `toColor()` for a single stop, as in `Color.proBlue._600.toColor()`, or a value you computed.

## Transparency

`toColor()` always gives an opaque color. Add the transparency back with `opacity(_:)`:

```swift
let tint = OKLCHColor(l: 0.68, c: 0.14, h: 167, alpha: 0.5)
tint.toColor()                               // #00B386, opaque
tint.toColor().opacity(Double(tint.alpha))   // #00B386 at 50%
```

## One color in both modes

The result is the same in light and dark mode. For a color that switches, use a token, or pair two values with [`Color(light:dark:)`](https://colortokenskit.com/api/light-dark/index.md).

## Types without toColor()

- `RGBColor`: use SwiftUI's `Color(red:green:blue:opacity:)`, as [`.toRGB()`](https://colortokenskit.com/api/to-rgb/index.md) shows.
- `LABColor` and `XYZColor`: go through another type, as in `lab.toLCH().toColor()`.

For any other pair of types, go through RGB, as in `lab.toRGB().toOKLCH()`.

## How it behaves

The color keeps channels past 0 and 1, so a Display P3 stop comes out as the same Display P3 color. `getColor(l:c:h:alpha:)` on `OKLCHColor` and `LCHColor` returns a `Color` directly, also opaque.

## API

```swift
public extension ProTheme   { func toColor() -> Color }
public extension OKLCHColor { func toColor() -> Color }
public extension LCHColor   { func toColor() -> Color }
public extension OKLabColor { func toColor() -> Color }
```

It takes no parameters and returns an opaque `Color` in extended sRGB, the same in both modes.

## Sources

- The [ColorSpace](https://github.com/metasidd/ColorTokensKit-Swift/tree/main/Sources/ColorTokensKit/ColorSpace) folder, where each type's `Conversions` file defines `toColor()`.
- [ProTheme.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/ProTheme/ProTheme.swift), which defines `toColor()` on a theme or stop.

## See also

- [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.
- [Color(light:dark:)](https://colortokenskit.com/api/light-dark/index.md): Make any color switch between light and dark mode, the way every token does.
- [.toOKLCH()](https://colortokenskit.com/api/to-oklch/index.md): Read a color's lightness, chroma and hue the way the palette sees them, to compare or adjust it.
- [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.

---

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