Comment créer une belle palette de couleurs

Malgré le fait que la sélection de bonnes couleurs est un art, il existe plusieurs astuces pour simplifier le choix d'une belle couleur. Cet article se compose de deux parties: dans la première, je vous dirai ce qui rend la palette bonne, et dans la seconde, je dériverai une formule qui peut être utilisée pour sélectionner une belle palette.

Remarque: c'est loin d'être la seule façon de choisir de bonnes couleurs, mais plutôt un ensemble d'heuristiques que j'ai maîtrisé moi-même. J'espère que cela vous aidera à trouver les bonnes couleurs pour votre site Web / application / jeu.

Palettes de couleurs et contraste

Nous devons d'abord dire que les couleurs n'existent pas isolément. Lorsque nous parlons d'une belle couleur, cela ne signifie pas qu'elle soit claire ou sombre, saturée ou fanée. Lorsque nous parlons de correspondance des couleurs, nous ne devons pas penser autant aux couleurs individuelles, mais aux ensembles de couleurs ou aux palettes de couleurs.


De gauche à droite: Super Mario Run, Monument Valley, Alto's Odyssey, Lara Croft Go

Lorsque nous pensons à des ensembles de couleurs, nous devons penser à leur interaction: certains d'entre eux devraient-ils se démarquer ou se mélanger les uns avec les autres? C'est ce qu'on appelle le contraste.

Le processus de choix de belles couleurs se résume souvent à choisir les bons contrastes pour votre conception.

La beauté des fleurs dépend de la façon dont elles fonctionnent les unes avec les autres dans votre conception. Mais quand il s'agit du contraste des couleurs, mais il peut être formé de différentes manières:

Luminosité (clair / foncé)

La luminosité est un type de contraste facile à visualiser. Sur le sélecteur de couleurs HSB, cela correspond à un mouvement le long de l'axe vertical:


Luminosité

Dans le cas général, on peut simplement augmenter le contraste entre les deux couleurs, simplement en augmentant la différence de luminosité.


Contraste de luminosité

Bien que ce soit facile à faire, il ne suffit pas de créer des palettes de qualité. Les couleurs varient uniquement en magnitude de noir et blanc et ne sont tout simplement pas aussi intéressantes que les couleurs interagissant dans plus de dimensions. Ce qui nous amène à ...

Contraste tonal

Nous percevons le contraste tonal en termes de teintes de couleurs et de niveaux de saturation. Presque comme dans le cas de la luminosité, une augmentation de la différence de teinte ou de saturation augmente généralement la quantité de contraste entre les couleurs.


Contraste des teintes


Saturation (axe horizontal du HSB) et contraste de saturation

Mais même ainsi, ces valeurs seules ne peuvent pas brosser un tableau complet. On peut toujours choisir des couleurs qui, malgré des différences de teinte ou de saturation, ont toujours un mauvais contraste.


Différentes nuances et mauvais contraste


Saturation différente et mauvais contraste

Que se passe-t-il ici? La réponse est que différentes nuances ont des valeurs tonales internes différentes. Il est difficile pour beaucoup de gens (dont moi) d'imaginer quelles valeurs tonales peuvent prendre sur différentes nuances. Et cela nous amène à mon truc préféré ...

Hack en niveaux de gris

Si vous affichez les couleurs dans des tons de gris, la luminosité du gris résultant peut servir de bon indicateur de la valeur des tons de différentes couleurs. Mais ce n'est pas seulement utile pour cela: c'est important si vous créez un design prenant en compte les besoins des personnes handicapées. Il s'agit d'un moyen simple de visualiser la quantité de contraste existant dans une conception, quelle que soit la teinte.


Valeurs tonales internes pour différentes nuances

Voyons à quoi ressemblent ces valeurs tonales dans le sélecteur de couleurs HSB. Notez également comment les changements dans les valeurs tonales changent dans le spectre pour chaque teinte (indiqué dans la colonne de droite):


Si nous regardons les exemples précédents, mais maintenant dans des tons de gris, il sera beaucoup plus facile de dire quelles couleurs ont un contraste élevé et faible.


Contraste de saturation: contraste élevé au-dessus, mauvais contraste au-dessous.


Contraste de l'ombre: contraste élevé au-dessus, mauvais contraste en dessous.

Jetons un autre regard sur les jeux ci-dessus, mais maintenant en niveaux de gris.


Vous pouvez facilement remarquer que le premier plan se détache clairement sur l'arrière-plan, les éléments interactifs contrastent fortement avec ceux non interactifs et que si le jeu était en niveaux de gris, il resterait toujours jouable. La conclusion la plus importante de ceci:

Utilisez le hack en niveaux de gris fréquemment et intentionnellement pour visualiser les contrastes qui existent dans votre conception.

De beaux contrastes conduisent à la création de belles palettes de couleurs, donc je vous présente ...

Formule pour choisir de belles palettes de couleurs

Appliquons l'analyse ci-dessus, mais dans l'ordre inverse: commencez par le dessin en niveaux de gris, puis passez à la sélection des couleurs appropriées.

1: Déterminer où nous avons besoin de contraste

Créez le cadre de votre conception, puis décidez dans quelles zones du cadre vous avez besoin de plus de contraste et dans lesquelles moins.

2: Coloriez le motif dans des tons de gris

Essayez de colorer le cadre design uniquement dans des tons de gris. Les zones qui nécessitent plus de contraste ont la plus grande différence de luminosité. Cette étape doit être effectuée dans la résolution finale de la conception. Les petits éléments de conception (par exemple, les logos et les icônes d'application) nécessitent un contraste particulièrement élevé pour mettre en évidence les petits éléments.

3: Choisissez des couleurs de base

Choisissez les nuances de base des couleurs avec lesquelles vous souhaitez travailler. Il s'agit d'une étape subjective et vous pouvez utiliser des outils tels que le pigment de ShapeFactory ou Adobe Color CC pour le sélectionner. Fait amusant: certaines combinaisons de couleurs sont si populaires qu'elles ont obtenu le statut de piste .

4: Ajustez les couleurs pour avoir des valeurs tonales appropriées

Après avoir choisi les teintes, recherchez l'intervalle des valeurs tonales auquel la teinte correspond approximativement à la valeur de ton gris du croquis dessiné précédemment. Lorsque vous expérimentez la luminosité et la saturation, basculez entre les modes couleurs réelles et niveaux de gris. Votre tâche consiste à obtenir une palette de couleurs qui, lorsqu'elle est affichée en nuances, correspond au design de l'étape 2.

Exemple 1


(1) Contraste du cadre et (2) niveaux de gris préférés


(3) Couleurs de base sélectionnées

Si nous voulions arriver à la palette de couleurs ci-dessus, nous devions trouver quelles zones de chaque couleur correspondent à peu près au dessin en niveaux de gris.


Gammes de tons correspondantes pour les couleurs de base

Nous pouvons maintenant sélectionner des combinaisons de couleurs dans n'importe quelle partie de ces zones:


(4) Plusieurs options de palette de couleurs

Exemple 2

Voici à quoi ressemblait ce processus lors du développement de mon application Overlink:


Processus de gauche à droite, de haut en bas: filaire, niveaux de gris, couleurs de base, design final

Félicitations! J'espère que cela vous aide à choisir des ensembles de couleurs qui contrastent là où vous en avez besoin, se mélangent là où vous n'en avez pas besoin et sont globalement magnifiques.

Le contraste seul n'est pas l'aspect le plus crucial pour créer un superbe design, mais il joue un rôle important dans le choix de belles palettes.