Théorie des couleurs, 3 : Créer votre palette

Par Cameron Chapman

Dans les deux premières parties de cette série sur la théorie des couleurs, nous avons parlé de la signification des couleurs et de la terminologie des couleurs. Même si tout cela est important, je suis sûre que beaucoup d’entre vous se demandaient quand nous allions enfin entrer dans le vif du sujet de la création de schémas de couleurs.

Eh bien nous y voici ! Ici, nous allons parler de méthodes vous permettant d'associer les couleurs et de réaliser vos propres schémas. Nous allons parler des motifs traditionnels de schémas de couleurs (monochromes, analogues, complémentaires, etc.) mais aussi de la création de schémas qui ne sont fondés sur aucun de ces motifs. À la fin de cet article, vous disposerez des outils nécessaires pour créer de belles palettes de couleurs pour vos propres projets. La meilleure façon de développer votre savoir-faire est de pratiquer sans cesse : alors pourquoi pas se fixer le but de créer un schéma de couleur chaque jour ?

Révision rapide

Dans la première partie, nous avons vu que les couleurs ont des significations inhérentes, qui peuvent varier d’une culture ou d’un pays à l’autre. Ces significations ont un impact direct sur la façon dont vos visiteurs perçoivent votre site, même inconsciemment. Les couleurs que vous choisissez peuvent être favorables ou défavorables à l’identité que vous essayez de créer.

Dans la deuxième partie, nous avons passé en revue la terminologie des couleurs : Teinte (quelle est la “couleur”, bleue, rouge ?). Pureté (ou chroma : quel est le degré de pureté de la couleur, c’est à dire libre de blanc, noir ou gris). La luminosité ou valeur (caractère sombre ou clair d’une couleur). Tons (créés en ajoutant du gris à une teinte pure), ombres (créées en ajoutant du noir à une teinte pure), et nuances (créées en ajoutant du blanc à une teinte pure). Rappelons-nous ces termes et passons maintenant à l'association de couleurs et à la création de nos schémas.

Types de schémas de couleurs traditionnels

Il existe un certain nombre de standards prédéfinis de schémas de couleurs qui permettent de créer facilement de nouveaux schémas, en particulier pour les débutants. Dans ce qui suit, nous allons voir les schémas traditionnels, illustrés de quelques exemples à chaque fois.

Monochromatiques

Les schémas de couleurs monochromatiques sont constitués des différents tons, ombres et nuances d’une même teinte particulière. Ce sont les schémas de couleurs les plus faciles à créer puisqu’ils sont tirés d’une même teinte et il est difficile d’obtenir des schémas réellement affreux ou détonnants (même si c’est toujours possible).

Exemples :

Voici trois exemples de schémas de couleurs monochromes. Dans la plupart de ces schémas, la première couleur (à gauche) serait probablement celle que nous utiliserions dans un gros titre. La deuxième serait utilisée pour le corps de texte ou éventuellement le background. La troisième couleur serait utilisée pour le background, ou le corps de texte si la couleur n°2 servait de background. Et les deux dernières couleurs pourraient être utilisées par exemple à l’intérieur de graphiques, ou pour apporter certaines touches ou accents. Pour bien comprendre les explications qui suivent, consultez l’indispensable Théorie des couleurs 2 : concepts et terminologie !

Analogues

Ces schémas de couleurs sont assez faciles à créer. Pour cela, on prend trois couleurs contiguës sur le cercle des 12 couleurs. Les schémas de couleurs analogues ont généralement le même niveau de pureté, mais en utilisant des tons, des ombres et des nuances nous pouvons ajouter un intérêt supplémentaire à ces schémas et les adapter à nos besoins de design.

Exemples :

Complémentaires

On réalise les schémas de couleurs complémentaires en combinant des couleurs diamétralement opposées sur la roue des couleurs. Dans leur forme la plus basique, ces schémas sont constitués de deux couleurs, qu’on peut facilement multiplier en ajoutant des tons, ombres et nuances. Petite précaution cependant : l’utilisation côte à côte de couleurs totalement opposées, avec la même pureté, peut donner un effet détonnant (dans les pires des cas, elles semblent vibrer à la jointure) et il est préférable de l’éviter - soit en laissant un blanc entre les deux couleurs, soit en ajoutant une couleur de transition.

