Choisir les couleurs de son site web n’est pas anodin dans la réussite de votre stratégie digitale.

En effet, cela sera la première chose que les internautes remarqueront lorsqu’ils visiteront votre site web, et votre combinaison de couleurs influencera de façon positive ou négative leurs premières impressions. 

Cela aura, de fait, un impact énorme sur votre taux de rebond et sur votre taux de conversion.

Découvrez, sans plus tarder, la théorie des couleurs (type de teintes et de modèles colorimétriques, les associations possibles et leurs significations) pour comprendre leurs importances dans votre stratégie web marketing. 

Sommaire

Qu'est-ce qu'une couleur ?

La couleur n’est pas une matière, mais juste la perception visuelle du reflet de la lumière d’un objet ou d’une surface qui atteint la rétine.

La rétine est composée de deux récepteurs :

  • Les bâtonnets permettant de voir les différences de la lumière.
  • Les cônes permettant de distinguer les couleurs.

Les cônes, au nombre de trois, détectent respectivement la couleur bleue, la couleur rouge et la couleur verte.

Chaque couleur que l’on aperçoit dépend de sa longueur d’onde.

Couleur
Couleur

Quelles sont les différentes familles de couleurs ?

Selon les principes de base de la théorie des couleurs, Il n’existe pas une, mais trois familles de couleurs :

1 : Les primaires.
2 : Les secondaires.
3 : Les tertiaires.

1. Les couleurs primaires

Les couleurs primaires sont les couleurs de base à partir desquelles toutes les autres (secondaires et tertiaires) sont obtenues en les mélangeant.

En revanche, elles ne peuvent jamais être le résultat d’un mélange de couleurs. 

Les couleurs primaires, dans le mode colorimétrique CMJN, sont au nombre de trois :

  • Cyan.
  • Magenta. 
  • Jaune.  

Dans le modèle colorimétrique RVB, les couleurs primaires de la lumière sont le rouge, vert et bleu.

Couleurs primaires
Couleurs primaires CMJN

2. Les couleurs secondaires

Les couleurs secondaires sont le résultat d’un mélange de deux couleurs primaires en quantité égale.

Dans le mode colorimétrique CMJN, elles sont, aussi, au nombre de trois :

  • Cyan et magenta = Bleu
  • Magenta et jaune = Rouge
  • Jaune et cyan = Vert.

Dans le modèle colorimétrique RVB, les couleurs secondaires de la lumière sont le cyan, jaune et magenta.

Couleurs secondaires CMJN
Couleurs secondaires CMJN

Avez-vous remarqué que les couleurs secondaires CMJN sont les couleurs primaires RVB et inversement ?

3. Les couleurs tertiaires

Les couleurs tertiaires sont le résultat d’un mélange, en quantité égale, d’une couleur primaire et d’une couleur secondaire.

Voici, par exemple dans le mode colorimétrique RYB, les couleurs tertiaires, au nombre de six :

  • Jaune + Orange  = Jaune orangé.
  • Bleu + Violet = Violet bleuté.
  • Orange + Rouge = Rouge orangé.
  • Bleu + Vert = Vert bleuté.
  • Rouge + Violet = Rouge violacé.
  • Jaune + Vert = Jaune verdâtre.

Toutes ses nuances de couleurs (primaires, secondaires et tertiaires) ont été disposées graphiquement par Johannes Itten, dans un cercle chromatique.

Couleurs tertiaires
Couleurs tertiaires - Cercle chromatique de Johannes Itten

Qu'est-ce qu'un modèle colorimétrique ?

Une image est définie par sa résolution (en nombre de pixels) et par son modèle colorimétrique.

Ce dernier permet de créer, définir et de visualiser ses couleurs.

Il existe principalement quatre modèles colorimétriques :

  1. CMJN.
  2. RVB.
  3. RYB.
  4. TSL.

1. Modèle colorimétrique CMJN

Utilisé dans le domaine de l’impression (affiches, flyers, cartes de visites, …), le modèle colorimétrique CMJN est composé de 3 couleurs primaires : Cyan, Magenta, Jaune, auquel a été rajouté la couleur Noire.
D’où l’expression courante « imprimer en quadrichromie ».

