Hue Rotation in SwiftUI

Photo by Vackground on Unsplash

Hue, in graphics refers to the attribute of a visible light due to which it is differentiated from or similar to the primary colors which are red, green and blue. The term is also used to refer to colors that have no added tint or shade.

SwiftUI provides a hueRotation modifier which takes angle as a parameter.

If you look at the color wheel above, pick any color, apply angle to hue rotation, we get a new color. For example, if we use orange color and apply 180° rotation, we will get blue color.

Here is how that will look in SwiftUI code:

struct HueRotationExample: View {
    var body: some View {
        ZStack {
            Text("DevTechie")
                .font(.largeTitle)
                .bold()
                .foregroundColor(.white)
        }
        .frame(width: 200, height: 200)
        .background(
            RoundedRectangle(cornerRadius: 20)
                .foregroundColor(.orange)
                .hueRotation(.degrees(180))
        )
    }
}

At this point color changes without any visual transition for colors, so it would be cool if we could see this color change over time. The great thing about SwiftUI is that most…