Exemples :

Complémentaires adjacentes

C’est presque aussi facile que les schémas de couleurs complémentaires. De chaque côté de la complémentaire se trouvent ses propres couleurs analogues. Cette palette est dite complémentaire adjacente : votre couleur de base, plus les couleurs analogues de la complémentaire.

Exemples :

Triadiques

Les schémas triadiques sont constitués de teintes espacées de manière égale dans le cercle chromatique. C’est un des schémas qui offre la plus grande diversité de couleurs.

Exemples :

Complémentaires doubles (Tétradiques)

Les schémas de couleurs tétradiques sont sans doute les plus compliqués à réaliser.

Exemples :

Personnalisés

Les schémas de couleurs personnalisés sont les plus difficiles à créer. Ils ne suivent pas les schémas prédéfinis que nous venons de voir, et ne sont basés sur aucune règle formelle. Gardez bien à l’esprit les notions de pureté (chroma), de luminosité (valeur) et de saturation lorsque vous créerez ce genre de schémas.

Exemples :

Créer un schéma de couleurs

Il peut être intimidant lorsqu’on débute de se lancer dans la création de son premier schéma de couleurs. Mais ce n’est pas aussi compliqué qu’on le croit et il existe un certain nombre d’astuces qui vous permettront de créer de superbes palettes dès vos premiers essais.

Nous avons passé en revue les différents types de schémas de couleurs. Maintenant essayons de réaliser notre propre schéma. Beaucoup d’outils sont disponibles en ligne pour cela ( NdT : vous trouverez en fin d’article une liste d’outils très divers et tous passionnants) mais oublions-les pour l’instant et utilisons Photoshop.

Sortons des schémas de couleurs types et essayons de créer quelque chose de personnel. S’il est important de connaître la façon dont les couleurs interagissent et la manière de construire les schémas traditionnels, il est probable que pour la plupart de vos projets vous créerez des schémas personnalisés qui s’éloignent des schémas prédéfinis.

Pour notre projet nous allons créer trois schémas de couleurs pour deux sites. Nos clients imaginaires sont un blog de design réalisé par un cabinet d’architectes et un commerce de vêtements féminins, spécialisé dans le style inspiré de l’époque victorienne.

Nous commençons avec un schéma monochromatique très simple, juste pour avoir une première impression. J’ai dit tout à l’heure que les schémas de couleurs traditionnels ne sont pas si souvent utilisés dans le design, mais les schémas monochromatiques sont une exception à cette règle. Vous utiliserez sans doute régulièrement les schémas monochromatiques.

De l’importance des ombres, tons et nuances

Comme on le voit avec les schémas de couleurs qui précèdent, l’utilisation des nuances, des tons et des ombres est vitale. Les teintes pures ont des niveaux de valeur et de saturation similaires, ce qui donne aux schémas de couleurs un aspect écrasant et ennuyeux à la fois.

En y ajoutant des tons, ombres et nuances, vous étendez les 12 couleurs du cercle chromatique à un nombre infini. Une des façons les plus simples de créer un schéma de couleurs professionnel consiste à prendre quelques tons, nuances et ombres d’une couleur donnée (en évitant la teinte pure), puis d’ajouter une autre teinte pure (ou presque pure) distante d’au moins trois espaces sur la roue des couleurs (appartenant à un schéma de couleurs tétradique, triadique, ou complémentaire adjacent) pour la couleur d’accent. Vous ajoutez ainsi un fort intérêt visuel, tout en gardant une bonne sensation d’équilibre.

Ajouter des couleurs neutres

Les couleurs neutres sont un composant important d’un schéma de couleurs. Les gris, noir, blanc, brun, beige et blanc cassé sont généralement considérés comme neutres. Les marron, beige et blanc cassé donnent de la chaleur à votre schéma - ce sont en réalité des tons, des ombres et des nuances d’orange et de jaune. Le gris sera chaud ou froid en fonction des couleurs environnantes. Il en va de même du blanc et du noir.

Le blanc et le noir sont les deux couleurs neutres les plus faciles à ajouter à n’importe quel schéma de couleurs. Pour ajouter un peu d’intérêt visuel, il est toutefois préférable d’utiliser une ombre très pâle ou très foncée de gris à la place du blanc ou du noir.

