Une introduction à la théorie des couleurs pour les webdesigners

La théorie des couleurs dans le design web : la bonne palette de couleurs pour ton site web

Nous nous souvenons de la théorie des couleurs dans les cours d'art : de la signification du cercle chromatique, de la température et de la chromie. En tant que webdesigner, tu travailles tous les jours avec la théorie des couleurs, que ce soit inconsciemment ou consciemment. Dans cet article, je te montre comment créer de bonnes combinaisons de couleurs pour ton prochain projet web en utilisant les bons principes et les bons outils.

Théorie des couleurs : l'ordre des couleurs

Les premiers écrits sur la théorie des couleurs, également appelée Color Theory, et le cercle chromatique remontent au moins au début du 17e siècle. L'origine des couleurs, la réflexion de la lumière, le processus dans l'œil humain - tout cela préoccupe l'humanité depuis longtemps.

Nous, les designers, sommes souvent avant tout des personnes visuelles. Il n'est pas rare que nous créions des combinaisons de couleurs à l'instinct. Nous voyons et analysons constamment les couleurs qui nous entourent. Il en résulte une manière intuitive d'utiliser les couleurs. 

La connaissance factuelle des couleurs et de leurs effets n'est toutefois pas seulement indispensable pour pouvoir expliquer le choix et la disposition des couleurs. Elle est également importante pour prendre des décisions qui s'écartent de la norme.

Pour trouver les combinaisons de couleurs optimales pour tes clients et tes sites web, une connaissance approfondie de la théorie des couleurs est inévitable.

En tant que designers de surfaces numériques, nous avons un avantage décisif sur les médias imprimés : le nombre de couleurs que tu utilises et les tons que tu choisis n'ont aucune incidence sur le coût du produit. Mais cela n'est valable que tant que ton projet reste numérique.

Tu n'es pas non plus soumis aux limitations techniques que nous connaissons dans les médias imprimés. En tant que designer, tu as donc la liberté de t'épanouir.

Consentement*
Ce champ sert à la validation et ne doit pas être modifié.

Couleurs primaires, secondaires et tertiaires

Nos écrans sont généralement basés sur le système RVB (rouge, vert, bleu), également connu sous le nom de système de couleurs additives. En règle générale, on peut dire que tout ce qui renvoie de la lumière est basé sur le système Additive Color. Dans cette structure, nous utilisons les couleurs primaires comme point de départ. Le blanc résulte de la combinaison de toutes les couleurs, tandis que le noir représente ici l'absence de couleurs.

Explication à l'aide d'un cercle chromatique simple : les couleurs primaires sont le jaune, le rouge et le bleu. Les couleurs secondaires sont obtenues en mélangeant les couleurs primaires entre elles. Les couleurs tertiaires sont obtenues à partir de mélanges contenant des couleurs primaires et secondaires.

La théorie des couleurs dans la conception de sites web
Le cercle chromatique décrit et divise les couleurs.

Hues, Tints, Shades et Chroma

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

  • Tints décrit la teinte obtenue lorsque tu ajoutes du blanc à une couleur.
  • Shades utilise le même principe que Tints - mais nous y ajoutons du noir.
  • Lechroma, également appelé saturation ou ton, est le mélange de tons clairs avec des gris ou des couleurs neutres comme le blanc et le noir. Si nous suivons cette définition, les nuances et les encres font également partie des chromes.

Température et contraste

La théorie des couleurs dans la conception de sites web
Température et contraste des couleurs

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

Les couleurs chaudes sont plus dominantes si tu les associes à des couleurs froides.

Tu peux ainsi donner une impression de profondeur. Les couleurs froides semblent donc plus éloignées que les couleurs chaudes. Les couleurs d'une chaleur intense peuvent également rendre les couleurs froides encore plus froides.

Le gris, les nuances de gris, le blanc et le noir font partie du groupe des couleurs neutres. Le beige et le brun sont également souvent classés parmi les couleurs neutres. Personnellement, je ne suis que partiellement d'accord avec cette affirmation, car une nuance de gris peut définitivement avoir un effet chaud ou froid. Je classe également le beige et le brun plutôt parmi les tons chauds. Pour moi, les couleurs neutres se définissent comme le blanc et le noir et toutes les nuances de gris entre les deux, auxquelles aucune autre couleur n'a été ajoutée.

Les couleurs neutres ont tendance à être inintéressantes lorsqu'elles sont utilisées seules, c'est pourquoi elles ont besoin d'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 d'autres couleurs. Le brun et le beige peuvent également être très attrayants en tant que couleur dominante, par exemple dans un design monochromatique.

Les couleurs primaires sont en contraste les unes avec les autres.

Il existe une autre façon de créer un contraste. En regardant les couleurs qui se déplacent à environ trois cases les unes des autres sur le cercle chromatique. Ces paires peuvent facilement créer une dysharmonie. Car elles se mordent. Utilisées correctement, par exemple comme call-to-action, elles peuvent toutefois donner un contraste intéressant à ton design.

8 principes pour des palettes de couleurs harmonieuses

Couleurs complémentaires

Les couleurs complémentaires sont deux couleurs qui se trouvent directement en face l'une de l'autre, sont combinées dans ce concept, comme dans l'exemple de Youtube Culture & Trends Report.

La théorie des couleurs dans la conception de sites web
Couleurs complémentaires dans le cercle chromatique

Deux couleurs complémentaires se distinguent au maximum l'une de l'autre. Il en résulte un schéma de couleurs contrasté mais harmonieux. Ces designs conviennent pour les designs dynamiques qui attirent l'attention. C'est pourquoi tu dois absolument veiller à ce que cela reflète également le produit que tu souhaites communiquer.

Combinaison de triangles

La combinaison triangulaire décrit trois couleurs qui se trouvent à égale distance les unes des autres sur le cercle chromatique.

