Lorsqu’une personne arrive pour la première fois sur votre site web, la couleur joue un rôle important dans ce qu’elle pense. Selon une étude, entre 62 et 90 % de la première impression des consommateurs se fonde uniquement sur le choix des couleurs.
Choisir des couleurs qui correspondent à votre marque – et à ce que vous voulez que vos consommateurs pensent de votre entreprise et de vos produits – peut être un puissant outil de stratégie de marque et de marketing.
Dans cet article, nous aborderons plus de 25 palettes de couleurs fantastiques pour les pages d’atterrisage (landing pages) , le eCommerce et les sites personnels, et nous expliquerons comment vous pouvez choisir les vôtres sans perdre de temps.
Comment choisir les palettes de couleurs de votre site web
Les yeux d’un adulte humain peuvent voir plus de 1,000,000 de couleurs distinctes. Comment choisir rapidement et efficacement le bon schéma de couleurs avec toutes ces options ? C’est le défi que doivent relever tous les concepteurs de sites web qui essaient de créer de toutes pièces un schéma ou une palette de couleurs pour leur design.
Avec autant de choix, vous ne pouvez pas évaluer toutes les nuances et les teintes individuellement et choisir les plus appropriées sans un point de référence. Vous devez réduire le nombre de vos options. La meilleure façon de commencer est de trouver une couleur primaire comme point de départ.
La meilleure façon de procéder est peut-être d’examiner les choix les plus populaires du secteur. Cela peut vous aider à apprendre quelque chose sur la psychologie de la couleur et sur les couleurs primaires qui pourraient bien fonctionner pour votre entreprise ou votre produit.
Choix des couleurs par secteur d’activité
Différentes entreprises et différents produits choisissent des couleurs différentes pour identifier leur marque. Mais pourquoi ? La couleur n’est pas seulement un moyen plus efficace d’attirer l’attention de vos prospects et consommateurs. C’est un moyen de communiquer avec eux à un niveau émotionnel, presque subconscient.
En un sens, c’est une façon de commencer à construire votre marque dans l’esprit du consommateur avant d’utiliser un seul mot ou une seule phrase de texte. Aucune couleur ne raconte la même histoire au consommateur, c’est pourquoi les couleurs primaires les plus populaires de la marque dépendent d’une industrie à l’autre.
Quelle émotion voulez-vous que les clients potentiels associent à votre marque, votre produit ou votre service ?
C’est la question directrice qui devrait vous aider à identifier votre couleur primaire pour votre palette.
Bleu :
Dans les secteurs où la confiance des consommateurs est plus importante que tout autre facteur, et où le professionnalisme et la fiabilité sont des arguments de vente clés, le bleu est souvent utilisé comme couleur de marque principale.
Cela ne fait pas appel à la spontanéité ou à l’émotion. Au contraire, cela initie un processus de décision calme et logique.
Le plus souvent dans les secteurs suivants :
- Banque
- Compagnies aériennes
- Communications
- Financement de consommation
- Services d’électricité
- Équipement lourd
- Rénovation de la maison
- Hôtels
- Produits pharmaceutiques
Rouge :
Les activités qui reposent sur les émotions et les décisions impulsives (comme les restaurants et les fast-foods), utilisent souvent le rouge comme couleur primaire. On pense que le rouge stimule la faim, c’est donc un choix favori parmi les marques alimentaires internationales.
Le plus souvent dans les secteurs suivants :
- Restaurants
- Boissons
- Commerce de détail alimentaire
- Immobilier
- Vêtements
Vert :
La plupart des gens associent la couleur verte à la nature, aux plantes et aux environnements vivants et réparateurs. Les industries qui s’appuient sur la promesse d’un meilleur bien-être ou sur des produits contenant des ingrédients entièrement naturels, choisissent souvent le vert.
Le plus souvent dans les secteurs suivants :
- Nourriture et boissons
- Grands magasins
- L’immobilier
- Produits chimiques
Noir : Confiance, Sophistication
Si certaines entreprises choisissent par défaut le noir au lieu de choisir une couleur spécifique, c ‘est parce qu’il est plus sûr, c’est aussi un choix de premier plan dans les secteurs où la confiance ou la sophistication du consommateur est un facteur clé.
Le plus souvent dans les secteurs suivants :
- Vêtements
- Accessoires
- Fournisseurs de services Internet et mobiles
- Grands magasins
- Hôtels
Ne suivez pas aveuglément vos goûts et vos instincts, prenez en compte la théorie et la psychologie des couleurs lorsque vous prenez votre décision.
Combien de couleurs faut-il utiliser sur un site web ?
Pour un schéma de couleurs standard de site web, vous pouvez choisir entre trois à sept couleurs différentes dans un schéma ou une palette unique.
Mais combien de couleurs différentes devez-vous utiliser sur un site web ?
Cela dépend des circonstances individuelles et de vos objectifs concernant votre site web. Si votre site web est un site web ou un blog d’entreprise consacré à une seule marque, un seul produit ou une seule entreprise, vous souhaitez vous en tenir à un schéma de couleurs unique.
D’autre part, si votre site web est une boutique de eCommerce, vous pouvez utiliser différentes palettes de couleurs pour différents types de produits afin d’évoquer différentes réactions émotionnelles pour différentes catégories de produits.
Le problème de l’utilisation de plusieurs palettes est que vous compliquez les choses pour tout créateur de contenu interne ou externe, ce qui augmente le risque d’erreur humaine et de complications.
Lorsque vous choisissez un schéma de couleurs pour votre site web, il est essentiel d’éviter d’en faire trop et de passer des semaines sur la tâche. C’est un choix important, c’est certain, mais le choix des bonnes couleurs ne vous aidera pas à augmenter le trafic sur votre site web ou à stimuler les conversions sur vos pages de produits.
Comment obtenir les palettes de couleurs exactes sur un site web
Pour identifier chaque couleur utilisée sur un site web, jusqu’à la teinte exacte et le code hexadécimal, vous pouvez utiliser une extension Google Chrome ou un module Firefox comme ColorZilla.
Avec ColorZilla installé, vous pouvez simplement passer votre pointeur directement sur n’importe quel élément du design d’un site, d’un logo ou d’une image, et il vous affichera le code hexadécimal HTML ou le code de couleur RGB exact pour ce pixel. Si vous ne voulez pas identifier les couleurs utilisées une par une, vous pouvez également utiliser un générateur de palette de couleurs qui utilisera une image, comme l’outil d’extraction de couleurs d’image de Colormind.
Cependant, ce n’est pas une solution aussi parfaite qu’il n’y paraît. Vous devez prendre une capture d’écran du site web et la téléverser, et la palette générée ne sera pas nécessairement fidèle à 100 % aux nuances réelles utilisées dans la conception. Par exemple, si le site web comprend un dégradé ou une image dont les couleurs dépassent la palette principale, la palette générée aura tendance à être inexacte.
Pour l’instant, la meilleure façon d’identifier les couleurs exactes utilisées dans la conception de sites web reste donc d’utiliser une extension d’identification des couleurs, ou de faire une capture d’écran et de faire les choses manuellement dans un outil de retouche photo comme PhotoShop.
Quelle est la palette de couleurs du site web que nous utilisons chez Kinsta ?
Comme la plupart des sites web, Kinsta suit un schéma de base à trois couleurs ou triadique pour tout son contenu. Comme nous sommes une société d’hébergement centrée sur l’hébergement WordPress, nous n’avons pas besoin de mettre en place plusieurs palettes sur notre site web.
Nous utilisons un violet foncé (#5333ed) comme couleur principale, du turquoise (#2cd4d9) pour juxtaposer et créer des dégradés accrocheurs mais équilibrés, et un gris discret pour le texte (#6E7076).
Mais que font les autres entreprises ?
Découvrons-le !
26 Exemples de meilleures palettes de couleurs de sites web
Nous avons parcouru le web à la recherche d’excellents exemples de palettes de couleurs et avons même séparé les sites par catégorie. Il vous sera donc facile de vous inspirer des sites web pertinents.
Superbes palettes de couleurs pour les sites de eCommerce
Ci-dessous, nous vous présentons d’excellents exemples de combinaisons de couleurs pour le commerce électronique qui correspondent à leur marque et à leur secteur d’activité.
1. Produit de soins de la peau : Lumineux et ludique
Le choix des couleurs de Bliss est à la hauteur de sa marque. Les couleurs sont vives et ludiques, accompagnant parfaitement le message de positivité corporelle et de bonheur intérieur de l’entreprise.
2. Marque de vêtements : Clair et concis
Le Bonnet est une entreprise de vêtements qui met l’accent sur la clarté de la palette de couleurs de son site web. Quelques couleurs intenses, ainsi qu’une couleur de fond beige opaque pour séparer les produits, contribuent à rehausser la simplicité du design.
3. Magasin de vêtements : Simplicité
Revise Concept est un site de marque de vêtements, et au lieu de s’appuyer sur les couleurs de la palette de couleurs du site, il utilise des couleurs simples et un espace blanc pour mettre en valeur les couleurs et les conceptions des vêtements.
Cette approche peut être une excellente alternative pour les sites de commerce électronique qui veulent laisser le produit parler de lui-même, plutôt que de créer un design percutant pour raconter l’histoire.
4. Tableware : Fiabilité et professionnalisme
My Tableware est un site allemand de commerce électronique qui propose des articles de table et de la vaisselle personnalisables.
Le site utilise un schéma de couleurs simple, bleu foncé, marron clair et gris, pour transmettre un sentiment de professionnalisme et de fiabilité, avec des notes de sophistication.
5. Gomme : Naturelle et impulsive
Neuro est une marque de gomme à la caféine et de menthes, conçue pour aider les gens à se concentrer. Elle utilise un mélange de couleurs plus douces comme le turquoise, le bleu clair et le beige, afin d’instiller un sens des ingrédients naturels.
Il y a aussi un appel à l’émotion et aux décisions impulsives avec le rouge et l’orange, une excellente utilisation de la couleur d’accent.
6. Montre : Sophistication et luxe
Prime Ambassador est une marque suédoise de montres, avec un site de commerce électronique de grande classe conçu pour mettre en valeur les produits. Les combinaisons de couleurs d’une teinte brun clair presque dorée sur un fond gris foncé et les accents de bois dans l’image apportent un sentiment de sophistication et de luxe au visiteur.
Les couleurs sont parfaites pour promouvoir un produit haut de gamme comme une montre sur mesure, mais elles ne seraient pas à leur place si vous vendiez des biens de consommation courante.
7. Pantalons : Créatif et accessible
Alday est une marque de pantalons confortables, conçus pour mieux s’adapter que les jeans et les chinos produits en série et vendus à des prix plus bas.
Le site web est créatif et ludique, avec des combinaisons de couleurs vives qui le rendent accessible au visiteur et aux clients potentiels.
8. Collations aux fruits : Couleurs élégantes et accentuées
Madies est une ligne de snacks à base de fruits lyophilisés, destinée à un consommateur plus sensible à la mode que les fruits secs sans marque vendus en vrac.
L’arrière-plan noir et la personnification jaune de la mangue mûre accentuent la simplicité du dessin, ce qui donne un produit final élégant.
9. Denim sur mesure : C’est vivant
Unspun utilise le rouge et l’orange pour donner vie au site. Il est parfait pour communiquer avec un public qui mène un style de vie actif et dynamique.
Palettes de couleurs des sites web personnels et de voyage
Vous trouverez ci-dessous notre sélection des meilleurs exemples de combinaisons de couleurs pour les sites web personnels et de voyage.
10. Simplicité créative
Madeleine Dalla est une photographe basée à New York qui a un sens aigu de la conception de sites web (et un impressionnant portfolio).
En laissant la couleur hors de l’équation pour le reste du design, elle met vraiment en valeur les couleurs vives de ses photos mises en avant triées sur le volet pour chacun de ses projets. Elle utilise l’absence de couleur autant que les couleurs elles-mêmes.
11. Niveaux de gris avec une éclaboussure
Ali Rifai est un directeur artistique créatif et cela se voit dans le concept du site web. En utilisant des niveaux de gris avec seulement une touche de couleur, votre attention est attirée par les bons mots clés et les zones critiques du design, le mot « original » et le charmant sourire.
12. Unité avec la nature
iFly 50 est un magazine en ligne publié par KLM pour célébrer son 50e anniversaire.
En mettant en valeur les bleus du ciel et de l’eau, et les verts de l’herbe et de la forêt, il donne à tout visiteur le sentiment de ne faire qu’un avec la nature – une approche parfaite pour tout site web de photographie de nature ou de paysage.
13. Propre et professionnel
Le site de Benediktas Gylys est un masterclass sur le design propre. Il n’y a pas d’encombrement et cela vaut aussi pour le choix des couleurs.
La couleur violette principale met en évidence le professionnalisme, et bien qu’il n’y ait que quelques couleurs, elles servent toutes à mettre en valeur les éléments essentiels, les illustrations.
14. Couleurs pragmatiques
BucketListly utilise les couleurs de manière pragmatique, en utilisant le jaune pour mettre en évidence les mots-clés, les appels à action et les pays visités jusqu’à présent.
Il montre la valeur que l’on peut tirer d’une seule couleur dans un design lorsqu’on l’utilise en association avec l’espace blanc et les bons concepts.
15. Simplicité élégante
L’image présentée sur le site de Lars Franzen utilise une couleur d’arrière-plan sombre pour faire ressortir la couleur et l’individualité des personnes du portrait.
16. Superposition futuriste
Le site personnel de Dot Lung fait un excellent travail en maximisant la palette de couleurs simples avec des superpositions et des graphiques d’arrière-plan nets. Le violet de l’arrière-plan crée une expérience cohérente d’une page à l’autre.
17. Lumière et obscurité
Love for Iceland est un excellent exemple de la façon dont les couleurs d’une image mise en évidence peuvent créer l’ambiance. Le bleu vif de la glace claire, éclairé par la lumière du soleil, en haut à gauche, et l’obscurité de la grotte en bas, donnent au visiteur un sentiment d’aventure.
Palettes de couleurs des pages d’atterrissage (landing pages)
Ci-dessous, nous avons mis en évidence différentes pages d’atterrissage avec des combinaisons de couleurs uniques ou efficaces.
18. De forts contrastes
Zenly utilise des couleurs très contrastées pour mettre en valeur les fonctionnalités de l’application de cartographie en direct (d’ailleurs, c’est ainsi que vous intégrez Google Maps sur les sites WordPress). La toile de fond de l’espace fait ressortir le design globulaire de l’application et lui donne une saveur futuriste.
19. Couleur mises en évidence
Slack utilise une tactique éprouvée de schéma de couleurs pour la page d’atterrissage, où les couleurs sont surtout utilisées pour mettre en évidence les appels à l’action importants et d’autres éléments essentiels. Pour une page d’atterrissage, il n’est pas nécessaire de compliquer le design, et cela s’applique également aux couleurs.
N’oubliez pas de consulter notre comparaison approfondie entre les Microsoft Teams et Slack.
20. Des couleurs vibrantes suscitent des émotions
Spotify utilise des couleurs vives pour susciter des émotions chez un public sur sa nouvelle page d’atterrissage extrêmement simple. Les couleurs en disent plus long sur l’histoire que le sous-titre avant le bouton d’appel à action. Consultez notre guide si vous envisagez de lancer un podcast prochainement.
21. Les contrastes de couleurs créent de l’ordre dans le chaos
Autonomy utilise les couleurs et les contrastes pour créer de l’ordre dans un design animé et chaotique par ailleurs. Le jaune vif traverse et se sépare de l’arrière-plan et des autres objets.
22. Ensemble de couleurs futuristes
Bugsnag utilise une collection variée de couleurs pour donner une impression de futurisme et de haute technologie avec son design plat. La combinaison des couleurs et des formes donne au visiteur l’impression que nous sommes en 2020 et qu’il peut faire confiance à l’entreprise pour être à la pointe du progrès.
23. Vivre avec la couleur
La page d’atterrissage de Connect Homes s’anime de couleurs vives mais douces. La palette de couleurs atteint un équilibre passionnant qui donne une impression de modernité.
24. Couleurs conservatrices, conception ludique
La page d’atterrissage de Plink est basée sur une teinte de bleu foncé relativement conservatrice, mais l’équilibre est assuré par une animation et un design ludique et amusant en général.
25. Vitalité naturelle
Travelshift s’appuie fortement sur la couleur verte pour transmettre un sentiment de nature et de vitalité. Au lieu de mettre en valeur les appels à action ou les contenus clés avec une couleur qui attire l’attention comme le rouge ou l’orange, le vert fonctionne plutôt comme une promesse de rajeunissement.
26. Les couleurs vives de l’espoir
Swab the World utilise une palette de couleurs vives et contrastées pour transmettre un sentiment d’espoir. Cela correspond parfaitement à la page d’atterrissage d’une organisation à but non lucratif. Le choc des couleurs s’harmonise avec les formes pour mettre en évidence l’approche moderne/futuriste qu’ils utilisent pour relever le défi.
Générateurs de palettes de couleurs pour sites web
Si vous ne souhaitez pas choisir manuellement des couleurs, des dégradés ou des nuances adjacentes pour votre schéma ou votre palette, vous pouvez utiliser des outils en ligne pour vous aider. Il existe un certain nombre de modèles de couleurs ou de générateurs de palettes gratuits disponibles en ligne. Nous allons examiner de plus près certaines des meilleures options ci-dessous.
Colormind
Colormind est un générateur de couleurs alimenté par l’IA que vous pouvez utiliser pour générer des couleurs pour des sites web, des modèles, et plus encore, de manière instantanée. Le seul problème est que vous ne pouvez pas définir une couleur primaire pour extrapoler une palette, vous devez la générer aléatoirement à chaque fois. Il peut également extraire des palettes de couleurs à partir de n’importe quelle image que vous souhaitez.
Coolors.co
Coolors.co est une application web et mobile qui vous aide à générer des palettes à partir de rien. Elle propose des alternatives de teintes pour chaque option de couleur et d’autres outils avancés qui vous aident à prendre des décisions efficaces concernant vos palettes de couleurs.
Paletton
Au lieu de générer des palettes aléatoires, Paletton vous donne un contrôle total sur votre palette et sur la couleur que vous voulez utiliser comme couleur de base ou primaire. Vous pouvez choisir le type de palette que vous souhaitez, qu’il s’agisse de couleurs adjacentes, d’un schéma de couleurs triadiques ou autres. Vous pouvez sélectionner n’importe quelle couleur dans la roue des couleurs.
ColorSpace
ColorSpace génère des palettes de couleurs basées sur une couleur primaire que vous entrez. Il offre une grande variété d’options de style qui vous donnent plus de flexibilité.
Comment choisir une palette adaptée aux daltoniens pour votre site web
La dernière chose à prendre en compte lors de la création d’un schéma de couleurs pour un site web est la façon dont les différentes personnes verront les couleurs.
Tout le monde ne voit pas la gamme de couleurs « standard ». Il existe trois grands types de daltonisme : la deutéranopie, la protanopie et la tritanopie.
Le daltonisme rouge-vert (deutéranopie et protanopie) est la forme la plus courante de daltonisme. Il touche environ 1 personne sur 12 d’origine nord-européenne. Avec un si grand nombre de personnes touchées par cette maladie, il vaut la peine d’en tenir compte lors de la conception et/ou du choix d’un thème WordPress.
Le daltonisme bleu-jaune est beaucoup plus rare et touche autant les hommes que les femmes.
Comment choisir une palette adaptée aux daltoniens pour votre site web
Comme le nombre de daltoniens rouge-vert est beaucoup plus élevé que toute autre forme de daltonisme, il devrait être votre priorité numéro un pour votre design. Parce qu’ils ne peuvent pas séparer le rouge, le vert et le violet, mais les voient plutôt comme des teintes différentes de jaune et de bleu, vous voulez éviter d’utiliser des couleurs contrastées qui finiront par se ressembler trop.
- Ne pas faire de contraste entre le vert et le jaune ou vice versa.
- Ne mettez pas le jaune en contraste avec le rouge ou l’orange.
- Ne mettez pas le violet en contraste avec des nuances de bleu similaires.
Lorsque vous choisissez des couleurs primaires autonomes pour votre logo ou votre dessin, vous devez vous demander s’il s’agit toujours d’une marque pour les consommateurs daltoniens. Par exemple, le violet de Kinsta est toujours un bleu foncé pour les consommateurs daltoniens rouge-vert, véhiculant un message de fiabilité et de confiance. Pour nous, il s’agit d’une marque à 100 %, il n’y a donc pas de conflit potentiel dans l’esprit de nos prospects.
Résumé
L’œil humain est peut-être capable de séparer des millions de nuances de couleurs différentes, mais vous n’avez pas besoin de passer au peigne fin toutes vos options pour trouver un schéma de couleurs qui convienne à votre site.
En vous concentrant sur votre marque et vos clients idéaux, vous pouvez réduire vos choix de couleurs primaires. Une fois que vous avez fait votre choix, vous pouvez vous appuyer sur des générateurs de palettes en ligne pour compléter votre propre palette de couleurs, ou choisir des couleurs assorties en fonction d’exemples et de préférences.
Avec la bonne approche, il est possible de créer une combinaison de couleurs de site web qui pourrait être utilisé comme point de départ de votre processus de conception, bien qu’il soit souvent nécessaire d’engager le bon développeur/designer web si vous souhaitez obtenir l’aspect professionnel et le ressenti dont votre marque a besoin.
Maintenant, il est temps de choisir les polices de caractères, n’est-ce pas ?
Rédacteur en chef chez Kinsta et consultant en marketing de contenu pour les développeurs de plugins WordPress. Connectez-vous avec Matteo sur Twitter.
Laisser un commentaire