choix-couleurs-site-internet

Les couleurs utilisées sur votre site Internet influencent les émotions et les actions des personnes ciblées, comment trouver les bonnes ?

Les couleurs, entre émotion et subjectivité

Rien n’est plus subjectif que les goûts et les couleurs, le violet qui plaît à Pierre peut faire fuir Paul. Le choix d’une couleur plutôt qu’une autre repose le plus souvent sur nos goûts et notre sens de l’esthétisme.

emotions-couleurs

Il est quasi impossible de séparer la subjectivité de la symbolique des couleurs, elles influent sur nos émotions, nos humeurs et nos ressentis,  en fonction de notre environnement culturel.

Avant de choisir les couleurs de son site Internet, il est fondamental de bien connaître sa cible pour ne pas commettre un impair dans le choix des couleurs. Un exemple, dans le monde occidental le blanc est souvent associé à la pureté, l’innocence, le mariage, la vie… , à contrario, dans la majorité de pays asiatiques ou africains, le blanc est associé à la mort et au deuil.

Le choix des couleurs contribue également pour une part importante la qualité de l’expérience utilisateur et à l’ergonomie.

Les couleurs et leurs symboliques

 

couleur-jaune

La couleur jaune
Elle est souvent associée au bonheur, à l’optimisme, la jeunesse, le jaune est une couleur vive qui peut donner de l’énergie à votre site internet. Cependant utilisez là avec modération car elle peut également symboliser la lâcheté et une qualité médiocre.

 

 

 

couleur-orange

La couleur orange
Couleur vibrante et pleine d’énergie, elle est souvent synonyme de communication, bonheur, joie, ambition, chaleur, enthousiasme. Sur votre site internet, elle peut attirer l’attention sur les boutons ou liens clés. Cette couleur est adaptée pour mettre en avant des promotions par exemple sur votre site e-commerce. Elle est souvent utilisée dans les secteurs de la technologie, l’industrie automobile, l’événementiel, la nourriture. Elle peut également avertir d’une situation dangereuse. Attention, à l’utiliser avec modération, elle peut « écraser » les autres contenus de vos pages de votre site internet !

 

 

couleur-rougeLa couleur rouge

Associée au désir, à l’amour, à l’énergie et au mouvement, elle l’est aussi à la violence, le feu, le danger, la colère. Vous pouvez utiliser le rouge par touches afin d’attirer l’attention mais n’en faites pas trop !

 

 

 

couleur roseLa couleur rose

Le rose est associé à la l’amour également, le romantisme, il est synonyme de douceur et il n’a pas de connotation négative liée à la violence. Cette couleur est souvent utilisée pour des sites internet ciblant la population féminine. Attention tout de même à ne pas en abuser sur votre site internet, ça pourrait faire niais.

 

 

couleur bleuLe Bleu

La couleur bleue est associée à la qualité, la fiabilité, le sexe masculin, la confiance, la sécurité, elle est souvent utilisée dans les banques, la médecine, la haute technologie, la science, les professions juridiques. Le bleu vif est énergisant et rafraîchissant. Concernant votre site internet, utiliser trop de bleu peut le rendre froid et distant.

 

 

 

couleur verteVert

Harmonieux, il équilibre le contenu de votre page. Il est associé également à la santé, mais aussi la croissance, le calme, la nature, la fertilité, la solidarité, l’énergie. L’œil perçoit facilement le vert. Cette couleur apporte un ressenti de calme et de zénitude sur la page de votre site. Cette couleur ne se prête pas à certains secteurs comme la technologie, le luxe.

 

 

 

violetViolet

Associé à la royauté, il est utilisé pour la créativité, l’autorité, la richesse, le pouvoir, l’imagination, la mystère, la sagesse. Le violet sombre peut créer sur votre site une sensation de luxe, quant au violet clair, il rappelle le printemps, la romance. Vous pouvez utiliser cette couleur sur votre site pour valoriser des cosmétiques, l’astrologie, le yoga, la spiritualité. Attention, cette couleur n’attire pas vraiment l’attention et le violet foncé peut rendre votre site distant.

 

 

marronMarron

Cette couleur chaude rappelle la nature, la terre, la fiabilité, la stabilité, l’amitié. Le marron peut être utilisé pour stimuler l’appétit, il rappelle le chocolat, le café. C’est une couleur choisie également dans les secteurs animalier, l’immobilier. N’utilisez pas cette couleur pour des éléments importants de votre page car il n’attire pas l’attention.

 

 

blancBlanc

Associé à la pureté, la vertu, la propreté, le bonheur, la sincérité. On l’utilise dans le milieu médical, l’industrie, le luxe, la haute technologie, la science. Il s’associe au noir, au gris, à l’argent, l’or. C’est une couleur pouvant être utilisé sur tous les types de site internet.

 

 

noirNoir

Cette couleur forte est associée à l’élégance, l’autorité, le pouvoir, la force, l’intelligence, la mort, le mystère, les produits cosmétiques. Attention, trop de noir peut paraître macabre.

 

 

 

grisGris

Associé au professionnalisme, au pragmatisme, le gris est un bon choix pour des sites internet professionnels, tels que les SPA, les bijoutiers. Il apporte une sensation équilibrée et relaxante. Ne pas trop l’utiliser pour éviter de paraître ennuyeux.

 

 

