# Color(hex:)

Turn a hex value from your design file into a SwiftUI color, with or without transparency.

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:

```swift
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%
```

- brandColor: #00b386
- mint: #00bb88

For a color that follows dark mode, turn the hex into a whole theme with [`ProTheme(hex:)`](https://colortokenskit.com/api/protheme/index.md#from-a-hex-color) 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:

```swift
// 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:

```swift
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()`](https://colortokenskit.com/api/to-oklch/index.md) and [`.toLCH()`](https://colortokenskit.com/api/to-lch/index.md) 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:

```swift
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?](https://colortokenskit.com/under-the-hood/why-oklch/index.md) 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()`](https://colortokenskit.com/api/get-hex-string/index.md) writes alpha last, so a translucent color doesn't survive `Color(hex: color.getHexString())`.

## API

```swift
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)
}
```

| Parameter | Type     | What it takes                                                            |
| --------- | -------- | ------------------------------------------------------------------------ |
| `hex`     | `String` | 3, 6 or 8 hex digits, with or without `#`. Eight digits put alpha first. |
| `h`       | `Double` | Hue in degrees, 0 to 360.                                                |
| `s`, `l`  | `Double` | HSL saturation and lightness, 0 to 1.                                    |
| `a`       | `Double` | Opacity, 0 to 1. Defaults to `1`.                                        |

`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](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/Platform/SwiftUI/Color+Initialization.swift), which defines `init(hex:)` and the HSL initializer.
- [OKLCHColor.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/ColorSpace/OKLCH/OKLCHColor.swift) and [LCHColor.swift](https://github.com/metasidd/ColorTokensKit-Swift/blob/main/Sources/ColorTokensKit/ColorSpace/LCH/LCHColor.swift), which read hex through `Color(hex:)`.

## See also

- [ProTheme](https://colortokenskit.com/api/protheme/index.md): Make a theme from a hex, a hue or OKLCH numbers, and every stop and token keeps its contrast.
- [.getHexString()](https://colortokenskit.com/api/get-hex-string/index.md): Log a color or hand it to a design tool as an sRGB hex string, with alpha when it's translucent.
- [.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.
- [Replacing your app colors](https://colortokenskit.com/getting-started/replacing-colors/index.md): Move backgrounds, text, outlines, states, gradients and charts to tokens, one screen at a time.

---

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