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 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:

question swiftui iOS April 2, 2024 How to open a second view from first view in iOS using SwiftUI?

In SwiftUI, you can open another view (or navigate to another view) on the click of a button by utilizing navigation views and navigation links. Here’s a basic example of how to achieve this:

question swiftui macOS January 26, 2024 How to hide the title bar in a SwiftUI macOS app?

Let’s say you have a view named ContentView and your main App file looks like this:

Like my work?

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