SwiftUI - Adjust Color

---

---

Adjusting colors is the most basic effect used by the developers of SwiftUI to enhance the specified view such as image, text, and shape by adjusting its colors.

SwiftUI supports the following modifiers to enhance the appearance of the colors in the specified view. These modifiers can work well with views like Images, Text, Shapes, UIComponents, etc.

• .colorMultiply
• .saturation
• .brightness
• .contrast
• .hueRotation

The ".colorMultiply" Modifier in SwiftUI

The .colorMultiply(_:) modifier is used to perform a blending effect on the view or images by multiplying the specified color with each pixel of the current view.

Here the multiplication is done according to the channel basis: red, green, blue and alpha.

Syntax

Following is the syntax −

func colorMultiply(_color:Color) -> some View

Here this modifier takes only one parameter which is the color that we want to multiply with the current view.

Example

The following SwiftUI program is used to apply color multiply effect on the given image.

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack {
         Text("Original Image:")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)

         Text("Color Multiply")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)
            .colorMultiply(.pink)
      }
   }
}
#Preview {
   ContentView()
}

Output

The ".saturation" Modifier in SwiftUI

The .saturation modifier is used to adjust the intensity of the colors in the specified view such as image, text, shape etc. The increment of saturation makes the color brighter whereas the decrement of saturation makes the color muted or gray-scale.

Syntax

Following is the syntax −

func saturation(_amount:Double) -> some View

Here this modifier takes only one parameter which is the amount of saturation we want in the specified view.

Example

The following SwiftUI program is used to apply the saturation effect on the given image.

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack {
         Text("Original Image:")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)

         Text("Saturation:")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)
            .saturation(6.0)
      }
   }
}

#Preview {
   ContentView()
}

Output

The ".contrast" Modifier in SwiftUI

The .contrast modifier is used to set the contrast of the current view. It is commonly used to create differences between the light and dark areas of the colors present in the specified views.

Syntax

Following is the syntax −

func contrast(_amount:Double) -> some View

Here this modifier takes only one parameter: the amount of contrast we want in the specified view. If the value is negative, it inverts colors and applies contrast.

Example

The following SwiftUI program is used to apply the contrast effect on the given images.

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack {
         Text("Original Image:")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)

         Text("Contrast:")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)
            .contrast(5.0)
      }
   }
}

#Preview {
   ContentView()
}

Output

The ".brightness" Modifier in SwiftUI

The .brightness modifier is used to set the brightness of the current view. Using the brightness effect we can make the specified view brighter or darker by adding or subtracting light.

Syntax

Following is the syntax −

func brightness(_amount:Double) -> some View

Here this modifier takes only one parameter that is the amount of the brightness we want in the specified view. The value of this parameter varies between 0(no effect) and 1(full white brightness).

Example

The following SwiftUI program is used to apply the brightness effect on the given images.

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack {
         Text("Original Image:")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)

         Text("Brightness:")
            .font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)
            .brightness(0.8)
      }
   }
}

#Preview {
   ContentView()
}

Output

The ".hueRotation" Modifier in SwiftUI

The .hueRotation modifier is used to set the hue rotation effect to the given view. It shifts all the colors present inside the view according to the given angle.

Syntax

Following is the syntax −

func hueRotation(_angle:Angle) -> some View

Here this modifier takes only one parameter that is the hue rotation angle that will apply to the specified view.

The mount of the brightness we want in the specified view. The value of this parameter varies between 0(no effect) and 1(full white brightness).

Example

The following SwiftUI program is used to apply the hue rotation effect on the given images.

import SwiftUI

struct ContentView: View {
   var body: some View {
      VStack {
         Text("Original Image:").font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)
         Text("Hue Rotation:").font(.largeTitle)
         Image("wallpaper")
            .resizable()
            .clipShape(Rectangle())
            .frame(width: 300, height: 250)
            .hueRotation(Angle(degrees: 75))
      }
   }
}
#Preview {
   ContentView()
}

Output