Color Picker in SwiftUI

DevTechie Inc

Jun 11, 2022

Color picker was introduced with the release of SwiftUI 2 and iOS 14. It’s a control used to select a color from the system color picker UI.

Color picker view has label and a circular button to show current color selection, as shown below. Here, “pick a color” is label for the picker view and button on right hand side of UI shows selected color.

Tapping on color button displays the larger system color picker that allows users to select new color. Larger color picker is context sensitive and is displayed based on the system its being called upon. Here is what iOS large color picker looks like:

Adding Color picker view is simple, you only need a string for label and a binding variable for selection parameter as shown below:

@State private var colorExample1 = Color.pinkvar colorPickerExample1: some View {
    VStack {ColorPicker("Pick a color", selection: $colorExample1)
    }.padding()
}

We can use colorExample1 variable as a background or foreground color for another view. Let’s add a rounded rectangle to the screen and use colorExample1 as the background for the rectangle.

struct ColorPickerExample: View {
    @State private var colorExample1 = Color.pink
    var body: some View {
        VStack {
            
            RoundedRectangle(cornerRadius: 25)
                .fill(colorExample1)
                .overlay(Text("DevTechie").font(.largeTitle.bold()).foregroundColor(.white))
                .frame(width: 300, height: 100)
            
            ColorPicker("Pick a color", selection: $colorExample1)
        }.padding()
    }
}

Color Opacity

By default color picker supports color with opacity; to disable opacity support, set the supportsOpacity parameter false.

struct ColorPickerExample: View {
    @State private var colorExample1 = Color.pink
    var body: some View {
        VStack {
            
            RoundedRectangle(cornerRadius: 25)
                .fill(colorExample1)
                .overlay(Text("DevTechie").font(.largeTitle.bold()).foregroundColor(.white))
                .frame(width: 300, height: 100)
            
            ColorPicker("Pick a color", selection: $colorExample1, supportsOpacity: false)
        }.padding()
    }
}

Color Picker Label

Label in color picker can be set with a string parameter, apart from that, there is not much room for customization. If you are looking to customize color picker’s label than you can choose to hide the label from picker and use Text or Label view as an alternative.

struct ColorPickerExample: View {
    @State private var colorExample1 = Color.pink
    var body: some View {
        VStack {
            
            RoundedRectangle(cornerRadius: 25)
                .fill(colorExample1)
                .overlay(Text("DevTechie").font(.largeTitle.bold()).foregroundColor(.white))
                .frame(width: 300, height: 100)
            
            VStack {
                Image(systemName: "paintpalette.fill")
                    .foregroundColor(colorExample1)
                    .font(.largeTitle)
                
                ColorPicker("", selection: $colorExample1)
                    .labelsHidden()
            }
            
        }.padding()
    }
}

Color Picker with CGColor

Color picker view supports color from CGColor as well. Using CGColor gives you an option to extract color components out for a given color.

struct ColorPickerExample: View {
    @State private var colorExample1 = CGColor(red: 0.65, green: 0.26, blue: 0.33, alpha: 0.8)
    var body: some View {
        VStack {
            
            RoundedRectangle(cornerRadius: 25)
                .fill(Color(colorExample1))
                .overlay(Text("DevTechie").font(.largeTitle.bold()).foregroundColor(.white))
                .frame(width: 300, height: 100)
            
            HStack {
                Image(systemName: "paintpalette.fill")
                    .foregroundColor(Color(colorExample1))
                    .font(.largeTitle)
                
                ColorPicker("", selection: $colorExample1)
                    .labelsHidden()
            }.padding(.top)
            
            VStack {
                Text("Red: \(colorExample1.components![0])")
                Text("Green: \(colorExample1.components![1])")
                Text("Blue: \(colorExample1.components![2])")
                Text("Opacity: \(colorExample1.components![3])")
                
            }
            
        }.padding()
    }
}

With that, we have reached the end of this article. Thank you once again for reading, don’t forget to subscribe.