How do I get the RGB color values so I can display them under each color swatch when I am creating random colors?

This.. How to read the red, green, blue, and alpha color components from a UIColor

...shows how to get the values for one UIColor,

color.getRed(&red, green: &green, blue: &blue, alpha: &alpha)

but I'm making two and changing them to random colors when clicking a button.

  @State private var randomColor1 = UIColor(red: 0.8, green: 0.1, blue: 0.5, alpha: 1)
    @State private var randomColor2 = UIColor(red: 0.4, green: 0.0, blue: 0.8, alpha: 1)

//    extension UIColor {
//        var rgba: (red: CGFloat, green: CGFloat, blue: CGFloat, alpha: CGFloat) {
//            var red: CGFloat = 0
//            var green: CGFloat = 0
//            var blue: CGFloat = 0
//            var alpha: CGFloat = 0
//            getRed(&red, green: &green, blue: &blue, alpha: &alpha)
//
//            return (red, green, blue, alpha)
//        }
//    }

    var body: some View {
        ZStack {
            VStack{
                HStack {
             //       Text($textValue)
                   Rectangle()
                       .frame(width: 100, height: 200)
                       .foregroundColor(Color(randomColor1))
//                    Rectangle()
//                        .frame(width: 100, height: 200)
//                       .foregroundColor(Color((randomColor1+randomColor2)/2))
                   Rectangle()
                       .frame(width: 100, height: 200)
                       .foregroundColor(Color(randomColor2))
               }
                Button(action: {
                    self.randomColor1 = UIColor(
                        red:.random(in: 0...1),
                        green: .random(in: 0...1),
                        blue: .random(in: 0...1),
                        alpha: 1)

                    self.randomColor2 = UIColor(
                        red:.random(in: 0...1),
                        green: .random(in: 0...1),
                        blue: .random(in: 0...1),
                        alpha: 1)

                }, label: {
                   Text("Make 2 Random colors")
                })
                randomColor1.getRed(&red, green: &green, blue: &blue)
                 Text("put rgb hex values for randomColor1 here")
            }
        }

    }

That gets error "Cannot find 'blue' in scope"

When I try to add the variables as CGFloats, I get 4 different errors.

Something like this will work:

import SwiftUI

extension UIColor {
    public class var random: UIColor {
        UIColor(red: CGFloat.random(in: 0...1),
                green: CGFloat.random(in: 0...1),
                blue: CGFloat.random(in: 0...1),
                alpha: 1)
    }

    var colorValues: (CGFloat, CGFloat, CGFloat) {
        var r: CGFloat = 0
        var g: CGFloat = 0
        var b: CGFloat = 0
        var a: CGFloat = 0

        self.getRed(&r, green: &g, blue: &b, alpha: &a)

        return (r, g, b)
    }
}

struct RandomColorView: View {
    @State private var randomColor1 = UIColor(red: 0.8, green: 0.1, blue: 0.5, alpha: 1)
    @State private var randomColor2 = UIColor(red: 0.4, green: 0.0, blue: 0.8, alpha: 1)

    @State private var randomColor1values: (CGFloat, CGFloat, CGFloat) = (0, 0, 0)
    @State private var randomColor2values: (CGFloat, CGFloat, CGFloat) = (0, 0, 0)

    var body: some View {
        ZStack {
            VStack{
                HStack {
                    Rectangle()
                        .frame(width: 100, height: 200)
                        .foregroundColor(Color(randomColor1))
                    Rectangle()
                        .frame(width: 100, height: 200)
                        .foregroundColor(Color(randomColor2))
                }
                Button {
                    self.randomColor1 = UIColor.random
                    self.randomColor2 = UIColor.random
                } label: {
                    Text("Make 2 Random colors")
                }
                Text("randomColor1: (r: \(randomColor1values.0), g: \(randomColor1values.1), b: \(randomColor1values.2))")
                Text("randomColor2: (r: \(randomColor2values.0), g: \(randomColor2values.1), b: \(randomColor2values.2))")
            }
        }
        .onChange(of: randomColor1) { newColor in
            randomColor1values = randomColor1.colorValues
        }
        .onChange(of: randomColor2) { newColor in
            randomColor2values = randomColor2.colorValues
        }
    }
}

Maybe as an alternative you could create something like RandomColor struct that would hold the original value and also exposed either Color or UIColor as properties? 🙂

This way you have this information neatly encapsulated and gives you more freedom.