Cara mudah mengubah kode heksadesimal warna menjadi Color di SwiftUI

Apa itu kode heksadesimal

Warna, secara singkat dapat dituliskan dalam bentuk kode warna baik dalam bentuk rgb atau kode heksadesimal. Contoh, warna merah, dapat dituliskan dalam kode rgb sebagai rgb(255,0,0), atau dalam kode heksadesimal sebagai FF0000 atau FF0000FF. Kode heksadesimal ini  dituliskan dengan format RRGGBB, atau RRGGBBAA.  AA ini adalah nilai alpha atau transparani. Nilai FF, maka artinya warna tersebut full opaque, sedangkan jika 00, maka full transparan, sehingga warna tidak akan terlihat.

Mengubah string kode heksadesimal

Untuk mengubah string kode heksadesimal warna menjadi Color, maka dapat dilakukan membuat ekstensi dari Color seperti kode di bawah ini

extension Color {
    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 6: 
            (r, g, b, a) = (int >> 16, int >> 8 & 0xFF, int & 0xFF, 255)
        case 8: 
            (r, g, b, a) = (int >> 24, int >> 16 & 0xFF, int >> 8 & 0xFF, int & 0xFF)
        default:
            return nil
        }

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

Kode di atas dapat digunakan sebagai berikut.

struct ContentView: View {
    var body: some View {
        VStack {
            Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean luctus, turpis tristique venenatis lobortis, leo magna posuere magna, ac varius arcu magna at turpis")
                .padding()
                .background(Color(hex: "F26800"))
        }
        .padding()
    }
}

Di bawah ini adalah contoh lain penggunaan ekstensi Color di atas dengan masukan berupa input dari user.

GitHub - meshwara/SwiftUI-ColorFromText

Contribute to meshwara/SwiftUI-ColorFromText development by creating an account on GitHub.

GitHubmeshwara

Selamat mencoba dan semoga yang sedikit ini bermanfaat.