Quand les couleurs donnent l’ambiance

Au delà de la symbolique de telle ou telle couleur, l’association des couleurs entre elles déterminent l’ambiance générale d’un site internet.

Pour un site mettant en avant le « dynamisme », l’utilisation de couleurs complémentaires (couleurs diamétralement opposées sur le cercle chromatique) sera pertinente. Pour une ambiance plus « douce », favoriser l’unité et l’harmonie en utilisant plutôt des couleurs proches en les déclinant dans plusieurs nuances et tons différents.

Pour attirer l’attention de vos visiteurs, utilisez des couleurs chaudes comme le rouge, le jaune ou encore la couleur orange, elles évoquent la chaleur et suscitent de fortes réactions émotionnelles, à l’inverse les couleurs froides comme le vert, le bleu et le violet les diminueront et auront un effet apaisant.

couleurs-chaudes-et-froides-cercle-chromatique

Le cercle chromatique pour associer les couleurs

Une fois les couleurs de votre site internet choisies, il reste les bonnes teintes, les contrastes et les thèmes de colorimétrie à travailler pour votre site internet.

Le cercle chromatique que l’on doit à Monsieur Newton est précieux pour comprendre le mélange des couleurs. Le cercle chromatique est une représentation circulaire des couleurs ordonnées comme celle de l’arc-en-ciel. Il présente d’une manière simple l’enchaînement des couleurs primaires, secondaires et tertiaires.

Les couleurs primaires sont le rouge, le jaune et le bleu, ce sont les seules que l’on peut pas composer par un mélange d’aucune autre couleur, associées à parts égales elles forment le noir. Les couleurs secondaires sont obtenues à partir de l’association des couleurs primaires par deux.

couleurs-secondaires

Les couleurs primaires et secondaires

  • bleu + le jaune = vert
  • jaune + rouge = orange
  • bleu + rouge = violet
harmonie-couleurs-cercle-chromatique

Harmonie de couleurs complémentaires sur un cercle chromatique © TH | AntheDesign

Il est essentiel d’identifier les couleurs complémentaires des couleurs monochromatiques choisies. Les couleurs triadiques sont constituées de 2 couleurs complémentaires à égale distance avec la couleur de référence, ce qui forme un triangle équilatéral sur le cercle chromatique. Il est également possible de créer des harmonies avec des couleurs analogues voisines.

Astuce : Pour vous aider dan le choix des couleurs de votre palette, vous pouvez utiliser cet outil en ligne paletton.com.

Les standards, les codes et les langages des couleurs du web

Les couleurs utilisées dans l’affichage des pages web sont composées de plusieurs manières et souvent un outil de gestion des couleurs ou un autre logiciel graphique, est utilisé pour générer la valeur numérique de la couleur souhaitée.

Le RVB ou RGB (rouge, vert, bleu), système de codage basé à partir des couleurs primaires et destiné à la vidéo et aux écrans.

Le CMJN ou CMYK (cyan, magenta, jaune, noir), système de codage basé sur les procédés d’imprimerie permettant de reproduire un large spectre colorimétrique à partir des trois teintes de base auxquelles on ajoute le noir, on parle également de quadrichromie.

couleurs Quadrichromie

Quadrichromie CMJN ou CMYK (cyan, magenta, jaune, noir)

Le Html (codage de la couleur en hexadécimal), système de codage informatique des couleurs à partir du RVB utilisé pour le web, le potentiel de ce codage permet une palette de 16 777 216 couleurs à condition que tous les navigateurs, écrans… puissent les interpréter.

Des applications permettent de passer d’un système de codage à un autre tout en conservant une bonne fidélité des couleurs.

Le standard CSS (langage informatique décrivant la présentation des documents HTML et XML), propose différentes manières de définir les couleurs et notamment par un nom avec la notation décimale (convention d’écriture par laquelle on sépare des nombres en base 10 par des points pour faciliter la lecture) et la notation hexadécimale (système de numération positionnel utilisant 16 symboles, généralement des chiffres arabes, pour les dix premiers chiffres et les lettres A à F pour les suivants. Sources : Wikipédia).

Le standard CSS définit une notation RVB, dite « fonctionnelle », elle permet de définir les composantes de rouge, vert et bleu, en indiquant leur proportion relative en pourcentage ou bien en notation entière absolue. Chaque composante est un entier compris entre 0 et 255. Les navigateurs supportent plus de 140 noms de couleurs, mais elles ne font pas encore parties du standard CSS. C’est là qu’intervient le code RVB en notation hexadécimale. En indiquant les valeurs RVB, il est possible de définir plus de 16 millions de couleurs. Les couleurs sont représentées par une chaîne de caractères : ‘#RRVVBB’

couleurs-code-hexadecimal-css
RR, VV et BB représentent la valeur en hexadécimal, des composantes rouge, vert, bleu. Le langage HTML définit des noms pour un nombre limité de couleurs (les standards). C’est un format de données conçu pour représenter les pages web.

Pour conclure

Pensez à choisir les couleurs appropriées pour la création de votre site internet, les couleurs choisies doivent êtres utilisées de manière méthodique, le choix des bonnes couleurs sera l’une des clés de la réussite de votre projet. Une agence web sera à même de vous conseiller.

Vous avez des questions, contactez-nous !

Partager ce contenu