Color(hex:)

Use a color from your design file in SwiftUI with Color(hex:). It takes a hex string of 3, 6 or 8 digits and returns a fixed sRGB Color, the same in light and dark mode:

let brandColor = Color(hex: "#00B386")   // #RRGGBB
let mint = Color(hex: "#0B8")            // #RGB, each digit doubled: #00BB88
let scrim = Color(hex: "#8000B386")      // #AARRGGBB, alpha first: #00B386 at 50%

For a color that follows dark mode, turn the hex into a whole theme with ProTheme(hex:) and use its tokens.

Hex with transparency#

Eight digits put alpha first, #AARRGGBB. Figma, Sketch and CSS write it last, #RRGGBBAA, so move the last two digits to the front:

// Figma shows #00B38680: the brand color at 50%
let overlay = Color(hex: "#8000B386")

Or keep the six-digit hex and add the transparency in SwiftUI, as in Color(hex: "#00B386").opacity(0.5).

Hex for the other color types#

OKLCHColor and LCHColor read hex the same way, for when you want to read or change the numbers:

OKLCHColor(hex: "#00B386")   // OKLCHColor(l: 0.680, c: 0.139, h: 166.99)
LCHColor(hex: "#00B386")     // LCHColor(l: 64.93, c: 50.9, h: 166)

.toOKLCH() and .toLCH() cover those types.

Colors written as HSL#

Color(h:s:l:a:) reads a color the way HSL writes it: hue in degrees, saturation and lightness from 0 to 1:

let steel = Color(h: 210, s: 0.5, l: 0.5)   // #4080BF

HSL lightness isn't the lightness your eye sees, so two HSL colors at 50% can differ a lot in contrast. Why OKLCH? shows how much.

How it behaves#

Color(hex:) trims a leading # and spaces, then reads 3, 6 or 8 hex digits. Any other length gives a nearly transparent color instead of an error, so check a hex you read from a file or a server.

The color is fixed in sRGB: one value in both modes, and nothing beyond sRGB, because hex can't hold a Display P3 color. .getHexString() writes alpha last, so a translucent color doesn't survive Color(hex: color.getHexString()).

API#

public extension Color {
    init(hex: String)   // "#RGB", "#RRGGBB" or "#AARRGGBB"
    init(h hue: Double, s saturation: Double, l lightness: Double, a opacity: Double = 1)
}

public extension OKLCHColor {
    init(hex: String)
}

public extension LCHColor {
    init(hex: String)
}

Color(hex:) and Color(h:s:l:a:) return a fixed Color in sRGB. The OKLCHColor and LCHColor initializers return that color's numbers in their space.

Sources#

• Color+Initialization.swift, which defines init(hex:) and the HSL initializer.
• OKLCHColor.swift and LCHColor.swift, which read hex through Color(hex:).

See also

• ProTheme Make a theme from a hex, a hue or OKLCH numbers, and every stop and token keeps its contrast.
• .getHexString() Log a color or hand it to a design tool as an sRGB hex string, with alpha when it's translucent.
• .toOKLCH() Read a color's lightness, chroma and hue the way the palette sees them, to compare or adjust it.
• Replacing your app colors Move backgrounds, text, outlines, states, gradients and charts to tokens, one screen at a time.