« Quelles teintes vais-je utiliser ? Ce noir profond ou ce rouge éclatant ? Et pourquoi pas les deux ? »

Le choix des couleurs fait partie des plus décisifs au moment de créer un site internet. Normal : votre palette chromatique est la première chose que vos visiteurs remarqueront, bien avant l’élégance de votre plume, la beauté de vos images ou l’originalité de vos vidéos. Elle influera sur la façon dont les internautes percevront l’atmosphère de votre site, tout au long de leur visite.

Au-delà, de nombreuses études marketing montrent que les couleurs ont un impact décisif sur la prise de décision des clients. Ainsi, à contexte visuel égal, un bouton « Acheter » ne recueillera pas le même nombre de clics s’il est jaune, vert ou violet. Pour le dire autrement, les pigments ne parlent pas seulement aux yeux, mais aussi – et surtout – au cerveau.

Il est donc crucial de préparer le bon assemblage de couleurs pour votre site, celui qui optimisera vos chances d’être remarqué et d’obtenir des interactions souhaitées (commandes, téléchargements, abonnements, etc.).

Comment prétendre trouver la combinaison idéale ? En vous aidant de la théorie des couleurs. Pierre angulaire du design et de différentes disciplines artistiques, elle s’appuie sur des données éprouvées de la science optique. Si vous n’avez pas un sens inné de l’esthétique ou que vous êtes à court d’inspiration, vous pouvez l’utiliser pour tous vos travaux.

C’est parti pour un petit cours… haut en couleurs !

Le cercle chromatique

Au cœur de la théorie des couleurs se trouve le cercle chromatique.

Il s’agit d’une représentation ordonnée des teintes, qui suit l’ordre de l’arc-en-ciel.

Sa base est composée de trois couleurs primaires : le rouge, le bleu et le jaune – auxquelles s’ajoutent les couleurs secondaires, formées du mélange des précédentes : le vert (= jaune + bleu), l’orange (= rouge + jaune) et le violet (= rouge + bleu). Il est possible d’affiner à volonté. Par exemple, le cercle chromatique à 12 teintes contient, en plus des primaires et des secondaires, les couleurs issues de leurs mélanges, appelées tertiaires : le jaune vert, le bleu vert, le bleu violacé, le rouge violacé, le rouge orangé et le jaune orangé.

Voici ce que donne un cercle chromatique à 36 couleurs :

Couleurs chaudes et couleurs froides

Le cercle chromatique peut être divisé en deux catégories principales :

• les couleurs chaudes, qui gravitent autour du jaune, de l’orange et du rouge (ce qui inclut, par exemple, les marrons et le roux) ;

• les couleurs froides, regroupant les variantes de bleu, de vert et de violet (ce qui inclut, par exemples, les gris).

Entre chaud et froid, il n’y a pas de choix qui soit, dans l’absolu, meilleur qu’un autre. Tout dépend de l’effet que vous souhaitez atteindre. Les couleurs chaudes sont réputées plus stimulantes et incitatives à l’action. Elles sont ainsi recommandées pour un site e-Commerce, où l’objectif est de conduire vos visiteurs à sortir leur carte « bleue ». À l’inverse, les couleurs froides ont des vertus apaisantes et relaxantes. Elles sont donc idéales pour une vitrine en ligne, qui vise à accueillir les internautes dans un cadre agréable pour présenter son activité.

Enfin, votre « température » dépendra de l’identité de votre marque et de l’atmosphère que vous souhaitez installer sur votre site.

Couleurs et émotions

Chaque couleur est associée à une émotion particulière.

En voici les plus courantes :

• Bleu : Confiance, intelligence / Facebook, Intel, Nokia

• Rouge : Energie, passion / Coca-cola, Kellog’s, Nintendo

• Orange : Créativité, communication / Orange

• Vert : Naturel, stabilité / Starbuck’s, Perrier

• Jaune : Joie, amitié / Hertz, La Poste

• Noir : Puissance, élégance / L’Oréal, Nike

Vous pourrez trouver toutes les associations couleur/sensation facilement en utilisant l’outil code-couleur. Une fois l’impact des couleurs assimilé, il ne vous reste qu’à choisir une palette moderne afin d’en exploiter le potentiel.

Comment combiner harmonieusement vos couleurs

Différents schémas existent pour guider votre choix de palettes. La plupart sont basés sur la position des couleurs sur le cercle chromatique :

Les combinaisons analogues :

Il s’agit ici d’utiliser trois couleurs voisines sur le cercle chromatique, comme l’orange, le jaune orangé et le jaune, ou le violet, le bleu violacé et le bleu. En raison de leur proximité, ces teintes vont créer une combinaison naturellement agréable au regard.

Les combinaisons triadiques :

Prêt à faire un peu de géométrie ? Une triade requiert trois couleurs qui sont à égales distances les unes des autres sur le cercle, formant ensemble un triangle équilatéral. Vous pouvez ainsi combiner le jaune orangé, le bleu violacé et le rouge violacé. Ce schéma est dynamique. Il vous permet de créer un équilibre au sein duquel l’une des trois teintes est dominante, et les deux autres en support.

