Nous nous souvenons de la théorie des couleurs dans les cours d'art : de l'importance du cercle chromatique, de la température et de la chroma. 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 17ème 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 des personnes visuelles. Il n'est pas rare que la création de combinaisons de couleurs se fasse à l'instinct. Nous voyons et analysons constamment les couleurs qui nous entourent. Il en résulte une manière intuitive d'utiliser les couleurs. 

Cependant, la connaissance factuelle des couleurs et de leurs effets n'est 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 ne vaut que si ton projet reste numérique.

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

Couleurs primaires, secondaires et tertiaires

Nos écrans sont généralement basés sur le système RGB (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 créées lorsque tu mélanges les couleurs primaires. Les couleurs tertiaires sont obtenues à partir de mélanges contenant des couleurs primaires et secondaires.

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 qui apparaît lorsque tu ajoutes du blanc à une couleur.
• Shades utilise le même principe que Tints - mais nous y ajoutons du noir.
• Chroma, également appelé Saturation ou Ton, nous appelons le mélange de Hues 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 de la chroma.

Température et contraste

Tu peux aussi classer les couleurs en fonction de la température. Il y a quelques règles de base à respecter :

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 de chaleur intense peuvent aussi 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 marron sont aussi souvent classés parmi les couleurs neutres. Personnellement, je ne suis que partiellement d'accord, car une nuance de gris peut définitivement avoir un effet chaud ou froid. Je classe également le beige et le marron 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 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 marron 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 appel à l'action, elles peuvent cependant 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.

Deux couleurs complémentaires se distinguent au maximum l'une de l'autre. Cela crée un schéma de couleurs contrasté mais harmonieux. Ces designs sont parfaits 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 à utiliser. Elle offre une plus grande diversité, mais elle est sûre. Le principe de base est qu'il n'y a pas de composition harmonieuse. Ces palettes de couleurs sont particulièrement bien adaptées aux sites Web qui doivent plaire à un grand nombre d'utilisateurs.

Tu devrais quand 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 aussi l'exemple de Slaveryfootprint.org.

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 plus de possibilités de combinaisons.

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

La troisième couleur est souvent utilisée par les designers:in comme couleur d'accentuation et utilisée avec beaucoup de parcimonie. Grâce à ce principe, tu peux ajouter un doux contraste à tes sites Web.

Combinaison de couleurs carrée

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. Mais il faut faire preuve de doigté 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.

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

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 couleurs ou plus qui se trouvent côte à côte sur le cercle chromatique. Les palettes de couleurs analogiques sont moins contrastées que les compositions décrites précédemment, mais elles ne manquent pas leur effet. 

Pour ton site Web, il est bon 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 aussi celle qui crée l'ambiance sur ton site.

Monochrome

Monochrome décrit différents tons et/ou chroma de la même couleur. C'est la manière la plus simple d'obtenir une combinaison de couleurs harmonieuse. Bien utilisée, elle peut néanmoins 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 monochromes sont peu contrastés.

Chroma et teinte

L'utilisation de couleurs avec 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.

Inspiration & outils pour la théorie des couleurs

C'est maintenant un classique et toujours 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 une gamme d'inspiration pour les dégradés et les styles CSS correspondants.
• Khroma est une application de navigateur basée sur l'IA qui apprend quelles couleurs te parlent le plus et crée des combinaisons correspondantes. A recommander sans hésitation 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 la même manière qu'Adobe Color Wheel. Tu peux définir le principe de création de ta palette de couleurs. 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.

En plus, Emotive Feels t'offre un site web bien conçu pour explorer les différentes couleurs et leurs effets.