Color

Color

Apple utilise une palette cohérente dans ses applications natives, le bleu est la couleur universelle pour les boutons et les éléments interactifs, tandis que chaque application possède son identité visuelle propre (le jaune pour Notes, le rose pour Apple Music, le vert pour Messages, etc.).

Lors de la conception de ton interface, garde à l’esprit que certaines couleurs ont une signification bien définie : le rouge est généralement utilisé pour les actions destructrices, tandis que le vert symbolise une action réussie ou validée. En utilisant intelligemment les couleurs, tu peux améliorer la lisibilité et l’intuitivité de ton application tout en respectant les standards de l’écosystème Apple.

Couleurs du système dynamique

iOS te donne accès à certaines couleurs système dynamiques qui s’adaptent parfaitement aux modes clair et sombre. Ceux-ci incluent les couleurs des liens, des étiquettes, du texte d’espace réservé, des séparateurs. Les couleurs dynamique prennent aussi en compte les options d’accessibilité.

Utiliser les couleurs prédéfinies de la Palette iOS Color()

Tu peux définir tes propres couleurs en utilisant des valeurs RGB

Color est un type de SwiftUI qui représente une couleur. Il peut être utilisée pour définir la couleur de fond, la couleur du texte, les bordures, et plus encore. SwiftUI prend en charge les couleurs prédéfinies, les palettes de couleurs adaptatives, les dégradés, ainsi que la définition de couleurs personnalisées.

struct ColorView: View {
    var body: some View {
        Color.orange
            .ignoresSafeArea()
    }
}

Utiliser les couleurs RGB Color(red:, green:, blue:)

Tu peux définir tes propres couleurs en utilisant des valeurs RGB

struct ColorView: View {
    var body: some View {
        Color(red: 255/255, green: 105/255, blue: 180/255)
            .ignoresSafeArea()
    }
}

Couleurs personnalisées Color(«  »)

Ensuite nomme ta couleur avec le nom de ton choix

Dans la barre latérale, tu as de nombreuses options pour paramétrer tes couleurs. Dans notre exemple, j’ai choisi un violet en format hexadécimal pour toutes les apparences, et un violet plus clair pour le format dark. (J’ai nommer la couleur “PurpleSwag”)

struct ColorView: View {
    var body: some View {
        Color("PurpleSwag")
            .ignoresSafeArea()
    }
}

Pour appeler ma couleur j’ai simplement à inscrire sont nom en chaîne de caractère dans le composant Color(”nomDeMaCouleur”)

Utiliser les couleurs sur des vues .foregroundStyle()

.foregroundStyle() permet d’appliquer une couleur ou un effet visuel aux textes, icônes, images et les vues en général.

struct ColorView: View {
    var body: some View {
        HStack {
            Image(systemName: "arcade.stick.console.fill")
            Text("Sega-Saturn")
        }
        .font(.title)
        .foregroundStyle(.mint)
    }
}

Utiliser les couleurs sur des formes .fill

.fill() est recommandé pour colorer les Shape, car il applique directement une couleur, un dégradé ou une texture au remplissage. .foregroundStyle(), lui, est plus générique et s’applique surtout aux textes, icônes et vues dynamiques.

struct ColorView: View {
    var body: some View {
        RoundedRectangle(cornerRadius: 12)
            .fill(Color.orange)
            .frame(width: 100, height: 100)
    }
}

Hiérarchie des couleurs

iOS met à disposition une hiérarchie pour ses couleurs natives, en plus de la couleur de base, nous avons .secondary, .tertiary, .quaternary, .quinary.

struct ColorView: View {
    var body: some View {
        VStack {
            RoundedRectangle(cornerRadius: 12)
                .fill(Color.orange)
            .frame(width: 100, height: 100)
            RoundedRectangle(cornerRadius: 12)
                .fill(Color.orange.secondary)
            .frame(width: 100, height: 100)
            RoundedRectangle(cornerRadius: 12)
                .fill(Color.orange.tertiary)
            .frame(width: 100, height: 100)
            RoundedRectangle(cornerRadius: 12)
                .fill(Color.orange.quaternary)
            .frame(width: 100, height: 100)
            RoundedRectangle(cornerRadius: 12)
                .fill(Color.orange.quinary)
            .frame(width: 100, height: 100)
        }
    }
}

Toutes les couleurs natives sont hiérarchisables.

Modificateurs de couleur

Opacité .opacity()

struct ColorView: View {
    var body: some View {
        ZStack {
            Color.green.opacity(0.4)
        }
        .ignoresSafeArea()
    }
}

Ajuste la transparence de l’élément. Une valeur de 0 rend l’élément complètement transparent, tandis que 1 le rend complètement opaque.

Luminosité .brightness()

struct ColorView: View {
    var body: some View {
        ZStack {
            Color.green.opacity(0.4)
        }
        .ignoresSafeArea()
    }
}

Modifie la luminosité de la couleur. Les valeurs positives la rendent plus claire, tandis que les valeurs négatives la foncent.

Contraste .contrast()

struct ColorView: View {
    var body: some View {
        ZStack {
            Color.green.contrast(0.5)
        }
        .ignoresSafeArea()
    }
}

Augmente ou diminue le contraste de la couleur, affectant la distinction entre les différentes parties de l’interface utilisateur.

Saturation .saturation()

struct ColorView: View {
    var body: some View {
        ZStack {
            Color.green.saturation(12)
        }
        .ignoresSafeArea()
    }
}

Ajuste l’intensité de la couleur. Diminuer la saturation la rend plus proche du gris, tandis que l’augmenter rend la couleur plus vive.

Teinte .hueRotation()

struct ColorView: View {
    var body: some View {
        ZStack {
            Color.green.hueRotation(Angle(degrees: 50))
        }
        .ignoresSafeArea()
    }
}

Fait pivoter la teinte de la couleur autour du cercle chromatique, changeant ainsi la couleur perçue sans affecter la luminosité ou la saturation.

Inversion des couleurs .colorInvert()

struct ColorView: View {
    var body: some View {
        ZStack {
            Color.green.colorInvert()
        }
        .ignoresSafeArea()
    }
}

Inverse toutes les couleurs de l’élément, transformant chaque couleur en sa couleur complémentaire sur le cercle chromatique.