Les valeurs de ses teintes, exprimées en pourcentage, sont comprises entre 0 et 100.

Le CMJN (ou en anglais CMYK) est une synthèse soustractive, car la couleur est obtenue par la soustraction de lumière.

Explication : en imprimerie, on part toujours du blanc pour aller vers le noir.
Par exemple : si vous passez une première couche d’encre de couleur primaire (cyan) sur une feuille blanche, celle-ci va devenir plus foncée.
Rajoutez-lui une deuxième couche de couleur primaire (magenta), votre feuille deviendra encore plus foncée, et ainsi de suite.

La superposition des 3 couleurs primaires (cyan, jaune et magenta) donnera une couleur noire.

Conclusion, à chaque ajout de couleur, on soustrait de la lumière.

Bon à savoir : on rajoute la couleur noire aux trois couleurs primaires, car leur superposition n’offre pas un pigment noir parfait. 

Roue chromatique CMJN
Modèle colorimétrique CMJN.

2. Modèle colorimétrique RVB

Dans le domaine du web ou plus précisément sur des écrans (ordinateurs, télévisions, scanners, caméras vidéo, appareils photo numériques, …), on utilise, pour produire des couleurs sur ces derniers, un modèle colorimétrique RVB composé de 3 couleurs primaires de la lumière : Rouge, Verte et Bleue, usuellement nommé trichromie.

La valeur de l’intensité lumineuse de chaque sous-pixels RVB qui compose un pixel d’une image numérique varie de 0 (noir) à 255 (blanc).

En faisant toutes les combinaisons possibles de mélanges de ses 3 couleurs primaires, on obtient plus de 16 millions de couleurs différentes.  

Le RVB (ou en anglais RGB) est une synthèse additive, car la couleur est obtenue par l’addition des lumières de chacune.

Explication : dans le digital, on part toujours du noir pour aller vers le blanc.
Par exemple, sur un fond noir, si vous lui projetez une source lumineuse primaire (verte), celui-ci sera plus clair.
Projetez-lui une deuxième source lumière primaire (bleue), le fond noir sera encore plus clair, et ainsi de suite.
Et la superposition des sources lumineuses créera une nouvelle couleur plus claire (vert bleuté dans l’exemple). 

La superposition des 3 lumières primaires (rouge, vert et bleu) donnera une couleur blanche.

Conclusion : à chaque ajout de couleur, on rajoute de la lumière.

Bon à savoir : les couleurs qui s’affichent sur votre écran d’ordinateur ne seront jamais exactement les mêmes que celles qui seront imprimées.

Roue chromatique RVB
Modèle colorimétrique RVB

3. Modèle colorimétrique RYB

Dans le monde de la peinture, des artistes et des designers, on utilise le modèle colorimétrique RYB (Red, Yellow, Blu).

Les 3 couleurs primaires sont le rouge, le jaune et le bleu.

Les couleurs secondaires étant l’orange, vert et le violet.

Rouge et jaune = Orange
Jaune et bleu = Vert
Bleu et rouge = Violet.

Le RYB utilise la roue chromatique d’Itten car elle est considérée, à juste titre, la meilleure pour identifier les couleurs qui se marient bien ensemble.

Cercle chromatique Itten
Roue chromatique d'Itten

4. Modèle colorimétrique TSL

Dans le monde du graphisme, on utilise le modèle colorimétrique TSL (Teinte, Saturation, Luminosité) car il est basé sur la perception humaine de la couleur.

Le TSL (ou en anglais HSL) est très pratique pour l’ajustement des couleurs utilisées ou la retouche d’image, car chaque teinte peut être travaillée sur trois paramètres :

La teinte : définit la dominante de couleur.
Elle est mesurée par un angle de 0 à 360° sur la roue chromatique, et correspond à la longueur d’onde de la couleur.

La saturation : mesure l’intensité, la pureté de la couleur.
Baisser la saturation revient à ajouter du blanc dans la couleur et la fera, donc, tirer vers le gris.
Elle est mesurée sous la forme d’un pourcentage allant de 0 (gris) à 100 (couleur intense).

