La théorie des couleurs en webdesign : comment trouver la bonne palette de couleurs pour ton site

7 Min.
Une introduction à la théorie des couleurs pour les concepteurs de sites web

On se souvient probablement tou·te·s vaguement de la théorie des couleurs en cours d'arts plastiques : l'importance des couleurs primaires, secondaires et tertiaires. En tant que webdesigner·euse, tu travailles chaque jour avec la théorie des couleurs, consciemment ou non. Dans cet article, je te montrerai comment utiliser les bons principes et outils pour créer de bonnes associations de couleurs pour ton prochain projet web.

Théorie des couleurs : pourquoi un rafraîchissement est parfois nécessaire

Les premières esquisses de la théorie des couleurs et du cercle chromatique remontent au moins jusqu'au début du XVIIe siècle. L'origine des couleurs, la réflexion de la lumière, le processus dans l'œil humain, tout cela occupe l'humanité depuis longtemps.

Nous, les designer·euse·s, sommes souvent des types visuels avant tout. La création d'associations de couleurs vient souvent d'un certain pressentiment. Nous voyons et analysons constamment les couleurs qui nous entourent. Il en résulte une façon intuitive de traiter les couleurs. 

Cependant, la connaissance factuelle des couleurs et de leurs effets n'est pas seulement indispensable pour expliquer le choix et la disposition des couleurs. Elle est également importante pour prendre des décisions qui échappent à la norme.

Afin de trouver les associations de couleurs optimales pour tes client·e·s et tes sites web, une bonne connaissance de la théorie des couleurs est inévitable.

Par rapport aux médias imprimés, nous avons, en tant que concepteur·rice·s de surfaces numériques, un avantage décisif : le nombre de couleurs que tu utilises au final et les tons que tu choisis n'ont aucun effet sur le coût du produit. Toutefois, cela ne s'applique que tant que ton projet reste numérique.

Tu n'es pas non plus soumis·e aux limitations techniques qui existent dans la presse écrite. Cela te donne d'abord, en tant que designer·euse, la miraculeuse liberté de te développer pleinement.

Le cercle chromatique, la température et la saturation

Nos écrans sont généralement fondés sur le code couleur RVB (rouge, vert, bleu), également appelé système de synthèse additive. En règle générale, tout ce qui reflète la lumière est basé sur le système de couleur additive. Dans cette structure, nous utilisons les couleurs primaires comme point de départ. Le blanc est créé en combinant toutes les couleurs, tandis que le noir représente ici l'absence des couleurs.

Couleurs primaires, secondaires et tertiaires

Expliqué à l'aide de l'exemple d'un simple cercle chromatique : les couleurs primaires sont le jaune, le rouge et le bleu. Les couleurs secondaires sont créées lorsque tu mélanges les couleurs primaires entre elles. Les couleurs tertiaires sont créées à partir de mélanges qui contiennent des couleurs primaires et secondaires.

La théorie des couleurs en webdesign
Le cercle chromatique décrit et fractionne les couleurs.

Tonalités, teintes, ombres et saturation

La teinte, ou nuance, décrit les six couleurs primaires et secondaires non mélangées :

  • La teinte décrit la coloration qui se produit lorsque tu ajoutes du blanc à une couleur.
  • Les nuances utilisent le même principe que les teintes, mais on mélange dans ce cas dans le noir.
  • La saturation, également appelée ton, est ce que nous appelons le mélange de teintes avec des gris ou des couleurs neutres comme le blanc et le noir. Si l'on suit cette définition, alors les nuances et les teintes appartiennent également à la saturation.

Température et contraste

La théorie des couleurs en webdesign
Température et contraste des couleurs

Tu peux également classer les couleurs en fonction de la température. Quelques règles empiriques s'appliquent ici :

Les couleurs chaudes semblent plus dominantes lorsque tu les associes à des couleurs froides. De cette façon, tu peux également transmettre le sentiment de profondeur. Les couleurs froides semblent donc plus éloignées que les couleurs chaudes. Les couleurs de chaleur intense peuvent également donner l'impression que les couleurs froides sont encore plus froides.

Le gris ainsi que les nuances de gris, de blanc et de noir appartiennent au groupe des couleurs neutres. Le beige et le marron sont également souvent attribués aux couleurs neutres. Personnellement, je ne suis qu'en partie d'accord avec ce principe car une nuance de gris peut certainement sembler chaude ou froide. J'ai aussi tendance à compter le beige et le marron comme des tons chauds. Les couleurs neutres sont définies pour moi comme étant le blanc et le noir et toutes les nuances de gris intermédiaires, auxquelles aucune autre couleur n'a été ajoutée.

