Adapté de notre futur livre Refactoring UI

Avez-vous vu ces générateurs de palette de couleurs à la mode? Lorsque vous choisissez une couleur, ajustez quelques paramètres avec des phrases musicales comme «triade» ou «quatrième majeur» - et obtenez cinq couleurs parfaites pour votre site Web?



Une telle approche informatique et scientifique pour choisir le jeu de couleurs parfait est extrêmement séduisante, mais pas très utile.

Eh bien, si vous ne voulez pas que le site ressemble à ceci:

Ce dont vous avez vraiment besoin

Vous ne ferez rien avec cinq codes hexadécimaux. Pour construire quelque chose de réel, il faut une palette beaucoup plus complète.



Une bonne palette de couleurs peut être divisée en trois catégories.

Gris

Texte, arrière-plan, panneaux, éléments de formulaire - presque tout cela existe dans l'interface grise.



Et vous aurez besoin de plus de couleurs grises que vous ne le pensez. Il semble que trois ou quatre teintes, c'est beaucoup, mais très bientôt, vous voudrez quelque chose d'un peu plus sombre que la teinte n ° 2, mais un peu plus clair que la teinte n ° 3.

En pratique, il est conseillé de choisir 8 à 10 teintes (plus de détails plus loin). Ce n'est pas tant que chercher la différence entre les teintes n ° 77 et n ° 78, mais une quantité tout à fait suffisante.



Le vrai noir, en règle générale, n'a pas l'air naturel, alors commencez par un gris très foncé et passez progressivement au blanc.

Couleurs primaires

La plupart des sites ont besoin d'une ou deux couleurs pour les actions de base, les éléments de navigation, etc. Ces couleurs définissent l'aspect général du site: celles qui vous font penser à Facebook comme «bleu», bien qu'en fait il soit principalement gris.

Comme pour la palette de gris, vous devez sélectionner une palette (5-10) de nuances plus claires et plus sombres.



Les nuances les plus claires peuvent être utiles comme arrière-plan teinté pour des choses comme les alertes, tandis que les plus sombres sont idéales pour le texte.

Couleurs accentuées

En plus des principaux, chaque site a besoin de plusieurs couleurs d' accent pour communiquer avec l'utilisateur.

Ainsi, pour mettre en évidence une nouvelle fonction, vous pouvez choisir une couleur attrayante, par exemple, jaune, rose ou bleu-vert:



Des couleurs peuvent également être nécessaires pour souligner différents états sémantiques, par exemple le rouge pour confirmer les actions destructrices:



... jaune pour les avertissements:



... ou vert pour souligner une tendance positive:



Et quelques nuances de ces couleurs, bien qu'elles devraient être utilisées avec parcimonie dans l'interface utilisateur.

Si vous créez une conception dans laquelle la couleur permet de distinguer ou de classer des éléments similaires (par exemple, des lignes sur des graphiques, des événements de calendrier ou des balises dans un projet), d'autres couleurs d'accent peuvent être nécessaires.

En général, une interface utilisateur complexe nécessite souvent jusqu'à dix couleurs différentes avec 5 à 10 nuances chacune.

Définissez les nuances à l'avance

Lorsqu'une teinte légèrement plus claire ou plus foncée est requise, vous n'avez pas besoin d'utiliser des fonctions de préprocesseur CSS comme éclaircir ou assombrir. Vous vous retrouvez donc avec 35 bleus légèrement différents qui se ressemblent tous.

Au lieu de cela, définissez un ensemble fixe de nuances parmi lesquelles choisir.



Comment faire une telle palette?

Choisissez d'abord une couleur de base

Commencez par la couleur de base sur laquelle les nuances claires et foncées sont basées.

Il n'y a pas de véritable méthode scientifique, mais pour les couleurs de base et d'accentuation, une bonne règle de base est de choisir une teinte qui fonctionne bien avec l'arrière-plan du bouton.



Il est important de noter qu'il n'y a pas de vraies règles ici, telles que "démarrer à 50% de luminosité" ou similaire. Chaque couleur se comporte un peu différemment, vous ne devez donc vous fier qu'à votre goût.

Fixer des limites

Sélectionnez ensuite les teintes les plus sombres et les plus claires. Ce n'est pas non plus une approche scientifique, mais cela permet d'imaginer où les couleurs seront utilisées, et de les choisir en fonction de ce contexte.

La teinte la plus foncée est généralement laissée pour le texte et la plus claire - pour l'arrière-plan de l'élément. Une simple alerte est un bon exemple où ces teintes sont combinées.



Commencez avec une couleur qui correspond au ton de la couleur primaire, puis modifiez la saturation et la luminosité jusqu'à ce que vous soyez satisfait.

Remplissez les blancs

Si vous avez choisi les teintes de base, foncées et claires, il ne reste plus qu'à combler les lacunes entre elles.

Pour la plupart des projets, vous avez besoin d'au moins cinq nuances par couleur, et de préférence plus proches de dix, afin de ne pas vous sentir gêné.

Neuf est un grand nombre car il se divise bien, ce qui facilite un peu le remplissage des blancs. Appelons la teinte la plus foncée 900 , la base 500 et la plus claire 100 .

Commencez par choisir des teintes de 700 et 300 , qui sont en plein milieu des deux intervalles: elles seront le parfait compromis entre les teintes des deux côtés.



Cela crée quatre autres intervalles sur l'échelle ( 800 , 600 , 400 et 200 ), qui sont remplis de la même manière.



En fin de compte, vous obtenez un ensemble de couleurs assez équilibré, assez pour réaliser vos idées de conception.

Et les gris?

Avec des nuances de gris, la couleur de base n'est pas si importante, mais sinon le processus est le même. Commencez par les bords et remplissez les blancs jusqu'à ce que vous obteniez la bonne palette.



Choisissez la teinte la plus foncée par la couleur du texte le plus sombre du projet et la plus claire - celle qui fonctionne bien comme fond clair, presque blanc.

Ce n'est pas une science.

Peu importe comment vous le souhaitez, vous ne devez pas vous fier uniquement aux mathématiques pour choisir la palette de couleurs parfaite.

Une approche systématique comme celle ci-dessus est idéale pour commencer, mais n'ayez pas peur de la changer si nécessaire.

Dès que vous commencez vraiment à utiliser vos couleurs dans le projet, vous voudrez presque inévitablement changer légèrement la saturation d'une certaine nuance ou rendre quelques nuances plus claires ou plus sombres. Faites confiance à vos yeux, pas aux chiffres.

Essayez simplement de ne pas ajouter trop de nouvelles teintes lorsque cela est facultatif. Si vous ne limitez pas la palette, vous pouvez généralement vous retrouver sans système de couleurs.