NEW: Start my new Ultimate Portfolio App course with a free Hacking with Swift+ trial! >>

How to read the RGB and HEX values from 2 Random UIColors

Forums > SwiftUI

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

1      

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.

1      

Hacking with Swift is sponsored by Instabug

SPONSORED Catch bugs as soon as they happen and know exactly why a crash occurred. Instabug's SDK grabs all the logs they need to fix bugs, crashes and performance issues in minutes instead of days. Get screenshots, device details, network logs, repro steps, and tons of other critical insights needed to resolve issues and prioritize product backlogs straight from your dashboard. It only takes a minute to integrate!

Get started now

Sponsor Hacking with Swift and reach the world's largest Swift community!

Reply to this topic…

You need to create an account or log in to reply.

All interactions here are governed by our code of conduct.

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.