.toColor()

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:

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
}

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(_:):

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:).

Types without toColor()#

• RGBColor: use SwiftUI's Color(red:green:blue:opacity:), as .toRGB() 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#

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 folder, where each type's Conversions file defines toColor().
• ProTheme.swift, which defines toColor() on a theme or stop.

See also

• Stops: ._50 to ._1000 Twenty fixed colors per theme, lightest to darkest, with the same contrast in every hue.
• Color(light:dark:) Make any color switch between light and dark mode, the way every token does.
• .toOKLCH() Read a color's lightness, chroma and hue the way the palette sees them, to compare or adjust it.
• Understanding semantic tokens Learn the 20 tokens by the job each one does, and get dark mode and passing contrast with them.