4 techniques simples pour choisir les couleurs de votre site web

par | Oct 11, 2017 | création de site

Dans le processus de création de votre site internet, il y a forcément un moment où vous vous posez la question du choix de vos couleurs ? C’est surement pour ceci que vous êtes là d’ailleurs héhé. Imaginez maintenant que ce choix de couleurs ait le pouvoir d’impacter et d’influencer votre visiteur à acheter ou à vous contacter. Que feriez-vous ? Vous liriez cet article attentivement, prendrez plus de 5 min pour choisir vos couleurs et vous avez raison 😌

Celà parait anodin et pourtant une étude Kissmetrics montre que pour 85% de la population, la couleur affecte l’achat d’un produit. Les couleurs ont un impact émotionnel et interviennent dans nos décisions par leurs significations.

Vous allez me dire ok, Quelle est leur signification ? Comment je les choisis ? ou encore Comment j’organise mon site avec ces couleurs ? Vos questions me semblent PAR-FAITES puisque c’est ce que nous allons voir dans la suite de l’article.

… et si vous n’êtes pas convaincu imaginez que l’on vous vend du Bio. Preférez-vous un packaging vert ou rouge ?! 

Étape 1 : Définir vos couleurs selon leur signification

En pensant aux valeurs et idéologies que représentent les marques ci-dessous (Apple, Coca Cola ou encore Bein Sport) on se rend compte de l’importance de la couleur pour l’image de la marque.

Choisissez 2 couleurs principales correspondant à l’image que vous souhaitez donner de votre société.

Blanc

  • pureté
  • bonheur
  • jeunesse
  • encourageant

Noir

  • formalité
  • luxueux
  • secret
  • glamour

Gris 

  • impartial
  • compromis
  • maturité
  • sophistiquée

Jaune 

  • chaleur
  • bonne humeur
  • optimisme
  • humour

Orange

  • revigorant
  • plaisir
  • créativité
  • énergie

Rouge

  • passion
  • colère
  • vigueur
  • vitesse

Vert

  • nature
  • équilibre
  • croissance
  • rafraîchissant

Rose

  • protection
  • chaleur
  • amical
  • léger

Bleu

  • connaissance
  • tranquilité
  • sécurité
  • confiance

Marron

  • terre à terre
  • sérieux
  • bien pensé
  • confiance

Violet

  • royal
  • sagesse
  • spiritualité
  • autorité

Étape 2 : Construire sa palette de couleur

Définition préalable : Une palette de couleur représente l’ensemble des couleurs utilisées sur votre site internet.

L’objectif de l’utilisation d’une palette permet d’être cohérent dans la création de vos pages et le choix de vos visuels afin de le transformer en un puissant outil de conversion. Voici 4 astuces de bases pour clarifier vos choix de couleurs :

1- choisir une dominante

Dans la palette que vous allez déterminer, vous aurez forcément des couleurs claires et foncées. Mais le premier choix à faire est celui du fond de votre site web. Avec une dominante claire ou foncée.

Foncée : Élégance, luxe, sophistification

Claire : Simplicité, pureté, jeunesse

2- reprenez les couleurs de votre logo

Votre logo a un rôle à jouer dans le choix de vos couleurs. Ça parait évident, mais il est important de le préciser.

Afin de créer une harmonie, il est nécessaire de reprendre la ou les couleurs présentes sur votre logo.

3- ayez assez de contraste

C’est le meilleur conseil que l’on peut vous donner !

Créez un contraste suffisant entre vos couleurs de fond et de texte. Votre contenu sera plus lisible pour vos visiteurs. Sans ça personne ne pourra vous lire et votre audience se réduira.

4- jouer sur les nuances et l’équilibre

Pour un bon équilibre, utilisez les couleurs neutres de votre palette plus régulièrement puis celles plus vives afin d’accentuer le contenu que vous offrez. N’hésitez pas à tester différentes nuances d’une même couleur, qui peuvent être à la fois neutre ou vive. 

Pour créer une belle harmonie vous pouvez utilisez un l’outil gratuit : Coolors.co, générateur de palette qui vous permet de créer la votre en bloquant les couleurs qui vous intéresse via le cadenas. Cliquez sur la barre d’espace pour renouveler les autres couleurs.

Combien de couleurs à déterminer ?

Votre site n’est pas un sapin de Noel et vous ne travaillez pas chez Desigual non plus. C’est pourquoi il faudra définir un nombre de couleurs. Dans son livre “The Handbook of Computer-Human Interaction” Martin Helander recommande de 2 à 5 couleurs pour réaliser la palette de votre site web. Chez Pop Startup, nous préconisons 4 ou 5 couleurs pour couvrir les éléments de votre site.