Les couleurs neutres sont plutôt inintéressantes en elles-mêmes, c'est pourquoi il leur faut au moins une couleur pour se démarquer. Les exceptions confirment ici la règle car il existe quelques mises en page minimalistes en noir et blanc qui se passent de toute autre couleur. Le brun et le beige peuvent également être très attrayants comme couleur dominante, par exemple dans un design monochrome.

Les couleurs primaires contrastent les unes avec les autres. Il existe une autre façon de créer un contraste, en regardant les couleurs qui sont à environ 3 carrés de distance sur le cercle chromatique. Ces associations peuvent facilement créer une dissonance parce qu'elles se mordent les unes les autres. Cependant, utilisées correctement, par exemple en tant qu'appel à l'action, elles peuvent donner un contraste intéressant à ton design.

Huit principes pour créer des palettes de couleurs harmonieuses

Couleurs complémentaires

Les couleurs complémentaires sont deux couleurs directement opposées et qui sont combinées dans ce concept, comme dans l'exemple du rapport Culture & Tendances de Youtube.

La théorie des couleurs en webdesign
Des couleurs complémentaires dans le cercle chromatique

Deux couleurs complémentaires se distinguent au maximum l'une de l'autre. Cela crée une palette de couleurs à la fois contrastée et harmonieuse. Ces designs se prêtent à des conceptions dynamiques qui attirent l'attention. Par conséquent, tu dois t'assurer que cela reflète également le produit que tu souhaites communiquer.

Accords en triangles

L'accord équilatéral de couleurs décrit trois couleurs qui sont équidistantes les unes des autres sur le cercle chromatique.

Comme les assiociations précédentes, celle-ci est également très simple et facile à utiliser. Elle offre plus de diversité, mais tu es en sécurité avec elle. Il n'y a guère de composition harmonieuse à partir du principe de base. Ces palettes de couleurs sont particulièrement bien adaptées aux sites web qui devraient plaire à un large éventail d'utilisateur·rice·s.

Tu dois toujours choisir une couleur qui domine le design. Cela garantit une conception claire et une plus grande harmonie. L'exemple de Slaveryfootprint.org illustre très bien ce point.

La théorie des couleurs en webdesign
La combinaison de triangles illustrée par un site web
La théorie des couleurs en webdesign
La combinaison de triangles dans le cercle chromatique

Couleurs complémentaires fractionnées

Les couleurs complémentaires fractionnées décrivent un concept similaire aux couleurs complémentaires. Ici, un seul côté est fractionné. Au lieu de la couleur primaire complémentaire, tu utilises maintenant les couleurs tertiaires environnantes. Cette palette offre davantage de possibilités d'associations.

L'ajout d'une troisième couleur au schéma complémentaire donne un peu plus d'équilibre à la mise en page. Cette association est assez souvent utilisée sur le web. La palette de couleurs n'a pas besoin d'être aussi tapageuse que dans cet exemple

La troisième couleur est souvent utilisée par les designer·euse·s comme couleur d'accentuation et est employée avec beaucoup de parcimonie. Ce principe te permet de donner à tes sites web un contraste plus doux.

La théorie des couleurs en webdesign
Couleurs complémentaires fractionnées dans le cercle chromatique
La théorie des couleurs en webdesign
Couleurs complémentaires fractionnées sur un site web

Associations de couleurs en carrés

Tout comme le concept des accords triangulaires, l'association de couleurs en carrés combine quatre couleurs. De toutes les associations présentées jusqu'à présent, c'est celle qui est la plus difficile à maîtriser. 

Ici aussi, nous combinons deux paires de couleurs complémentaires. Cependant, il faut faire preuve de sensibilité dans la répartition de la hiérarchie. Sur ce site, le rouge est utilisé avec parcimonie pour éviter que le rouge ne domine les autres couleurs. Au lieu de cela, un bleu froid et un beige neutre ont été utilisés comme couleurs dominantes.

Lorsque tu utilises ce principe, fais attention à utiliser des couleurs chaudes et froides en harmonie les unes avec les autres.