La luminosité : mesure la clarté de la couleur.
Baisser la luminosité revient à ajouter du noir, et assombrira, voire à éteindre, la couleur.
Elle est mesurée sous la forme d’un pourcentage allant de 0 (noir) à 100 (blanc).

Modèle colorimétrique TSL

Quels sont les codes couleur HTML ?

Pour pouvoir personnaliser (cadre, bouton, typographie, …) votre site vitrine ou votre site e-commerce que cela soit sous le CMS WordPress, Shopify, ou Prestashop, il faudra connaître impérativement les codes couleurs HTML afin de pouvoir les indiquer dans votre sélecteur de couleur.

Les couleurs HTML (HyperText Markup Language) sont définies à l’aide d’un code hexadécimal de RVB (Rouge, Vert, Bleu), communément appelé code HEX.

Ce code HEX se présente sous la forme # complétée de 6 caractères composés de chiffres (de 0 à 9) et/ou de lettres (de A à F).

  • Le  symbole # indique qu’il s’agit d’une couleur HTML.
  • Les 2 premiers caractères indiquent l’intensité de la couleur rouge.
  • Les 2 caractères du milieu indiquent l’intensité de la couleur verte.
  • Les 2 derniers caractères indiquent l’intensité de la couleur bleue.

En jouant sur leurs intensités, vous pouvez obtenir une palette de couleurs quasi-infinie.

Codes couleur HTML

Comment trouver le code couleur HTML ?

Vous cherchez à savoir le code HEX d’un coloris sur une palette de couleur ou vous avez repéré sur un site internet une couleur qui vous plait et vous voudriez connaitre son code HTML pour le tester, par exemple, sur votre site WooCommerce.

Pas de soucis, il existe des outils gratuits pour cela.

Connaître le code HEX d'un coloris sur une palette de couleurs

Pour prendre connaissance du code HEX d’une ou plusieurs couleurs sur un nuancier, vous pouvez utiliser encycolorpedia.

Cet outil va vous afficher directement la palette ou est inscrit sur chaque couleur :

  • Son nom.
  • Son code HEX.

De plus, en cliquant sur une couleur, vous obtiendrez de multiples informations très précieuses, telles que :

  • Sa nuance.
  • Sa composition en % dans le modèle colorimétrique RVB.
  • Sa composition colorimétrique TSL.
  • Sa longueur d’onde.
  • Ses couleurs complémentaires.
  • Des simulations de daltonisme (monochromie, dichromatie, trichromie).
Encycolorpedia
Encycolorpedia

Connaître le code HEX d'une couleur sur un site web

Pour connaître le code HEX d’une couleur sur un site web, vous pouvez installer une extension Google Chrome : Colorzilla.

 Il vous suffira d’amener le pointeur de votre souris (qui fera office de pipette) sur la couleur et en cliquant dessus avec le bouton gauche, le code HEX sera automatiquement copié.

Ensuite, vous lancerez Encycolorpedia et vous collerez (CTR+V) ce code HTML afin d’obtenir toutes les informations souhaitées.

Si vous ne savez pas ou trouver et comment installer une extension Google Chrome, lisez mon guide d’installation.

Extension Google Chrome Colorzilla

Comment associer les couleurs ?

Connaître le type de couleurs et leur code HTML est une bonne chose, mais encore faut-il savoir les associer ensemble pour créer une belle harmonie de couleurs sur votre site internet et avoir un impact positif sur votre visiteur.

Pour combiner judicieusement les teintes entre elles et donc rendre agréable l’expérience utilisateur (UX) , il faut toujours partir de la base de la théorie des couleurs qu’est la roue chromatique.

Cette dernière est connue sous le nom de cercle chromatique d’Itten.

Celui-ci est une organisation illustrative des couleurs autour d’un cercle montrant :

  • Les trois couleurs primaires dans le triangle central.
  • Les trois couleurs secondaires sur les côtés du triangle central.
  • Les trois couleurs primaires, les trois secondaires et les six tertiaires dans le cercle extérieur.

Johaness Itten était un peintre suisse et enseignait dans des écoles réputées d’arts appliqués.
En 1961, il a écrit, un ouvrage référence « L’art de la couleur » et créé son célèbre cercle chromatique.

Cercle chromatique Itten
Cercle chromatique d'Itten

Chaque couleur à sa personnalité, d’où l’intérêt d’effectuer une bonne combinaison de couleurs pour ne pas transmettre un message erroné à l’internaute qui visite votre site WordPress.

Les couleurs fonctionnent parfaitement lorsqu’elles sont en harmonie les unes avec les autres.

Il existe 5 principaux types d’harmonies de couleurs dans la roue chromatique :

  1. Les complémentaires.
  2. Les chaudes et froides.
  3. Les analogues.
  4. Les triadiques.
  5. Les monochromatiques. 

1. Les couleurs complémentaires

En colorimétrie, les couleurs complémentaires, qui se trouvent à l’opposé sur la roue chromatique, vous garantissent d’obtenir le niveau de contraste le plus élevé possible.

La règle des couleurs complémentaires est la suivante :

  • Le complément d’une primaire est une couleur secondaire, et vice-versa.
  • Le complément d’une tertiaire est une autre couleur tertiaire.

Voici quelques exemples :

  • La teinte complémentaire du bleu est l’orange. 
  • La teinte complémentaire du rouge est le vert.

Une paire complémentaire comprendra toujours une couleur chaude et une couleur froide.

Sur un site web, les couleurs opposées vous permettent de :

  • Créer des impacts visuels avec des contrastes forts.
  • Dynamiser une association de couleurs. 
  • Attirer l’attention de vos visiteurs sur des éléments importants (boutons, prix, CTA, …). 
Couleurs complémentaires
Couleurs complémentaires

2. Les couleurs chaudes et froides

La roue des couleurs est divisée en 2 parties en fonction de la sensation, de l’émotion qu’elle provoque sur l’internaute :

  • Les couleurs chaudes : jaune, orange et rouge.
  • Les couleurs froides : bleu, vert et violet.

Les teintes chaudes sont généralement associées à la lumière du soleil, la chaleur, l’énergie, la passion, le bonheur, ….

Les teintes froides, plus apaisantes, sont, quant à elles, associées au froid, la fraicheur, la mer, le repos, le calme, …

Couleurs froides et chaudes
Couleurs chaudes et froides

3. Les couleurs analogues

Les couleurs analogues se composent d’une combinaison de trois nuances côte à côte sur la roue chromatique.

Elles permettent :

  • D’offrir à vos visiteurs un confort visuel.
  • De rassurer.
  • D’apaiser.
  • De créer un site internet moderne et sophistiqué à la fois.
Couleurs analogues
Couleurs analogues

4. Les couleurs triadiques

Les couleurs triadiques se composent de trois nuances qui sont à égale distance les unes des autres sur la roue chromatique. 

Le schéma triadique permet :

  • Un contraste tout en étant plus équilibré que les couleurs complémentaires.
  • Une grande dynamique.
Couleurs triadiques
Couleurs triadiques

5. Les couleurs monochromatiques

Les couleurs monochromatiques, connues sous le nom de camaïeu, sont celles composées d’une seule couleur, mais dans divers teintes et nuances. 

Les teintes plus claires sont obtenues en rajoutant du blanc.
Les nuances plus foncées sont obtenues, quant à elles, en rajoutant une couleur plus foncée (grise ou noire).

Le schéma monochromatique permet une cohérence visuelle avec un design équilibré.

Couleurs monochromatiques
Couleurs monochromatiques

Combien de couleurs sur un site web ?

Afin d’éviter que votre site web ne fasse un « effet arc-en-ciel », il faut que votre combinaison de couleurs soit équilibrée et professionnelle.

Pour cela, il faudra limiter votre palette de couleurs à 3 teintes (à l’exclusion du noir et du blanc) :

  • Une couleur principale (généralement l’arrière-plan).
  • Une couleur secondaire (pour le contraste) ou une couleur analogue (pour le côté relaxant).
  • Une couleur complémentaire (à utiliser sur les boutons, prix, liens, CTA (Call To Action), …).

