Livsy Code

How to use Hierarchical Colors in SwiftUI

Greetings, traveler!

In SwiftUI, colors can be organized hierarchically to create a consistent and scalable color system. This hierarchical system typically includes primary, secondary, tertiary, quaternary, and quinary colors.

Each subsequent color will be less opaque. You can use any color you want, including custom presets, accent color, and system colors.

Let’s check out an example.

import SwiftUI

struct ContentView: View {
        
    var body: some View {
        Rectangle()
            .fill(Color.red)
            .frame(height: 80)
        
        Rectangle()
            .fill(Color.red.secondary)
            .frame(height: 80)
        
        Rectangle()
            .fill(Color.red.tertiary)
            .frame(height: 80)
        
        Rectangle()
            .fill(Color.red.quaternary)
            .frame(height: 80)
        
        Rectangle()
            .fill(Color.red.quinary)
            .frame(height: 80)
    }
    
}

If you enjoyed this article, please feel free to follow me on my social media:

It might be interesting: