Part 1 Displaying Gradients in SwiftUI | Create the Color Picker with SwiftUI

In several parts, we will create a color picker in SwiftUI. This time, we will create the gradient part to be displayed in the color picker.

Displaying gradients in SwiftUI

To display a gradient in SwiftUI, use the LinearGradient view. Specify the gradient source color, gradient start position, and gradient end position, and a linear gradient will be drawn. For example, a gradient that changes from black to white in the horizontal direction would look like the following code.

struct PickerGradationView: View {
    
    var body: some View {
        LinearGradient(gradient: Gradient(colors: [.black, .white]), startPoint: UnitPoint(x: 0, y: 0), endPoint: UnitPoint(x: 1, y: 0))
    }
}

RGB Color Model

There are several ways to specify colors, but in this article I would like to create a color picker that specifies colors using the RGB color model. The RGB color model expresses colors by combining three color components: R (red), G (green), and B (blue). These three colors are also called the “Three primary colors of light”.

Each component has an intensity ranging from 0.0 to 1.0, with 0.0 being black and 1.0 being the primary color. Countless colors can be represented by combinations of intensities. In addition to using floating-point numbers, integer values may be used to represent intensities. For example, for 8-bit, integers from 0 to 255 are used; for 16-bit, integers from 0 to 65535.

Each component is also called as a “Channel”. For example, “R Channel.

Display a gradient for each Channel

To make it easier to specify the value of each RGB channel in the color picker, we will use a gradient for each channel to represent the color. In the end, we would like to be able to specify colors by tapping or panning on the gradient, but for this article, we will only display the gradient.

Displays three gradients. The colors of each gradient are shown in the following table.

Change the code so that the start and end colors of the PickerGradationView can be specified by properties.

import SwiftUI

struct PickerGradationView: View {
    var startColor: Color
    var endColor: Color
    
    var body: some View {
        LinearGradient(gradient: Gradient(colors: [startColor, endColor]), startPoint: UnitPoint(x: 0, y: 0), endPoint: UnitPoint(x: 1, y: 0))
    }
}

Create a PickerGradationView for each RGB channel. Write the following code.

import SwiftUI

struct ColorPicker: View {
    var redStartColor: Color = Color(red: 0.0, green: 0.0, blue: 0.0)
    var redEndColor: Color = Color(red: 1.0, green: 0.0, blue: 0.0)
    
    var greenStartColor: Color = Color(red: 0.0, green: 0.0, blue: 0.0)
    var greenEndColor: Color = Color(red: 0.0, green: 1.0, blue: 0.0)
    
    var blueStartColor: Color = Color(red: 0.0, green: 0.0, blue: 0.0)
    var blueEndColor: Color = Color(red: 0.0, green: 0.0, blue: 1.0)
    
    var body: some View {
        VStack {
            PickerGradationView(startColor: redStartColor, endColor: redEndColor)
                .frame(height: 100)
                .padding()
            
            PickerGradationView(startColor: greenStartColor, endColor: greenEndColor)
                .frame(height: 100)
                .padding()

            PickerGradationView(startColor: blueStartColor, endColor: blueEndColor)
                .frame(height: 100)
                .padding()
        }
    }
}

Serialized Articles

This article is one of a series of articles titled “Create the Color Picker with SwiftUI”. Please open the next page for other articles in the series.

Create the Color Picker with SwiftUI