Si l’on prend comme exemple ma page de mes tarifs SEO : j’utilise un bleu moyennement foncé comme couleur principale, un bleu plus clair comme couleur analogue (pour le côté apaisant), et orange comme couleur complémentaire (pour mes boutons et mes prix).

La règle des 60-30-10

Pour ne faire pas d’erreur en web design et obtenir un aspect harmonieux et professionnel, votre site internet doit respecter la règle 60-30-10.

La surface de votre page web devrait être recouverte dans cette proportion :

  • 60% par la couleur primaire.
  • 30% de la couleur secondaire.
  • 10% pour la couleur complémentaire.

Quelle est la signification des couleurs ?

Pour réussir votre communication digitale, il ne suffit pas d’avoir un beau graphisme ou de choisir une belle combinaison de couleurs pour donner confiance aux internautes.

Non, il faut savoir véhiculer le bon message aux bonnes personnes.
En effet, chaque couleur à une signification qui amène une sensation, une émotion spécifique, et ne pas connaître la psychologie des couleurs risque de ruiner tous vos efforts marketing, car vous allez passer à côté de votre clientèle cible.

Par exemple, une palette de couleurs parfaite pour un site de gaming ne conviendra sûrement pas à un site de yoga.

C’est identique si vous créez un site web à destination des hommes (par exemple produits à barbe) et que vous utilisez une couleur rose qui est purement une teinte féminine.

Découvrons ensemble la symbolique des couleurs principales et dans quel secteur d’activité sont-elles utilisées.

Rouge

Le rouge est une couleur chaleureuse et énergique.
Cette teinte attire l’œil humain et est très souvent utilisée pour les appels à l’action (CTA).

Significations

  • Energie : Action, colère, excitation, force, pouvoir, puissance, etc.
  • Passion : Amour, désir, émotion, luxure, sensualité, etc.
  • Danger : Agression, feu, interdiction, sang, urgence, etc.
  • Aliments : Betterave, cerise, fraise, piment, poivron, radis, tomate, etc.

Secteurs d'activité

  • Restauration (Pizzerias, fast-food, boissons énergisantes, aliments épicés, …).
  • Entreprises agroalimentaires.
  • Érotisme.
  • Séduction.
  • Matériel contre l’incendie et équipements anti-feu.
  • Automobile.
  • Publicité.

Vert

Le vert est la couleur apaisante et rafraichissante.

Significations

  • Nature : Croissance, fertilité, fraîcheur, renouveau, etc.
  • Sécurité : Espérance, guérison, santé, etc.
  • Connotations positives : Calme, confiance, stabilité, tranquillité, etc.
  • Aliments : Brocolis, choux de Bruxelles, épinard, matcha, petit-pois, poivron, etc.
  • Connotations négatives : Échec, immaturité, infortune, etc.

Secteurs d'activité

  • Nature (environnement, agriculture, …).
  • Écologie (marques écologiques, produits naturels, produits de nettoyage…).
  • Énergie renouvelable.
  • Finance (assurance, crédit).
  • Santé (bien-être, herboristerie, médecines alternatives, …).
  • Restauration végétarienne.
  • Ressources humaines.

Bleu

Le bleu est une couleur apaisante et universellement appréciée.

Significations

  • Mer : Eau, fraîcheur, océan, profondeur, richesse, etc.
  • Ciel : Paix, paradis, rêve, sérénité, etc.
  • Connotations positives: Confiance, fiabilité, intelligence, sécurité, sérieux, stabilité, etc. 
  • Connotations négatives : Dépression, froideur, mélancolie, silencieux, etc.

Secteurs d'activité

  • Nouvelles technologies (informatique, digital, réseaux sociaux, …).
  • Juridiques.
  • Finances (banques, services bancaires, …).
  • Voyages.
  • Aéronautique.
  • Santé.
  • Propreté.
  • Services (coaching de vie, comptabilité, …).

Jaune

Le jaune est une couleur joyeuse et chaleureuse.

Significations

  • Énergie : Chaleur, clarté, lumière, soleil, etc.
  • Connotations positives : Amitié, bonheur, confiance, fête, gaieté, jeunesse, joie, etc.  
  • Connotations négatives : Anxiété, égoïsme, jalousie, mensonge, trahison, etc.

