« 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.). Mais soyons réaliste une minute : la plupart d’entre nous ne sommes même pas capables d’assortir correctement un t-shirt et un pantalon. Comment prétendre alors trouver la combinaison idéale pour habiller votre site internet ? 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, c’est comme entre la mer et la montagne : 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. Bien sûr, combiner le chaud et le froid est également une option, qui ouvre une panoplie de palettes quasiment infinie. Comment choisir la vôtre sans commettre de faute de goût (et vous attirer les foudres de Cristina Cordula) ? C’est là que la théorie des couleurs intervient.
Comment combiner harmonieusement les 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 complémentaires : ces schémas utilisent deux couleurs positionnées exactement l’une en face de l’autre sur le cercle. Exemples : le rouge et le vert, le jaune et le violet. En prenant deux couleurs très contrastées, le design de votre site sera accentué. Pour créer une palette complète, vous pouvez ajouter une couleur neutre, c’est-à-dire une teinte qui n’apparait pas sur le cercle chromatique de 12 couleurs, comme le beige, les marrons clairs, le blanc et le noir.
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).
La mise en pratique : quelques sites Wix parfaitement colorés
Nous avons abordé les différentes combinaisons de couleurs et leur impact. D’un point de vue théorique, c’est très bien. Mais, comme à l’école, ce qu’on aime avant tout, c’est la mise en pratique. Avant de vous barbouiller les doigts de peinture (numérique), jetez un œil à l’usage qu’on fait ces web designers de la théorie des couleurs pour leur site Wix :
Prêt à donner des couleurs à votre activité ? Première étape (obligatoire) : créez un superbe site internet – c’est gratuit !