L’ajout de marron, de beige et de blanc cassé est un peu plus délicat, mais avec de la pratique ça deviendra plus facile. Pour les marrons, essayez un marron chocolat très foncé à la place du noir. Un blanc cassé pâle peut remplacer le blanc ou le gris pâle. Un beige peut remplacer le gris, et c’est encore plus facile si vous créer un ton en y ajoutant du gris.

Utiliser des photos

Lorsque je veux créer un schéma de couleurs, une de mes méthodes préférées est d’utiliser une photographie. Il existe des outils en ligne qui peuvent le faire automatiquement pour vous (Adobe Kuler par exemple), ou bien vous pouvez le faire directement dans Photoshop.

Avec Adobe Kuler, vous pouvez utiliser des photos sur des sites tels que Flickr, ou bien uploader votre propre image. Si vous êtes en panne sèche d’imagination, essayez Flickr (ou un des nombreux sites de photos libres de droits) pour trouver l’inspiration. Cela vous donnera peut-être des idées de schémas que vous n’aviez pas imaginées.

Essayons cette méthode, de deux façons (Kuler et Photoshop). Prenez une photo qui vous plaît et qui évoque les sensations que votre design doit refléter. Pour ma part j’ai choisi celle-ci :

Une fois sur Kuler, il suffit d’aller sur Créer en bas de page et choisir créer à partir d’une image pour uploader l’image de votre choix. Voici le schéma de couleurs original que Kuler nous donne à partir de cette image :

Il y a une fonctionnalité très sympa dans Kuler c’est l’option ’Atmosphère de couleur’, elle devient disponible lorsque vous uploadez votre photo. Vous avez le choix entre Coloré, Lumineux, Sourd, Profond, Sombre et Personnalisé. Voici les schémas qu’on obtient en utilisant chacune de ces atmosphères à partir de la même photo :

Créons maintenant un schéma avec Photoshop, toujours en partant de la même image. C’est un peu moins scientifique que Kuler. Je prends généralement une couleur avec l’outil pipette et ensuite je clique sur différents endroits de l’image jusqu’à trouver les couleurs qui vont bien ensemble. Voici le résultat, qui m’a pris moins de 5 minutes avec Photoshop, c’est moins long que ça n’a l’air :

Il est plus facile de créer des schémas avec Photoshop lorsque les images sont relativement monochromes. Essayons quelque chose de plus difficile, avec une image plus colorée :

Voici les cinq schémas de couleurs que nous donne Kuler :

Et voici ce que j’ai réalisé avec Photoshop à partir de la même image :

Comme vous pouvez le voir, la version Photoshop est complètement différente des versions Kuler, mais tous les schémas sont visuellement attrayant. La version Photoshop a pris un peu plus de 5 minutes, en raison de la richesse des couleurs dans l’image.

Les schémas les plus faciles

Nous l’avons déjà évoqué, l’ajout d’une couleur vive pour donner un accent dans une palette neutre par ailleurs est une des façons les plus simples de créer un schéma de couleurs. C’est aussi l’une des plus fortes visuellement. Si vous débutez dans la création de schémas personnalisés, commencez avec ce type de palette.

Voici quelques exemples pour illustrer mon propos :

Vous pouvez utiliser des tons de n’importe quelle couleur à la place du gris et du marron, mais plus ils se rapprochent du gris et meilleur sera l’effet. Les gris froids ou purs fonctionnent mieux avec des design modernes, tandis que les gris chauds ou légèrement bruns sont plus adaptés à des designs traditionnels.

Combien de couleurs ?

Vous avez sans doute remarqué que tout au long de cet article nous avons utilisé des schémas de cinq couleurs. Cinq est un bon chiffre, il vous donne beaucoup d’options pour illustrer les concepts exposés ici et c’est une quantité de couleurs qui fonctionne bien. Mais vous êtes libres d’utiliser plus ou moins de couleurs dans vos schémas.

Beaucoup de sites webs n’utilisent que trois couleurs, d’autres seulement deux, et certains jusqu’à huit ou dix (ce qui est beaucoup plus difficile). Faites des expériences et choisissez le nombre de couleurs qui convient à votre design. Mais il peut être plus pratique de commencer avec une palette de cinq couleurs et d’ajouter ou de supprimer certaines en fonction de l’évolution de votre design.

