Loading...

How to convert Color type to hex and vice-versa while retaining alpha information?

question swiftui swift
Ram Patra Published on October 30, 2023

The below should work both on macOS and iOS with one minor change. That is, use UIColor instead of NSColor if you’re planning to use it for iOS.

import SwiftUI

extension Color {
    init(hex: String) {
        var hexSanitized = hex.trimmingCharacters(in: .whitespacesAndNewlines)
        hexSanitized = hexSanitized.replacingOccurrences(of: "#", with: "")

        var rgb: UInt64 = 0

        Scanner(string: hexSanitized).scanHexInt64(&rgb)

        let red = Double((rgb & 0xFF000000) >> 24) / 255.0
        let green = Double((rgb & 0x00FF0000) >> 16) / 255.0
        let blue = Double((rgb & 0x0000FF00) >> 8) / 255.0
        let alpha = Double(rgb & 0x000000FF) / 255.0
        
        self.init(.sRGB, red: red, green: green, blue: blue, opacity: alpha)
    }

    var hex: String {
        if let nsColor = NSColor(self).usingColorSpace(.sRGB) {
            let red = Int(nsColor.redComponent * 255)
            let green = Int(nsColor.greenComponent * 255)
            let blue = Int(nsColor.blueComponent * 255)
            let alpha = Int(nsColor.alphaComponent * 255)

            return String(format: "#%02X%02X%02X%02X", red, green, blue, alpha)
        } else {
            // Default to .gray color if NSColor conversion fails
            return "#8e8e93ff"
        }
    }
}

You can then use it like below:

var someColor: Color = Color(hex: "#FFFFFFFF") // white color with 100% opacity
var someColorHex: String = someColor.hex // white color in hexadecimal format
Ram Patra Published on October 30, 2023
Image placeholder

Keep reading

If this article was helpful, others might be too

question swiftui March 29, 2024 How to group different style modifiers and reuse them across multiple SwiftUI views?

In SwiftUI, you can create custom view modifiers to encapsulate common styling configurations and reuse them across different views. Here’s how you can create and reuse a custom view modifier:

question swiftui March 6, 2023 How to render the icon on a menu bar as a template in SwiftUI?

Setting your app’s icon on the menu bar as a template makes it to adapt to light and dark modes automatically without you doing anything. To do this, you have to use this constructor of MenuBarExtra class.