Color in SwiftUI

DevTechie Inc
Jan 15, 2023

Color is a representation of a color that adapts to a given context. Color struct also acts as a SwiftUI view which mean, it can be placed inside layout views and other modifiers can be applied directly to the Color. Color view fills the entire space provided by the parent view.

Let’s work on example to explore this more.

struct DevTechieColorExample: View {
    
    var body: some View {
        NavigationView {
            VStack {
                Color.orange
            }
            .navigationTitle("DevTechie")
        }
    }
}
Note that Color by default takes the whole screen, except SafeArea. Lets apply ignoreSafeArea modifier on Color view to fill the entire screen.

Color.orange
.ignoresSafeArea()
Let’s try applying frame modifier to size Color view to 200x200 points.

Color.orange
.frame(width: 200, height: 200)
Let’s apply cornerRadius modifier to Color view to make it a rounded rectangle.

Color.orange
.frame(width: 200, height: 200)
.cornerRadius(20)
Since Color conforms to ShapeStyle modifier, we can use it with views which require a ShapeStyle conforming type.

Let’s use Color with Circle. Circle is a shape type and it can have fill color to set fill color for circle. fill modifier expects ShapeStyle conforming type so Color can be used here.

Circle()
.fill(Color.orange)
.frame(width: 200, height: 200)
We can create Color by passing UIColor as a parameter.

Color(uiColor: UIColor.magenta)
.frame(width: 200, height: 200)
Another overload for Color let’s us create color from RGB values. Let’s expand our example to have Slider view so we can create and use our own custom color.

struct DevTechieColorExample: View {
    
    @State private var redValue = 0.0
    @State private var greenValue = 0.0
    @State private var blueValue = 0.0
    
    var body: some View {
        NavigationView {
            VStack {
                Color(red: redValue, green: greenValue, blue: blueValue)
                    .frame(width: 200, height: 200)
                VStack {
                    Slider(value: $redValue)
                        .tint(.red)
                    Slider(value: $greenValue)
                        .tint(.green)
                    Slider(value: $blueValue)
                        .tint(.blue)
                }
                .padding()
            }
            .navigationTitle("DevTechie")
        }
    }
}
We also have opacity parameter for Color.

struct DevTechieColorExample: View {
    
    @State private var redValue = 0.0
    @State private var greenValue = 0.0
    @State private var blueValue = 0.0
    
    @State private var opacityValue = 0.0
    
    var body: some View {
        NavigationView {
            VStack {
                Color(red: redValue, green: greenValue, blue: blueValue, opacity: opacityValue)
                    .frame(width: 200, height: 200)
                VStack {
                    Slider(value: $redValue)
                        .tint(.red)
                    Slider(value: $greenValue)
                        .tint(.green)
                    Slider(value: $blueValue)
                        .tint(.blue)
                    
                    Slider(value: $opacityValue)
                }
                .padding()
            }
            .navigationTitle("DevTechie")
        }
    }
}
We can use Color from Asset. Open, Assets

Right click and in blank space and select “New Color Set” and change the name to your choice. We will name it a “OrangeColor”

Select “Dark” color panel and click on Attributes Inspector, click on “Show Color Panel” button at the bottom.

Pick color of your choice, close the color picker window. Repeat the same step for “Any Appearance”

You should have two colors supporting light and dark mode.

Now when we have the color asset created, we can use it directly inside our code as shown below:

struct DevTechieColorExample: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .fill(Color("OrangeColor"))
            .frame(width: 300, height: 200)
            .overlay(Text("DevTechie").font(.largeTitle).foregroundColor(.white))
    }
}
Color gradient instance property was introduced with iOS 16 and it returns the standard gradient for the color. It is applied directly on Color.

Color.orange.gradient
Here is how we can use it:

struct DevTechieColorExample: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 20)
            .fill(Color.orange.gradient)
            .frame(width: 300, height: 200)
            .overlay(Text("DevTechie").font(.largeTitle).foregroundColor(.white))
    }
}
We can combine colors using colorMultiply modifier. For example, mixing red and yellow color gives us orange color. We can mix colors with colorMultiply modifier.

Color.yellow.colorMultiply(.red)
We can adjust contrast for the color using contrast modifier.

struct DevTechieColorExample: View {
    
    @State private var value = 0.0
    
    var body: some View {
        VStack {
            Color.yellow
                .colorMultiply(.red)
                .contrast(value)
                .frame(width: 300, height: 200)
                .overlay(Text("DevTechie").font(.largeTitle).foregroundColor(.white))
                .cornerRadius(20)
            
            Slider(value: $value)
        }
        .padding()
    }
}
Replace contrast modifier with brightness in the code to change brightness for the color view.

.brightness(value)
We can invert the color using colorInvert modifier:

Color.yellow
.colorMultiply(.red)
.colorInvert()
With that we have reached the end of this article. Thank you once again for reading. Don’t forget to follow 😍. Also subscribe our newsletter at https://www.devtechie.com
Like