L’idée est d’attribuer une fonction à chaque couleur, pour créer une cohérence graphique et un cadre logique chez votre visiteur. Avec des titres, textes ou liens d’une couleur définie.

  • 2 couleurs de fond : Pourquoi deux ? Afin de délimiter les sections de votre site et varier les tons pour que votre visiteur ne s’ennuit pas.
  • 1 couleur de texte : La couleur du texte doit être en opposition avec la couleur de fond. En cas de fond clair, prenez une couleur de texte foncé (et vice versa) afin de créer un contraste et d’optimiser la lecture.
  • 1 couleur de CTA et lien : La couleur des liens et CTA (appel à l’action/bouton) créez le dynamisme et l’interactivité de votre site puisque c’est à ces endroits que le visiteurs aura de l’action. Soyez sur de choisir une couleur vive qui sort du lot afin d’être reconnaissable partout.
  • 1 couleur bonus pour les touches finales : Vous devriez également choisir une autre couleur qui sort du lot mais bien moins excentrique que celle de votre CTA. De cette manière votre CTA sera l’information principale sur laquelle votre visiteur sera concentré.

Donne vie à tes couleurs en téléchargeant gratuitement notre charte graphique à compléter !

  • document type couleurs hexadécimal
  • document type polices de caractère
  • utile
  • partageable
  • format Google sheets

+ inclus dans ton pack CSW

Pages : Construisez les textes de votre site

Swag Doc : Définisez le style de votre site

Exemple avec Pop Startup

Sachant qu’une image vaut 1000 mots, voici la capture d’écran de la page d’accueil du site Pop Startup. Vous pouvez retrouvez les éléments mis en avant précédemment. Décortiquons ensemble nos 3 couleurs majoritaire :

Le blanc #ffffff

Couleur de fond du site ; Cela représente des valeurs positives tel que l’équilibre, le calme et la sérénité. Des qualités nécessaires à faire ressentir au client lorsqu’il est en période de création.

Ceci donne également une certaine fraicheur et un côté épuré à l’agence.

Le orange #f6a831

Couleur des call to action et des liens ; Tout d’abord on retrouve du orange dans le logo de l’agence, ce qui implique de le retrouver dans le site.  

Il s’adapte parfaitement avec la thématique « jus de fruit » du site et donne de l’énergie et un côté plaisir, c’est deux aspects doivent donner envie au visiteur de cliquer sur les liens proposés.

Le choix du orange est également lié à la créativité, qui pour une agence de web design est essentielle.

Le bleu #1d84d4

Couleur des touches finales ; La connaissance et la sécurité sont 2 éléments indispensables pour la création d’un site au niveau technique. A celà s’ajoute la notion de confiance qu’implique le bleu, nécessaire car c’est son image digitale que l’on donne à représenter.

choisir les couleurs de son site web
Comme vous pouvez le voir, le choix des couleurs est essentiellement lié a l’activité et aux valeurs de votre société. Le visiteur de votre site sera implicitement baigné dans l’ambiance que vous lui proposerez.

Couleur Hexadécimal / Les couleurs sur le web

Sur internet, notamment en HTML et CSS, les couleurs sont définies par un code héxadécimal, composé d’un # et de 6 caractères. Ce code représente la valeur des couleurs primaires Rouge, Vert et Bleu (#RRVVBB) avec lesquels il est possible de recréer l’ensemble des couleurs. A vous le taupe (#B38B6D) et l’émeraude (#3EB5A5) 😌

Outil utile pour connaitre les codes : http://www.code-couleur.com/

Etape 3 : Configurer vos couleurs sur le thème Divi

Typographie

Paramètres de mise en page

Fond

Barre de Menu Primaire

Votre palette de couleur est définie. Il ne vous reste plus qu’à l’ ajouter à votre site web.

Si vous utilisez le thème Divi comme Pop Startup, vous pourrez paramétrer vos couleurs afin de les retrouver automatiquement lorsque vous créer de nouveaux contenus.

Pour cela rendez-vous dans votre tableau de bord WordPress puis dans les options du thème Divi. En scrollant, vous trouverez la configuration de la palette de couleur.

Désormais il reste à assigner les couleurs à vos titres, corps du texte, menu, lien etc…. Cliquez dans le Personnaliseur de thème dans votre barre de navigation. Sélectionnez l’onglet Paramètres généraux.

Dans Typographie, vous pourrez choisir les couleurs des liens, corps du texte et de vos en-tête (titre H1). Dans Paramètres de mise en page, vous pourrez configurer la couleur d’accent du thème. Dans Fond, la couleur d’arriere plan de votre site. Dans Barre de menu primaire, ce sont les couleurs de votre menu que vous pourrez configurer.

Retrouvez sur votre gauche, les captures d’écran de ces différents paramétrages.

Conclusion

Maintenant que vos couleurs sont définies et configurées, il ne vous reste plus qu’à vous imprégnez de ces couleurs. Dès lors que vous créez un nouveau contenu, vous aurez plus de choix colorimétrique afin de faire vivre une expérience complète a votre visiteur. Ce qui engagera davantage celui-ci à vous contacter…

Source : Elegant Theme, Kissmetrics, photo by Scott Webb via Unsplash

Share This