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

Take your presentation to the next level.

Put your face and name on your screen.

Your to-dos on your menu bar.

Fill forms using your right-click menu.

Ram Patra Published on October 30, 2023
Image placeholder

Keep reading

If this article was helpful, others might be too

question swiftui swift September 7, 2024 How to apply mirroring to any SwiftUI view?

You can apply mirroring to a SwiftUI view by using the scaleEffect(x:y:anchor:) modifier to flip the view horizontally or vertically. Specifically, you can set the x or y scale to -1.0 to mirror the view along that axis.

question swiftui macos September 3, 2024 Two ways to open a window programmatically in SwiftUI

SwiftUI provides an openWindow environment variable on macOS that allows you to open windows programmatically. Here’s how you can use it to open a new window when a button is clicked:

question swiftui macos September 4, 2024 How to execute some code before app termination in a macOS app using SwiftUI?

To run some code before app termination in a macOS app using SwiftUI, the correct approach would involve placing the termination logic within a view, such as the ContentView. Here’s how you can do it:

Like my work?

Please, feel free to reach out. I would be more than happy to chat.