La façon la plus simple d’ajouter une couleur est de commencer avec une des couleurs prédéfinies dans les schémas traditionnels et de travailler à partir de cette base. Cela vous donne en tout cas une direction quant aux choix des couleurs de complément.

10 sites intéressants pour leurs schémas

Pour vous aider dans votre recherche, voici dix sites web construits sur d’excellents schémas de couleurs. Certains schémas paraîtront peut-être un peu bizarres à première vue, mais il est intéressant de voir comment ils sont utilisés pour comprendre l’étendue des possibilités offertes par les schémas de couleurs.

Wenting Cycle & Mountain Shop

Schéma :

Trivuong.com

Schéma :

Oscar Barber

Schéma :

North East Peace III Partnership

Schéma :

MBA Architects

Schéma :

Studio 13

Schéma :

Joy Project

Schéma :

Morphix Blog

Schéma :

El designo

Schéma :

Lemonstand

Schéma :

Conclusion

Cette série d’articles est une première approche de la théorie des couleurs. Il y a des spécialistes qui ont passé des années, ou leur vie, à affiner leur talent et sont passés maîtres dans le choix des couleurs appropriées à telle ou telle situation.

Comme toujours, la meilleure façon d’apprendre est de pratiquer. Créez un schéma par jour. Commencez avec des outils automatisés, comme Kuler, ou amusez-vous avec Photoshop. Si vous remarquez une couleur particulièrement belle dans la rue, dans un magazine, dans un site, créez un schéma à partir d’elle. Utilisez tous les sites en lignes qui vous permettent de créer vos schémas et de les conserver en mémoire. Ce sera plus pratique pour créer de nouveaux schémas et plus facile pour de futures utilisations.

Et n’oubliez pas de consulter les ressources utiles listées ci-dessous !

La série de trois articles :

• Théorie des couleurs, 1 : Signification des couleurs
• Théorie des couleurs, 2 : Concepts et terminologie
• Théorie des couleurs, 3 : Créer votre palette

Intéressé par le design ? Sur la Cascade, retrouvez des articles et ressources.

Tous les articles sur la couleur dans La Cascade.

Ressources complémentaires

• Color Template, pour tout savoir sur les couleurs, un très joli site, très complet et instructif.
• Adobe Kuler, outil en ligne pour choisir ses couleurs, très complet et inspirant.
• Color Scheme Designer, comme Kuler, avec un fonctionnement différent, très bien fait.
• WebColorData, avec cet outil les couleurs n’auront plus aucun secret pour vous. Entrez l’url d’un site internet et WebColorData référence en un panel les couleurs dominantes trouvées. Vraiment pratique.
• Color.io, autre outil très pratique pour choisir une couleur et toute la palette complémentaire.
• Pictaculous, quel schéma de couleurs utiliser avec une image ? Uploadez votre image sur Pictaculous, il vous donnera une belle palette de couleurs.
• Mudcube colour sphere vous permet de créer des schémas de couleurs et de vérifier leur accessibilité aux personnes souffrant de déficiences visuelles.
• 0 to 255, un outil simple pour trouver des variations sur une couleur.
• Hex.colorrrs, un convertisseur de Hex en RGB, simple, bien fait, visualisation de la couleur en cours de frappe.
• Brand Colors, une collection de palettes de couleurs des grandes marques.
• The colors of motion, un site créatif par Charlie Clark qui explore l’utilisation des couleurs dans les films. Pas de mots, juste des couleurs. Choisissez un film, cliquez sur une bande de couleur, regardez les images et l’harmonie des couleurs.
• Spectrum, une superbe application (Mac) pour créer vos palettes, les triturer, les exporter, intégrer directement une couleur dans CSS, etc.

Ressources complémentaires en anglais

• Basic color schemes
• The 28 best tools for choosing your color scheme, par Creative Bloq

Ressources complémentaires en français

• Le cercle chromatique, un superbe pdf à télécharger sur la lumière, les couleurs, les associations de couleurs.
• Composition des couleurs, autre pdf de chez Pearson, sur les bases de la photographie mais dans la logique de cet article.
• Le cercle chromatique, article de wikipedia