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
Presentify

Take your presentation to the next level.

FaceScreen

Put your face and name on your screen.

ToDoBar

Your to-dos on your menu bar.

Ram Patra Published on October 30, 2023
Image placeholder

Keep reading

If this article was helpful, others might be too

question swiftui swift September 8, 2024 How to make Squircle shape in SwiftUI and how to easily convert it to a circle or a rectangle?

To create a squircle shape (a combination of a square and a circle, also known as a superellipse) in SwiftUI, you can define a custom shape by conforming to the Shape protocol and implementing the superellipse formula. The formula for a superellipse is:

question swiftui swift September 30, 2023 How to open the Settings view in a SwiftUI app on macOS 14.0 (Sonoma)?

In macOS 14.0 (Sonoma), Apple removed support for NSApp.sendAction to open the Settings view in your SwiftUI app. You now have to use SettingsLink like below:

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.

Like my work?

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