In this multi-part series, 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 instance, the code snippet below illustrates a horizontal gradient transitioning from black to white.
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 represents colors by amalgamating three color components: R (red), G (green), and B (blue). These three colors are 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. Various combinations of these intensities can portray an infinite spectrum of colors. 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 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. Ultimately, we want to specify colors by tapping or panning the gradient. Still, for this article, we will only display the gradient.
Display three gradients. The colors of each gradient are shown in the following table.
Channel | Start color | End color |
---|---|---|
R | Black = RGB(0.0, 0.0, 0.0) | Red = RGB(1.0, 0.0, 0.0) |
G | Black = RGB(0.0, 0.0, 0.0) | Green = RGB(0.0, 1.0, 0.0) |
B | Black = RGB(0.0, 0.0, 0.0) | Blue = RGB(0.0, 0.0, 1.0) |
Modify the code to allow specification of the start and end colors of the PickerGradationView
via 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 piece is part of a series titled “Create the Color Picker with SwiftUI.” Please open the next page for other articles in the series.