Les combinaisons complémentaires adjacentes :

Avec cette panoplie, vous commencez par choisir une couleur et vous y ajoutez les deux teintes qui entourent sa complémentaire. Vous formez ainsi un triangle isocèle. Par exemple, vous pouvez associer un rouge à un jaune vert et à un bleu vert ; ou un violet, un jaune orangé et un jaune vert. Ce schéma offre un contraste élégant, moins marqué qu’une combinaison complémentaire classique.

Les combinaisons tétradiques :

Il s’agit ici de former deux paires de couleurs complémentaires, ce qui crée une figure rectangulaire sur votre cercle. Par exemple, vous pouvez combiner un jaune orangé, un jaune vert, un bleu violacé et un rouge violacé. Ce modèle est particulièrement riche.

Les combinaisons monochromatiques :

Comme son nom l’indique, ce jeu utilise différentes nuances d’une même couleur. Vous pouvez utiliser un large spectre qui inclut les teintes les plus sombres et les teintes les plus claires, ou le réduire en utilisant les unes ou les autres seulement. Les schémas monochromatiques permettent un rendu propre et minimaliste.

La combinaison achromatique :

il s’agit du classique noir et blanc, qu’il est possible d’agrémenter de gris (mais pas en couleur dominante).

EndFragment

Pour vous aider à composer votre palette...

Le principal dilemme auquel nous faisons face – ignorants en graphisme que nous sommes – est : comment composer ses palettes de couleurs sans passer par la case coloriage ?

L’une des merveilles du Web 2.0, est qu’il regorge d’outils gratuits très utiles. Vous pouvez choisir votre palette sur Colourco ou encore grâce à la roue chromatique Adobe Kuler. Ces deux outils gratuits formidables vous permettent de découvrir le code HEX de vos couleurs. Ce code en 6 caractères vous sera utile pour les retrouver à l’intérieur de l’éditeur Wix afin d’en faire usage sur votre site.

Comment utiliser vos couleurs ?

Il n’existe pas de règle immuable en matière d’utilisation des couleurs. Néanmoins, il est important de rester simple dans ses choix, de conserver un nombre de couleurs raisonnable et de les répartir de façon proportionnée. La règle de 60-30-10 a déjà fait ses preuves et ne vous réservera pas de mauvaises surprises.

• Les teintes de votre couleur maitresse doivent couvrir 60% de votre espace.

• Votre deuxième couleur doit couvrir 30% du design de votre page Web et créer un contraste fort avec la première afin d’attirer l’attention sur les éléments que vous souhaitez mettre en valeur.

• La couleur complémentaire, qui recouvre les 10% restants, sert à accentuer des éléments stratégiques tels que les boutons et autres appels à l’action.

EndFragment

EndFragment

les couleurs neutres

Les couleurs neutres sont les couleurs telles que crème, gris ou encore le beige qui sont naturellement douces et ne sont pas sans rappeler les matériaux comme le bois, la pierre ou encore la terre. En web design, elles transmettent une atmosphère sereine, calme et naturelle. Particulièrement utiles pour les sites d’arts culinaires, de produits bios ou encore de bien-être, les palettes neutres transmettent votre message en douceur. Les amateurs des styles rétro et vintage pourront également y trouver leur bonheur.

Les couleurs néons

En exploitant vos 30% avec des couleurs vives et rafraîchissantes comme le bleu turquoise ou le fuchsia, vous donnez de l’énergie à votre design et apportez une touche à la fois jeune et sophistiquée à votre site. Cette tendance, adoptée par bon nombre de web designers est en pleine explosion. Enutilisant un arrière-plan sombre vous maximisez la visibilité de vos éléments « néon » et faites, accessoirement, preuve de bon goût. On n’a pas idée de créer un site entièrement fluo, quelle infamie.

Les couleur pastel

Un peu de douceur dans ce Web de brutes. Les pastels sont des couleurs féminines, douces et agréables visuellement. A l’opposé des couleurs criardes et fluo, les tons pastel sont idéals pour séduire ses visiteurs en douceur et avec élégance. Les créateurs de sites dont l’activité est liée à l’enfance, à la mode ou même à l’art apprécieront particulièrement l’aspect raffiné qu’apporte ce type de couleurs. Combinées avec une typographie Serif, leur charme peut facilement s’exacerber.

les combinaisons monochromes

Le concept est relativement simple : il s’agit d’utiliser différentes couleurs appartenant à la même teinte. Le style monochrome inspire confiance et permet d’orienter la concentration des visiteurs vers les éléments pertinents. En outre, le minimalisme est particulièrement en vogue et cette tendance surfe fièrement sur sa vague. Notez que dans ce cas précis, utiliser une texture de bon goût permettra de relever le tout afin de ne pas de tomber le piège tendu par ce type de combinaison à savoir, la monotonie excessive.

Gérald VIGOUROUX

https://www.geraldvigouroux-formation.com/

EndFragment

EndFragment

EndFragment

EndFragment