How to Use HEX Color Values in Swift & SwiftUI (iOS & macOS)

Unlike CSS or HTML, Apple's Swift frameworks—including SwiftUI (Color), UIKit (UIColor), and AppKit (NSColor)—do not provide a built-in initializer for hexadecimal color strings out of the box.

Instead, Apple requires passing floating-point values between 0.0 and 1.0 for Red, Green, Blue, and Alpha. Below are the definitive, battle-tested Swift extensions to initialize colors from 6-digit (#RRGGBB) and 8-digit (#RRGGBBAA) hex codes.

1. The Complete SwiftUI Color Hex Extension

Copy and paste this extension into your Xcode project (e.g., Color+Hex.swift). It handles leading hash marks, 3-digit shorthand, 6-digit RGB, and 8-digit RGBA hex strings:

import SwiftUI

extension Color {
    /// Initialize a SwiftUI Color from a Hexadecimal string (e.g. "#3B82F6" or "#3B82F6D9")
    init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: // RGB (12-bit) e.g. #FFF
            (r, g, b, a) = ((int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17, 255)
        case 6: // RGB (24-bit) e.g. #3B82F6
            (r, g, b, a) = (int >> 16, int >> 8 & 0xFF, int & 0xFF, 255)
        case 8: // RGBA (32-bit) e.g. #3B82F6D9
            (r, g, b, a) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (r, g, b, a) = (0, 0, 0, 255) // Fallback to black on invalid hex
        }

        self.init(
            .sRGB,
            red: Double(r) / 255.0,
            green: Double(g) / 255.0,
            blue: Double(b) / 255.0,
            opacity: Double(a) / 255.0
        )
    }
}

How to Use It in Your SwiftUI Views:

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Pikka Electric Blue")
                .foregroundColor(Color(hex: "#3B82F6"))
            
            RoundedRectangle(cornerRadius: 12)
                .fill(Color(hex: "#FFDE38")) // Sun Yellow
                .frame(width: 200, height: 60)
        }
    }
}

2. UIKit UIColor Hex Extension (for iOS / iPadOS)

If you are working with Storyboards, UIKit view controllers, or CoreAnimation layers:

import UIKit

extension UIColor {
    convenience init(hex: String) {
        let hex = hex.trimmingCharacters(in: CharacterSet.alphanumerics.inverted)
        var int: UInt64 = 0
        Scanner(string: hex).scanHexInt64(&int)
        
        let a, r, g, b: UInt64
        switch hex.count {
        case 3: // RGB (12-bit)
            (r, g, b, a) = ((int >> 8) * 17, (int >> 4 & 0xF) * 17, (int & 0xF) * 17, 255)
        case 6: // RGB (24-bit)
            (r, g, b, a) = (int >> 16, int >> 8 & 0xFF, int & 0xFF, 255)
        case 8: // RGBA (32-bit)
            (r, g, b, a) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            (r, g, b, a) = (0, 0, 0, 255)
        }

        self.init(
            red: CGFloat(r) / 255.0,
            green: CGFloat(g) / 255.0,
            blue: CGFloat(b) / 255.0,
            alpha: CGFloat(a) / 255.0
        )
    }
}

3. Asset Catalog (.xcassets) vs. Programmatic Hex Extensions

Apple recommends defining brand colors in Assets.xcassets using Color Sets because it provides native Light and Dark Mode switching. However, programmatic Hex extensions are essential when:

• Consuming dynamic colors from a REST API or CMS (e.g., custom user profile themes).
• Building Swift packages or open-source design systems that cannot bundle asset catalogs easily.
• Rapidly prototyping UI designs straight from Figma or Pikka Web Studio.

Recommended Next Steps

Generate your design tokens with one click in Pikka:

• Launch Pikka Web Studio to test WCAG contrast and export full Swift enum files.
• Explore Pikka for Mac to sample native Retina pixels across macOS Monterey, Ventura, Sonoma, and Sequoia.
• Browse 10 Sunshine Yellow Color Palettes for design inspiration.