Comment choisir les bonnes couleurs pour son site internet ?
Introduction
La couleur est un élément fondamental dans la conception d’un site web, elle influence directement la perception, l’émotion et l’expérience de l’utilisateur. Son choix ne doit pas être laissé au hasard, mais doit répondre à une logique précise. Dans cet article, nous allons explorer en détail les différents systèmes de couleurs, leur perception, et comment faire des choix colorimétriques stratégiques pour atteindre vos objectifs et créer une identité visuelle cohérente et impactante.
La couleur en détail
Les différents systèmes de couleurs
Il existe deux grand systèmes de création de couleurs, la synthèse additive et la synthèse soustractive. On parlera de synthèse soustractive pour le monde physique, en effet la lumière qui est composée de toutes les teintes visibles, en percutant les objets va en partie être absorbée par ceux-ci et renvoyer le reste du rayon aux alentours, et possiblement vers notre œil. Donc ce que nous voyons est bien le rayon lumineux auquel on a soustrait une partie de ses couleurs.
En revanche pour les écrans on parle de synthèse additive, les écrans sont composés de pixel qui peuvent être allumés d’un mélange de trois couleurs Rouge Vert et Bleu. C’est l’addition de ces rayonnements lumineux qui vient constituer la couleur que l’on voit c’est pourquoi on parle de synthèse additive.
Comme les deux systèmes ne fonctionnent pas de la même façon il est impossible d’avoir la même gamme de couleurs, on devra faire des choix que l’on soit dans un contexte d’impression ou de création pour les écrans.
La perception de la couleur
Une composante intéressante de notre analyse des couleurs est le fait que le cerveau les interprète en relation avec les couleurs environnantes. Il devient alors peu pertinent de choisir ses couleurs séparément, sans les confronter les unes aux autres pour voir comment elles réagissent.
Une façon de mettre cela en évidence est de regarder différentes illusions d’optique, comme cette spirale sur laquelle on croit voir des bandes bleues et vertes mais qui sont en réalité de la même couleur.
Cela met en évidence qu’il est inutile de se focaliser sur la couleur en elle même mais plutôt de réfléchir à l’effet qu’elle produit sur notre composition.
Se poser les bonnes questions
Afin de choisir les bonnes couleurs pour son site il est important avant de bien définir la vision et les objectifs que l’on a pour ce site. Pour cela on va oublier les couleurs un instant et analyser de manière objective notre projet
Définir ses objectifs
Parce que le choix des couleurs ne doit pas uniquement se cantonner à un jugement de valeur il faut pour prendre les bonnes décisions être au clair avec la portée et les attentes de son site internet. On pourra se demander par exemple si on veut que l’utilisateur soit dans une position active et énergique ou bien si on veut qu’il reste concentré sur l’information qu’on lui présente. On peut aussi dégager de la structure de notre site des points intéressants pour définir des couleurs, par exemple pour marquer des catégories ou des produits distincts. Bref, l’idée est d’avoir une représentation claire de nos objectifs pour pouvoir choisir ou rejeter une palette de couleurs en fonction.
Définir son public cible
Un site internet est avant tout fait pour être consulté, et comme chaque groupe sociologique a ses particularités il peut être intéressant de savoir quel est l’utilisateur type qui se retrouve sur notre site. Par exemple de connaître son âge, sa catégorie socio-professionnelle ou bien son appétit pour le digital va nous permettre encore une fois de faire des choix colorimétriques afin d’optimiser les résultats produits par le site sur cette cible.
Définir son ton
Enfin il est important de savoir quel est le ton que l’on va adopter, quelle est l’atmosphère générale que l’on veut développer. Celui-ci peut être conforme avec le domaine dans lequel le site évolue, par exemple on pensera plus à un ton corporate, relativement neutre et rassurant pour une entreprise dans le secteur de la banque, cependant on peut aussi être en rupture et proposer un ton plus jeune, décalé et dans ce cas il faut que les couleurs que l’on va choisir soient en adéquation pour appuyer le message de manière visuelle.
Faire une analyse de la concurrence
Lorsque l’on lance un projet il paraît impossible de passer à travers une analyse rigoureuse de la concurrence pour pouvoir se placer de manière stratégique. On y pense moins cependant pour le choix de sa palette de couleurs or, c’est un point clé pour décider si on veut se conformer avec les codes en place ou bien se positionner en rupture. Ces choix se feront évidemment à la lumière des autres points que l’on a évoqué précédemment.
Choisir ses couleurs
Maintenant que l’on a une idée précise de notre projet, de sa portée, de sa cible et de son ton on va pouvoir sélectionner concrètement nos couleurs.
Créer une palette de base
En tenant compte de nos précédentes recherches on va sélectionner quelques couleurs pour faire une première palette. Il existe une infinité de systèmes de couleurs, un des plus répandus et efficaces est le système à trois couleurs, généralement appelé 60-30-10 en référence à la fréquence à laquelle chaque couleur sera utilisée, environ 60% pour la couleur principale 30% pour la secondaire et 10% pour la couleur d’accent.
On va donc chercher une première couleur qui sera notre couleur principale, celle qui occupera la majeure partie des éléments visibles. Toutes les couleurs peuvent être un bon choix en fonction du contexte. Il s’agit de réfléchir si la couleur choisie répond favorablement aux attentes du projet, si elle est pertinente dans le contexte sociologique, géographique et surtout culturel de nos publics cibles. On gardera en tête les significations des couleurs, mais cela doit plutôt être vu comme des guides généraux qu’il faut recontextualiser, et le cas échéant transgresser si cela sert le projet, pour donner réellement du sens à nos couleurs.
Ensuite on va chercher une couleur secondaire qui servira de contrepoint à la couleur principale. Cette couleur doit se marier avec la couleur principale et lui répondre. On pourra chercher du côté des complémentaires pour trouver une couleur qui tranche ou bien rester dans des teintes similaires et travailler sur les valeurs. Encore une fois il n’y a pas règle qui marche pour tous les projets, mais il faut garder nos problématiques en tête. Lors de la recherche de cette couleur, on va pouvoir faire varier notre couleur primaire pour ajuster l’accord entre les deux de la meilleure façon, à l’image d’un cuisinier qui va corriger ses assaisonnements, on pourra aussi complétement changer la première si nécessaire, il ne faut rien s’interdire et ne pas figer trop tôt nos choix.
On va ensuite sélectionner une troisième couleur qui sera utilisée comme accent, lorsque l’on voudra mettre un élément en avant et qu’il attire particulièrement l’œil. Cette couleur devra obligatoirement trancher avec les deux autres pour être rapidement repérée par l’utilisateur. Encore une fois cette couleur pourra faire varier les deux précédentes.
Si le projet le nécessite on pourra sélectionner d’autres couleurs, il faudra faire attention alors qu’elles fonctionnent bien avec le système précédemment créé.
Des outils pour créer ses palettes
Il existe de nombreux outils en ligne pour créer des palettes et rechercher des couleurs, il est intéressant de s’en servir et de s’inspirer des librairies de palettes créées par la communauté. On pourra citer Adobe Color, Coolors ou bien Color Hunt qui permettent de rechercher et de peaufiner simultanément sa palette en fonction de critères prédéfinis.
On vous conseillera plutôt que de rechercher des couleurs en aplat, de les appliquer à vos maquettes pour avoir une idée précise de l’effet procuré par celles-ci sur vos designs. On citera ici Figma, un logiciel de design web, qui permet de définir des couleurs en variable pour facilement les modifier sur tous les composants.
Il peut être aussi intéressant de travailler à partir de photo dont la colorimétrie correspond aux valeurs et au mood de notre projet, on viendra alors sélectionner avec un outil pipette telle ou telle couleur de la photo pour avoir des associations qui fonctionnent naturellement. On pourra ensuite venir retravailler ces couleurs une à une pour les optimiser en fonction de notre site web. On citera ici le compte instagram @color-palette.cinema qui extrait des palettes de couleurs depuis des films bien connus.
Étendre sa palette
La règle des 60-30-10 c’est très bien pour la théorie mais en pratique on va avoir besoin de plus de couleurs pour mener à bien l’expérience utilisateur.
On va dans un premier temps avoir besoin de couleurs de feedback pour transmettre les informations suivante, “tout est ok”, “attention” et “danger”. On pourra les utiliser par exemple pour signifier une erreur dans un champ de formulaire ou bien qu’un message s’est bien envoyé. Respectivement on choisira un ton dans les verts ou bleus pour le premier, un orange pour le second et enfin un orange plus soutenu ou un rouge pour le dernier, ces couleurs sont très codifiées et quasi universellement reconnues dans ce contexte. Il faut encore une fois veiller à ce que ces trois teintes se marient harmonieusement et se distinguent facilement sur nos couleurs choisies, notamment si nos couleurs principales se rapprochent de ces teintes.
Il nous faudra ensuite créer des variantes des teintes principales de notre site pour les différentes interactions qu’il sera possible de retrouver sur celui-ci. Par exemple le bouton envoyer d’un formulaire pourra avoir un état inactif avec des teintes légèrement plus foncées quand les champs ne sont pas encore remplis et au contraire être mis en surbrillance lorsque l’utilisateur le survole. On pourra se poser la question pour les principaux états que peuvent prendre les composants d’un site, à savoir “active”, “disabled”, “hover” ou “focus”. On peut penser en fonction du contexte spécifique à d’autres états et à d’autres gammes de couleurs, l’important étant de n’ajouter des couleurs que si elles sont nécessaires au projet.
Utiliser la couleur de manière intelligente
Maintenant que l’on dispose d’une palette pour son site web il ne reste plus qu’à l’utiliser. Mais attention il reste encore quelques pièges à éviter.
Tout d’abord cela paraît logique mais on se limitera absolument à la palette précédemment sélectionnée pour ne pas perdre le visiteur avec une nouvelle couleur sortie de nulle part. En ne reprenant pas la structure précédemment créée elle introduirait un désordre, chose que supporte difficilement l’utilisateur. On pourra pour ceci créer un thème de couleur en code et ensuite se limiter à y faire référence sans introduire de nouvelles valeurs.
Ensuite on veillera à respecter la fréquence d’utilisation de chacune de nos couleurs afin de créer des rythmes différents. On pourra habituer le visiteur à nos couleurs principales et trancher en utilisant nos accents pour attirer son attention. On envisagera aussi la couleur comme mode d’interaction, au survol ou bien pour mettre en valeur un élément à un moment précis, comme lorsqu’il sélectionne un produit ou bien pour mettre en avant l’élément actuel d’un carrousel.
Conclusion
Le choix des couleurs pour un site web ne se résume pas à des préférences esthétiques personnelles, mais doit répondre à des critères fonctionnels et stratégiques. En comprenant les principes des systèmes colorimétriques et en tenant compte des objectifs, du public et du ton du projet, on pourra créer une palette de couleurs qui non seulement améliore l’expérience utilisateur, mais renforce également l’identité visuelle de la marque. En adoptant une approche réfléchie et cohérente, les couleurs deviennent un puissant outil pour capter l’attention, guider les actions des utilisateurs et soutenir les messages que l’on souhaite transmettre.