Comme les combinaisons précédentes, celle-ci est assez simple et facile à mettre en œuvre. Elle offre une plus grande diversité, mais elle est sûre. Le principe de base est qu'il n'y a guère de composition harmonieuse. Ces palettes de couleurs sont particulièrement bien adaptées aux sites web qui doivent être appréciés par un large éventail d'utilisateurs.

Tu devrais tout de même choisir une couleur qui prend la dominance dans le design. Cela permet d'obtenir un design clair et plus d'harmonie. C'est ce que montre également l'exemple de Slaveryfootprint.org.

La théorie des couleurs dans le design web
La combinaison triangulaire à l'exemple d'un site web
La théorie des couleurs dans la conception de sites web
La combinaison de triangles dans le cercle chromatique

Couleurs complémentaires partagées

Les couleurs complémentaires divisées décrivent un concept similaire à celui des couleurs complémentaires. Ici, seul un côté se divise. Au lieu de la couleur primaire complémentaire, tu utilises maintenant les couleurs tertiaires environnantes. Cette palette offre davantage de possibilités de combinaisons.

L'ajout d'une troisième couleur au schéma complémentaire ajoute un peu plus d'équilibre à la mise en page. Cette combinaison est assez souvent utilisée sur le web. Il n'est pas nécessaire que le schéma de couleurs soit aussi fort que dans cet exemple

La troisième couleur est souvent utilisée par les designers comme couleur d'accentuation et utilisée avec parcimonie. Ce principe te permet d'apporter un doux contraste à tes sites web.

La théorie des couleurs dans la conception de sites web
Couleurs complémentaires partagées dans le cercle chromatique
La théorie des couleurs dans la conception de sites web
Couleurs complémentaires partagées sur un site web

Combinaison de couleurs carrées

Comme pour le concept à trois côtés, la combinaison de couleurs carrée combine quatre couleurs. De toutes les combinaisons présentées jusqu'à présent, c'est celle qui est la plus difficile à maîtriser. 

Ici aussi, nous réunissons deux paires de couleurs complémentaires. Il faut toutefois faire preuve de doigté dans la répartition de la hiérarchie. Sur ce site, le rouge est utilisé avec parcimonie afin d'é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.

En utilisant ce principe, tu dois veiller à utiliser des couleurs chaudes et froides en harmonie.

La théorie des couleurs dans la conception de sites web
La combinaison de couleurs carrées dans le cercle chromatique
La théorie des couleurs dans la conception de sites web
Combinaison de couleurs carrées sur un site web

Couleurs complémentaires divisées en carrés

Se compose de deux couleurs juxtaposées et de leurs couleurs complémentaires.

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

Analogique

Les palettes de couleurs analogiques sont deux ou plusieurs couleurs placées côte à côte 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 leur effet. 

Pour ton site web, il est judicieux d'élaborer 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 également celle qui définit l'ambiance de ton site.

La théorie des couleurs dans la conception de sites web
Palettes de couleurs analogiques dans le cercle chromatique
La théorie des couleurs dans la conception de sites web
Palettes de couleurs analogiques sur un site web

Monochrome

Le monochrome décrit différentes nuances et/ou chroma d'une même couleur. C'est la manière la plus simple d'obtenir une combinaison harmonieuse de couleurs. Bien utilisée, elle permet néanmoins de distinguer ton site des autres.

L'utilisation de couleurs monochromes renforce en outre l'effet émotionnel de la couleur de départ et crée en outre de l'élégance. Les designs minimaux profitent des palettes de couleurs monochromes. Tu dois également savoir que les sites web monochromes sont peu contrastés.

La théorie des couleurs dans la conception de sites web
Couleurs monochromes sur un site web

Chrome et teinte

L'utilisation de couleurs ayant des valeurs de chroma ou de teinte similaires. Dans l'exemple de Bliss, une harmonie a été créée par l'utilisation constante de tons pastels.

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

Inspiration & outils pour la théorie des couleurs

C'est désormais un classique et toujours l'un de mes outils préférés pour créer des palettes de couleurs : Adobe Color Wheel.

Une nouvelle fonctionnalité te permet de vérifier si ta sélection est suffisamment contrastée pour les utilisateurs souffrant de daltonisme.

  • Eggradients fournit un éventail d'inspirations pour les dégradés et les styles CSS correspondants.
  • Khroma est une application de navigation basée sur l'IA qui apprend quelles couleurs te parlent le plus et crée les combinaisons correspondantes. A recommander sans hésiter comme source d'inspiration rapide pour les couleurs et les combinaisons.
  • Coolors est une plateforme sur laquelle tu peux trouver de l'inspiration et composer toi-même des palettes de couleurs. Elle propose également des extensions pour Chrome et Adobe.

Colourco fonctionne de manière similaire à Adobe Color Wheel. Tu peux définir le principe selon lequel ta palette de couleurs doit être créée. Tu peux ensuite tester et créer des combinaisons de couleurs par simple survol. Tu peux télécharger ta sélection au format Sass Stylesheet ou .png.

La théorie des couleurs dans la conception de sites web

En outre, Emotive Feels te propose un site web agréablement conçu pour explorer les différentes couleurs et leurs effets.

Tes questions sur la théorie des couleurs dans le design web

Quelle est ton expérience avec les couleurs dans le design web ? Quelles questions as-tu à poser à Sonja ? Fais-le nous savoir dans les commentaires ! Tu veux être informé(e) des nouveaux articles sur Raidboxes ? Alors suis-nous sur Twitter, Facebook ou via notre newsletter.

As-tu aimé cet article ?

Tes évaluations nous permettent d'améliorer encore plus notre contenu.

Laisse un commentaire

Ton adresse e-mail ne sera pas publiée.