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

Troisième et dernier article de notre série sur la théorie des couleurs. Nous connaissons la signification et la terminologie des couleurs, passons maintenant à la création des schémas de couleurs.

Par

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.

image

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.

image
Le cercle chromatique, partagé en 12, est un outil important pour la création de schémas de couleurs.

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 !

image
image
image

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 :

image
Voici tout d’abord un schéma de couleurs analogues traditionnel, même s’il est intéressant visuellement il manque de contraste pour une utilisation efficace dans un site web.
image
Voici maintenant le même schéma, avec les mêmes teintes mais des variations de pureté. La variété et le contraste le rendent plus apte à être utilisé dans un design.
image
Un autre exemple de schéma analogue.
image
Le même schéma, modifié pour une bonne utilisation dans un site web.

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 :

image
Un schéma facile à utiliser grâce à une large palette de tons, ombres et nuances.
image
Un autre schéma de couleurs complémentaires utilisant une gamme étendue de chromas.
image
N’oubliez pas que le beige et le marron sont des ombres et nuances d’orange.

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 :

image
Un schéma dans lequel le jaune-vert est la teinte de base. Il est important d’avoir suffisamment de différence de chroma et de valeur entre les couleurs.
image
Une autre palette comportant une large variété de chromas

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 :

image
L’utilisation d’une couleur très pâle, ou très foncée, en association avec deux ombres/tons/nuances des deux autres couleurs, donne à cette première couleur un rôle presque neutre dans le schéma.
image
À l’inverse, l’utilisation d’une teinte très brillante en association avec des paires de teintes aux tons pastels fait ressortir la teinte principale.

Complémentaires doubles (Tétradiques)

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

Exemples :

image
Un schéma de couleurs tétradique pas très impressionnant. La meilleure façon d’utiliser un schéma comme celui-ci est de donner le rôle principal à une couleur, les autres étant utilisées comme accents.
image
Les schémas de couleurs tétradiques fonctionnent bien pour créer des schémas aux chromas et valeurs similaires. Ajoutez simplement une couleur neutre (gris foncé ou noir) pour le texte et les accents.
image
Cela fonctionne bien aussi avec les schémas de couleurs sombres.

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 :

image
Ici les couleurs ont des niveaux de chroma et de saturation similaires.
image
Ici aussi, une utilisation efficace de couleurs aux chroma et saturation similaires, qui donne une sensation de cohésion de l’ensemble du schéma de couleurs.
image
L’utilisation d’une couleur très pure parmi des couleurs à faible chroma est un choix efficace (la couleur pure peut être utilisée pour mettre en valeur quelque chose)

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.

image

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.

image
Pour notre magasin de vêtements, voici un schéma monochromatique traditionnel, avec du blanc ajouté.
image
Pour notre blog de design, nous utilisons un schéma de couleurs constitué d’ombres et de nuances de gris.
image
On a presque un schéma analogue, mais nous avons laissé de côté une couleur. Le schéma est réalisé à partir d’ombres de violet et de rouge-violet. Ces deux couleurs sont côte à côte dans la roue des couleurs et fonctionnent très bien ensemble, surtout quand on les utilise avec des niveaux de valeur et de saturation différents.
image
L’ajout d’ombres au schéma de couleurs gris donne un grand intérêt visuel et permet de créer des accents dans votre design.
image
Ici, nous nous sommes débarassés des teintes violettes et nous avons maintenant une couleur ’bourgogne’, proche du rouge-violet sur la roue des couleurs. Nous avons également créé un ton de jaune très pâle qui se situe à l’opposé sur la roue des couleurs. Ce blanc cassé pourra servir de couleur neutre par rapport à nos autres couleurs.
image
Ce schéma de couleur à l’air à première vue d’une palette grise et rouge standard, pourtant en regardant de plus près vous verrez que les gris sont en réalité des tons de bleu. Le bleu et le rouge représentent 2/3 du schéma de couleurs tétradique et fonctionnent bien ensemble sans le jaune, surtout quand le rouge reste pur et le bleu devient presque gris grâce aux tons.

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.

image

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.

image

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 :

image

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 :

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 :

image
Coloré
image
Lumineux
image
Sourd
image
Profond
image
Sombre

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 :

image

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 :

image

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

image
Coloré
image
Lumineux
image
Sourd
image
Profond
image
Sombre

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

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 couleur 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 :

image
image
image
image
image
On voit ici que l’utilisation de marrons à la place de gris donne de la chaleur à l’ensemble du schéma malgré l’accent bleu.

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.

image

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

image

Schéma :

image

Trivuong.com

image

Schéma :

image

Oscar Barber

image

Schéma :

image

North East Peace III Partnership

image

Schéma :

image

MBA Architects

image

Schéma :

image

Studio 13

image

Schéma :

image

Joy Project

image

Schéma :

image

Morphix Blog

image

Schéma :

image

El designo

image

Schéma :

image

Lemonstand

image

Schéma :

image

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 :


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

Ressources complémentaires en français


original paru le dans Smashing Magazine.

Sur l’auteur : est designer web et graphique, elle écrit pour de nombreux blog, y compris le sien, Cameron Chapman On Writing. Elle est aussi l’auteur de The Smashing Idea Book: From Inspiration to Application. On peut la suivre sur Twitter et sur Google+.

Traduit avec l’aimable autorisation de Smashing Magazine et de l’auteur.
Copyright Smashing Magazine © 2010.