La théorie des couleurs en webdesign
L'accord de couleurs en carré dans le cercle chromatique
La théorie des couleurs en webdesign
Accord de couleurs en carré sur un site web

Couleurs complémentaires accordées en carré et fractionnées

Ce type d'association consiste en deux couleurs adjacentes et leurs couleurs complémentaires.

Avec ces couleurs, tu peux créer une palette de couleurs qui te donne le contraste attrayant des couleurs complémentaires tout en étant plus diversifiées, comme dans cet exemple.

Schéma analogique de la combinaison des couleurs

Les palettes de couleurs analogiques sont deux ou plusieurs couleurs qui se trouvent l'une à côté de l'autre sur le cercle chromatique. Les palettes de couleurs analogiques semblent moins contrastées que les compositions décrites précédemment, mais ne manquent pas pour autant à faire de l'effet. 

Pour ton site web, il est bon d'établir une hiérarchie et d'utiliser les couleurs en conséquence. Dans l'exemple ci-dessous, Crips Studios a choisi le violet comme couleur dominante. Cette couleur est donc aussi celle qui définit l'ambiance de ton site web.

La théorie des couleurs en webdesign
Palette de couleurs analogiques dans le cercle chromatique
La théorie des couleurs en webdesign
Palette de couleurs analogiques sur un site web

Schéma monochrome

Le monochrome décrit les différentes tonalités et/ou les saturations d'une même couleur. C'est la façon la plus simple d'obtenir un schéma de couleurs harmonieux. Bien utilisée cependant, elle peut distinguer ton site des autres sites.

L'utilisation de couleurs monochromes renforce l'impact émotionnel de la couleur source et crée une certaine élégance. Les designs minimaux bénéficient de palettes de couleurs monochromes. Sache également que les sites web monochromes sont peu contrastés.

La théorie des couleurs en webdesign
Couleurs monochromes sur un site web

Saturation et teinte

Ce schéma utilise des couleurs qui ont des valeurs de saturation ou de teinte similaires. Dans l'exemple de Bliss, l'harmonie a été créée par l'utilisation constante de tons pastels.

La théorie des couleurs en webdesign
La saturation et la teinte sont importantes dans la conception de sites web.

Inspiration et outils en ligne

Il est devenu un classique et reste l'un de mes outils préférés pour créer des palettes de couleurs : le cercle chromatique d'Adobe.

La nouveauté est que tu peux également vérifier ta sélection pour voir si elle sera toujours affichée avec un contraste suffisant pour les utilisateur·rice·s qui souffrent de daltonisme.

  • Eggradients fournit une gamme d'inspiration pour les dégradés et les styles CSS qui leur correspondent.
  • Khroma est une application de navigation basée sur l'intelligence artificielle qui apprend quelles couleurs communiquent quelque chose de spécial, et crée des associations correspondantes. Elle est tout à fait recommandable comme source rapide d'inspiration pour les couleurs et les associations.
  • Coolors est une plateforme où tu peux trouver de l'inspiration et créer tes propres palettes de couleurs. Elle propose également des extensions pour Chrome et Adobe.

Colourco fonctionne de façon similaire au cercle chromatique d'Adobe. Tu peux fixer le principe selon lequel ta palette de couleurs doit être créée. En survolant simplement, tu peux ensuite tester et créer des combinaisons de couleurs. Tu peux télécharger ta sélection sous forme de Sass Stylesheet ou comme fichier .png.

La théorie des couleurs en webdesign

Le site https://emotivefeels.com/ te propose un design attrayant permettant d'explorer les différentes couleurs et leurs effets.

Tes questions sur la théorie des couleurs en webdesign

Quelles sont tes expériences avec les couleurs en webdesign ? As-tu des questions pour Sonja ? Fais-le nous savoir dans les commentaires ! Tu souhaites être informé·e des nouveaux articles sur RAIDBOXES ? Alors suis-nous sur Twitter, Facebook ou via notre newsletter.

Après avoir étudié la conception de jeux et la création littéraire dans la ville verdoyante d'Auckland, Sonja Hoffmann s'est spécialisée dans la conception et le développement de sites web et d'applications. Elle se concentre sur la ludification et les causes derrière la motivation et l'expérience des utilisateur·rice·s, et y combine une passion et une curiosité pour les tendances technologiques.

Articles connexes

Commentaires sur cet article

Laisse un commentaire

Ton adresse électronique ne sera pas publiée. Les champs obligatoires sont marqués d'un *.