Introduction

SwiftUI's Color type does not accept a hex string out of the box, so the usual solution is a small extension that converts hex into normalized red, green, blue, and alpha values. That works well for design-system colors, but you should still be clear about which hex formats you support and when an asset catalog color is a better choice.

A Practical Color Extension

Here is a simple extension that supports #RRGGBB and #RRGGBBAA:

1import SwiftUI
2
3extension Color {
4    init(hex: String) {
5        let cleaned = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
6        var value: UInt64 = 0
7        Scanner(string: cleaned).scanHexInt64(&value)
8
9        let red, green, blue, alpha: Double
10
11        switch cleaned.count {
12        case 6:
13            red = Double((value >> 16) & 0xFF) / 255
14            green = Double((value >> 8) & 0xFF) / 255
15            blue = Double(value & 0xFF) / 255
16            alpha = 1.0
17        case 8:
18            red = Double((value >> 24) & 0xFF) / 255
19            green = Double((value >> 16) & 0xFF) / 255
20            blue = Double((value >> 8) & 0xFF) / 255
21            alpha = Double(value & 0xFF) / 255
22        default:
23            red = 0
24            green = 0
25            blue = 0
26            alpha = 1.0
27        }
28
29        self.init(.sRGB, red: red, green: green, blue: blue, opacity: alpha)
30    }
31}

Usage:

1struct ContentView: View {
2    var body: some View {
3        Text("Hello")
4            .padding()
5            .background(Color(hex: "#2D6CDF"))
6            .foregroundStyle(.white)
7    }
8}

That is enough for most apps that receive design colors as hex values.

Be Explicit About the Hex Format

The most common source of bugs is disagreement about the byte order. Some teams mean:

• 'RRGGBBAA'

while others mean:

• 'AARRGGBB'

The extension above uses RRGGBBAA for 8-digit values. That needs to be documented clearly. Otherwise a designer hands you 80FF0000, you parse it the wrong way, and the app shows the wrong color with the wrong opacity.

If your team uses a different convention, change the bit shifts and keep the API documentation explicit.

Integer-Based Initializers Also Work Well

If you prefer not to parse strings repeatedly, you can accept an integer literal:

1import SwiftUI
2
3extension Color {
4    init(hex: UInt32) {
5        let red = Double((hex >> 16) & 0xFF) / 255
6        let green = Double((hex >> 8) & 0xFF) / 255
7        let blue = Double(hex & 0xFF) / 255
8
9        self.init(.sRGB, red: red, green: green, blue: blue, opacity: 1.0)
10    }
11}

Usage:

let accent = Color(hex: 0x2D6CDF)

This is sometimes cleaner in code, especially when the values are constants and do not come from JSON or design exports.

Prefer Asset Catalog Colors for Adaptive UI

Hex parsing is convenient, but it is not always the best architectural choice. If a color should adapt to:

• light mode
• dark mode
• high contrast variants
• platform-specific appearance settings

then an asset catalog color is often better than a hard-coded hex literal.

Example:

Color("BrandPrimary")

That gives designers and the app theme system more flexibility than scattering hex values through views.

Use Hex for Constants, Not for Dynamic Theme Sprawl

Hex is a good fit when:

• you are matching a fixed design spec
• values come from a remote config or API
• you need a lightweight conversion helper

It becomes less attractive when every screen hard-codes its own colors independently. In that case, you end up with weak theme discipline and harder maintenance.

A better pattern is usually:

• parse once
• expose named semantic colors
• reuse those names across the UI

That keeps the view layer readable.

Common Pitfalls

The biggest mistake is mixing up 8-digit byte order. If the code expects RRGGBBAA and the design system provides AARRGGBB, the color will be wrong.

Another issue is silently falling back to black or another default on invalid input without logging or testing. That can hide broken theme data.

Developers also often overuse hard-coded hex values where asset catalog colors would be better for dark mode and broader design consistency.

Finally, make sure the color space is intentional. .sRGB is a sensible default for most app UI work, but it should not be chosen accidentally.

Summary

• SwiftUI does not natively parse hex strings into Color, so a small extension is the usual solution.
• Document the supported formats clearly, especially for 8-digit colors with alpha.
• Integer-based initializers are a clean option for static color constants.
• Use asset catalog colors when adaptive appearance matters more than raw hex convenience.
• Keep hex parsing centralized instead of scattering ad hoc conversions throughout the UI.