Secteurs d'activité

  • Commerce de jouets pour enfants.
  • Activités de loisirs.
  • Voyages (destination ensoleillée).
  • Immobilier.
  • Arts.

Noir

Le noir est une couleur d’autorité et de tristesse.

Significations

  • Autorité : Formalité, pouvoir, puissance, sobriété, etc.
  • Tristesse : Décès, peur, souffrance, etc.
  • Luxe : Élégance, haut de gamme, qualité, etc.

Secteurs d'activité

  • Luxe.
  • Design.
  • Maroquinerie.
  • Photographie.
  • Produits haut de gamme.

Gris

Le gris est une couleur conservatrice.

Significations

  • Connotations positives : Douceur, élégance, fiabilité, sécurité, etc.
  • Connotations négatives : Mélancolie, monotonie, solitude, tristesse, etc.

Secteurs d'activité

  • Immobilier.
  • Design.
  • Technologie.

Blanc

Le blanc est une couleur de pureté.

Significations

  • Connotations positives : Bonté, innocence, propreté, pureté, sophistication, virginité, etc.

Secteurs d'activité

  • Mariage.
  • Produits high tech.
  • Santé (perte de poids, produits médicaux).

Rose

Le rose est une couleur jeune et romantique.

Significations

  • Connotations positives : Affection, amour, douceur, féminité, gentillesse, jeunesse, tendresse, etc. 
  • Connotations négatives :  Égocentrisme, illusion, teinte réservée aux filles, etc.

Secteurs d'activité

  • Alimentation : confiseries, pâtisseries.
  • Produits de beautés pour femmes.
  • Lingerie.

Violet

Le violet est une couleur relaxante et mystérieuse.

Significations

  • Connotations positives : Élégance, énigmatique, imagination, méditation, rêve, spiritualité, etc. 
  • Connotations négatives : Mélancolie, nostalgie, solitude, etc.

Secteurs d'activité

  • Yoga.
  • Beauté.
  • Cosmétique pour femmes.
  • Site de magie.
  • Site de diseuse de bonne aventure.
  • Site de spiritualité.
  • Communication.
  • Publicité.

Orange

L’orange est une couleur chaleureuse et joyeuse.

Significations

  • Connotations positives : Communication, convivialité, créativité, dynamisme, optimisme, tonicité, etc. 
  • Aliments :Carotte, citrouille, orange, piment, potimarron, etc.
  • Connotations négatives : Fatigue, jalousie, méfiance, paresse, etc.

Secteurs d'activité

  • Services technologiques.
  • Sports extrêmes.
  • Agences de voyages.
  • Salle de sports et de fitness.
  • Restauration.

Marron

Le marron est une couleur rassurante.

Significations

  • Connotations positives : Douceur, volupté, neutralité, nature, etc. 
  • Aliments : Cacao, café, noix de coco, amande, datte, etc.
  • Connotations négatives : Saleté, déjection, boue, etc.

Secteurs d'activité

  • Commerce de chocolats, cafés, CBD..
  • Nature (Terre, bois).
  • Développement durable et écologie.
  • Agriculture.

Quels outils pour choisir votre palette de couleurs ?

Maintenant que vous avez compris les bases de la théorie des couleurs, il est temps de passer à la pratique.

Pour vous aider à trouver vos combinaisons de couleurs, ils existent une multitude de ressources gratuites ou payantes.
Voici une liste non-exhaustive de générateurs de palettes de couleurs, mais qui sont pour moi, parmi, les meilleurs :

Color Adobe
Color Adobe

Conclusion

Voilà, nous arrivons à la fin de cet article qui a mis l’accent sur l’importance des couleurs sur votre identité visuelle et sur vos performances. 

Je conclurais en disant qu’il ne faut jamais faire un choix des couleurs selon vos préférences, mais plutôt selon le message que vous voulez véhiculer et selon votre clientèle-cible.

Si vous avez aimé cet article sur la théorie des couleurs et savoir comment choisir les couleurs de son site web, laissez-moi un petit commentaire.

Laisser un commentaire