Il semble que l’être humain soit capable de distinguer le beau du laid. Mais qu’est ce que la beauté ? D’après ce que j’en ai compris, le beau pourrait être la perception sensorielle d’une chose qui déclenche un sentiment de contentement, de plaisir. Donc il y a harmonie lorsque une juxtaposition de couleurs produit un plaisir pour l’oeil. Le choix d’une composition de couleurs harmonieuses peut être intuitif ou inspiré de la nature, d’un tableau… Il existe également certaines règles établies par l’homme se basant sur les caractéristiques des couleurs.
Quelques rappels de base
Pour se rafraichir la mémoire et aborder le sujet de l’harmonie des couleurs, voici un certain nombre de définitions issus de Wikipédia qu’il me semble important de connaitre :
La couleur est la perception par l’œil d’une ou plusieurs fréquences d’ondes lumineuses, avec une (ou des) amplitude(s) donnée(s).
Pour simplifier je dirais que la couleur n’existe pas sans lumière. Celle-ci est composée de plusieurs ondes. L’oeil humain (le récepteur sensible à ces ondes) génère un message nerveux que le cerveau interprète par une couleur. Notez que l’oeil humain n’est pas sensible à toutes les ondes qui composent la lumière.
Selon la technique utilisée pour produire de la couleur nous distinguerons 2 types de synthèse :
Atteindre les premières positions sur Google
La synthèse additive est l’opération consistant à combiner la lumière de plusieurs sources émettrices colorées afin d’obtenir une nouvelle couleur.
En synthèse additive, les couleurs primaires généralement utilisées sont au nombre de trois : le rouge, le vert et le bleu (RVB ou RGB).
La synthèse additive est le principe de composition des couleurs utilisées notamment dans les écrans cathodiques, les écrans LCD et les vidéoprojecteurs tri-tubes.
Contenu ou Design : Quoi faire en premier ?
La synthèse soustractive est l’opération consistant à combiner l’effet d’absorption de plusieurs couleurs afin d’en obtenir une nouvelle.
Par exemple, la superposition sur une surface blanche de deux filtres colorés, l’un jaune et l’autre bleu, permet d’obtenir du vert.
Le terme soustractif vient du fait qu’un objet coloré soustrait (absorbe) une partie de la lumière incidente. De fait, une couleur obtenue par synthèse soustractive de plusieurs autres sera nécessairement plus sombre qu’elles.
En synthèse soustractive, les couleurs primaires généralement utilisées sont au nombre de trois : le cyan, le jaune et le magenta
La synthèse soustractive est le principe qui régente le mélange de pigments colorés en peinture (et notamment en aquarelle), en impression trichromique ou quadrichromique, ainsi qu’en impression papier pour la photographie couleur.
En imprimerie, on ajoute le noir aux trois couleurs de base pour plusieurs raisons: économie d’encres (une seule couleur au lieu de trois, et de surcroît l’une des moins chères à fabriquer), amélioration des contrastes d’images et de texte, et pureté du noir. En effet, la qualité du noir composé par mélange des trois couleurs primaires est intimement lié à la pureté des pigments de base, et il est par cette méthode très difficile d’obtenir une noir neutre.
Un cercle chromatique est une représentation circulaire des couleurs. Celles-ci sont ordonnées comme au sein d’un arc-en-ciel, la fermeture du cercle s’effectuant par une transition du rouge au violet via le magenta.
L’image de gauche nous montre un cercle chromatique du système additif.
L’intérêt du cercle chromatique réside dans ses caractéristiques :
9 points communs entre le développement d’un site Web et la construction d’une maison
Les couleurs primaires sont au nombre de trois. Pour la synthèse additive ce sont le rouge, le vert et le bleu. Pour la synthèse soustractive il s’agit du magenta, du cyan et du jaune.
L’image de gauche nous montre les couleurs primaires d’un cercle chromatique du système additif.
Par couleur primaire on entend couleur faisant partie d’un ensemble qui par combinaison permettent de générer l’ensemble des couleurs perceptible par l’œil humain.
Une couleur secondaire est une couleur obtenue par le mélange en quantité égale de deux couleurs primaires.
L’image de gauche nous montre les couleurs secondaires d’un cercle chromatique du système additif. Il s’agit du Magenta, du Cyan et du Jaune. Dans la synthèse soustractive il s’agirait du rouge, du vert et du bleue (qui sont les couleurs primaires du système additif).
Une couleur tertiaire est une couleur obtenue par le mélange en quantité égale d’une couleur primaire et d’une couleur secondaire voisine c’est à dire consécutive sur le cercle chromatique.
L’image de gauche nous montre les couleurs tertiaires d’un cercle chromatique du système additif. Les couleurs tertiaires sont au nombre de six.
Une couleur complémentaire est la couleur opposée à une autre sur le cercle chromatique. On définit deux couleurs comme complémentaires si mélangées ensemble, elle produisent un gris.
Le modèle TSV : Teinte, Saturation, Valeur
Le modèle TSV est un espace colorimétrique, défini en fonction de trois composantes :
A noter que deux couleurs pures différentes n’ont pas la même clarté. Le jaune est la couleur la plus clair du cercle chromatique et le violet la plus sombre.
Le modèle TSV est particulièrement utilisé dans les applications graphiques. La Teinte est représentée par une région circulaire; un triangle séparé peut être utilisé pour représenter la Saturation et la Valeur. Typiquement, l’axe vertical du triangle représente la Saturation, alors que l’axe horizontal représente la Valeur. En informatique graphique, il est courant de représenter chaque canal de couleur par un entier entre 0 et 255 plutôt que par un réel entre 0 et 1. Encodé de cette manière, chaque couleur TSV a un équivalent RVB. Pourtant, l’inverse n’est pas vrai. Certaines couleurs RVB n’ont pas d’équivalent TSV. En fait, seulement 1/256e des couleurs RVB sont ‘disponibles’ en TSV, ce qui élimine effectivement un canal de contrôle pour l’utilisateur artiste.
Camaïeu
Un ton est, théoriquement, l’ensemble des couleurs obtenues par toutes les modifications d’une couleur pure que l’on peut réaliser avec des gris neutres (désaturation), du blanc (éclaircissement), du noir (assombrissement). Les différents tons d’une même couleur sont appelés « Camaïeu ». Camaïeu de rouge, de vert … Voir les accords monochromatiques.
Protéger mon business maintenant !
La roue chromatique peut être divisée en 2 ensembles distincts (cf image) regroupant d’un côté un groupe de couleurs dites « chaudes » de l’autre un groupe de couleurs dites « froides »
Il semble que notre organisme soit sensible à la teinte des couleurs qui l’entoure. Une étude médicale à par exemple montré que la perception du vert bleuté ralentit la circulation sanguine alors que le rouge orangé l’active.
Il faut en tenir compte, on évitera ainsi d’utiliser le rouge pour un site de thalassothérapie si le message à faire passer est la quiétude et le repos.
Plus généralement :
Les couleurs chaudes suggèrent la proximité, l’énergie, la vivacité.
Les couleurs froides suggèrent l’éloignement, l’apaisement, le calme.
C’est un sujet qui répond d’avantage de la subjectivité que de règles établis. En effet la symbolique des couleurs et les effets psychologiques ou sensations qu’elles provoquent diffèrent selon l’historique personnel des individus, la culture et l’époque.
Cependant des généralités semblent se dégager pour une majorité de personnes appartenant à une même culture dans une époque donnée.
Voici quelques exemples d’interprétation des couleurs qui, je le rappelle, ne sont pas des règles absolues.
Les couleurs peuvent se faire concurrence entre elles si elles sont utilisées à valeurs ou à surfaces égales dans un design. L’oeil du spectateur peut alors se perdre en sautant d’une couleur à l’autre.
Si l’on souhaite réaliser un design psychédélique pour un événement musical par exemple, en privilégiant l’aspect graphique, ce n’est pas grave. Par contre si vous souhaitez conduire le regard de l’internaute vers des zones importantes de votre design, mieux vaut choisir parmi les couleurs de votre composition celle qui sera dominante (c’est à dire celle qui va couvrir la plus grande surface), celle qui sera tonique (celle qui créera de l’emphase et sera utilisée pour la plus petite surface) et les autres de moindre importance.
Pour éviter la concurrence des couleurs, la couleur dominante sera fortement atténuée soit en la désaturant, soit en modifiant sa valeur (par éclaircissement ou par assombrissement).
La couleur tonique sera utilisée pure et bien saturée.
Les autres couleurs, si il en a, seront moyennement atténuées par désaturation ou en jouant sur la valeur (luminosité).
12 astuces pour attirer des millions de visiteurs sur votre site web
Je vais, dans ce chapitre, énumérer des techniques qui utilisent la roue chromatique. Le nom des techniques sera traduit en anglais pour que vous puissiez faire le rapprochement avec les libellés utilisés dans les applications graphiques qui parfois sont en anglais. Chaque technique sera accompagnée d’une image illustrant le type de combinaison décrit sur une roue chromatique. Rassurez vous, un chapitre sur les outils vous proposera quelques ressources pour vous aider à réaliser ces types d’harmonies plus facilement. Cependant pour utiliser ces outils au mieux il est important de connaître ces techniques de base.
Notez que par simplification, nous nous basons ici sur une roue chromatique de 12 teintes (3 primaires, 3 secondaires, 6 tertiaires ) pour expliquer les techniques de base. Toutes ces règles sont bien sure transposables sur une roue chromatique complète qui fournit toutes les nuances de teinte. Comme le webdesign s’apprécie généralement sur un écran, j’utiliserai pour mes exemples une roue chromatique de la synthèse additive.
Pour obtenir une composition monochromatique il suffit de choisir une teinte unique puis la décliner soit en :
On peut également combiner désaturation et éclaircissement (ajout de gris neutre + blanc = gris clair) ou assombrissement (ajout de gris neutre + noir = gris foncé), cela aboutit à une composition monochromatique plus contrasté, avec un peu plus de punch.
Les compositions monochromatiques sont aussi appelées « camaïeu ». Elles donnent des contrastes de couleur dit « clair-obscur »
Les compositions monochromatiques permettent des designs sobres et élégants.
La composition analogue double (2 teintes) ou triple (3 teintes) est composée de teintes voisines sur la roue chromatique.
Ce type de composition fonctionne généralement bien et est plaisant à regarder. Elles donnent des designs où règne la sérénité, le confort, l’harmonie. On rencontre souvent ce type de composition de couleurs dans la nature.
La composition analogue DOUBLE est composée de deux teintes.
Il existe 3 formules:
La composition analogue TRIPLE est composée de trois teintes.
Il existe 5 formules:
La composition complémentaire s’obtient en choisissant deux teintes diamétralement opposées sur le cercle chromatique.
L’important contraste entre deux couleurs complémentaires créer un environnement vibrant surtout à pleine saturation. Ce type d’arrangement peut être délicat à manipuler à forte dose, mais fonctionne bien si vous voulez faire ressortir quelque chose. Évitez les couleurs complémentaires pour le texte.
Il existe 2 formules:
Si vous avez une couleur dominante et une couleur tonique dans votre design, dans ce type de composition, l’une des deux couleurs joue le rôle de dominante et l’autre de tonique.
Les compositions accords isocèles sont obtenues en choisissant 3 teintes sur la roue chromatique formant un triangle isocèle. Les teintes qui forment la base sont voisines mais séparées d’une teinte.
Ce type de composition a le même fort contraste visuel que les compositions complémentaires mais avec moins de tension. C’est est un bon choix pour débuter car facile à réaliser.
Il existe 3 formules: (base / base > sommet … du triangle isocèle)
Votre tonique sera la couleur qui forme le sommet du triangle, la dominante l’une des deux autres.
Les compositions accords équilatéraux s’obtiennent comme les isocèles mais le triangle formé est équilatéral. Les 3 teintes sont séparées par 3 autres sur le cercle chromatique.
Ce type de composition à tendance à donner une ambiance assez vibrante même si l’on utilise des versions de teintes désaturées ou éclaircies. Pour réussir l’harmonie d’une composition accord équilatéral les couleurs doivent être soigneusement équilibrées si elles sont utilisées pures.
Il existe 3 formules:
Ces formules fournissent trois teintes, soit :
La composition analogue double + 1 complémentaire s’obtient en choisissant 2 teintes voisines et une complémentaire de l’une des deux teintes.
Il existe 6 formules: (-> adjacentes; <> opposées)
Dans ces formules la tonique sera la couleur complémentaire (position 3 de la formule) et la dominante sera la couleur opposée à la complémentaire (position 2 de la formule).
La composition 4 tons en rectangle s’obtient en choisissant 4 teintes sur le cercle chromatique formant un rectangle. Cela nous donne une paire de couleurs complémentaires.
Ce type de composition vous offre beaucoup de possibilités de variation et fonctionne mieux si vous laissez l’une d’entre elle dominer.
Il existe 2 formules:
Ces formules donnent des compositions de 2 couleurs froides et 2 couleurs chaudes.
La dominante sera l’une des quatres couleurs au choix, la tonique sera la complémentaire de la dominante choisie.
La composition 4 tons en carré s’obtient en choisissant 4 teintes sur le cercle chromatique formant un carré.
Ce type de composition vous offre beaucoup de possibilités de variation et fonctionne mieux si vous laissez l’une d’entre elle dominer.
Il existe 1 formule:
La dominante sera l’une des quatres couleurs au choix, la tonique sera la complémentaire de la dominante choisie.
La composition analogue triple + 1 complémentaire s’obtient en choisissant 4 teintes sur le cercle chromatique. 3 teintes voisines + la complémentaire de la couleur centrale.
Ce type de composition vous offre beaucoup de possibilités de variation et fonctionne mieux si vous laissez l’une d’entre elle dominer.
Il existe 7 formules:
La tonique sera la couleur complémentaire et la dominante la couleur opposée à la complémentaire.
Une composition zone d’influence d’une couleur primaire est un accord de 7 couleurs (1 couleur primaire, 2 couleurs secondaires et 4 couleurs tertiaires). Son emploi est très limité en webdesign car l’utilisation de 4 teintes est souvent un maximum. On l’utilise d’avantage dans la décoration de bâtiments. Cependant il est intéressant de la connaître c’est pourquoi j’en parle rapidement ici.
Sur une roue chromatique simplifiée comme celle que l’on utilise dans cet article, 3 compositions de ce type peuvent être extraites. Pour cela il suffit de prendre une couleur primaire et les trois couleurs adjacentes de part et d’autre de celle-ci. On obtient donc 3 compositions avec une zone d’influence soit du rouge, soit du vert, soit du bleu. (cf image, composition zone d’influence du bleu)
Pour une harmonie réussie, mieux vaut respecter l’éloignement des couleurs par rapport à la primaire.
Obtenir un site rapide sur Google Page Speed
La méthode de la roue chromatique n’est pas la seule pour obtenir une harmonie de couleurs. Si votre client vous propose un logo ou si vous partez d’une image qui aura un poids important dans votre design, vous pourrez vous en inspirer pour en extraire une palette de couleur.
Soit vous utilisez un outil pipette et allez chercher les teintes qui vous plaisent dans l’image, soit vous utilisez un outil en ligne de type Pic2Color qui vous extrait directement la palette de couleur de votre image.
Pour mieux comprendre cette technique, je vous conseil l’article bien illustré de Dave Shea sur le site 24ways.org.
Gagner des milliers de dollars en testant le prototype avant de créer le code
Il existe sur le web de nombreux outils qui vous aiderons à composer votre palette de couleur pour vos futurs design.
Pour concevoir un design web qui fonctionne, il faut savoir choisir une composition de couleurs harmonieuses afin d’établir une charte graphique agréable à regarder. Mais est ce une condition suffisante ? Non, un design web réussi c’est aussi un design qui aide à transmettre un message, aide l’oeil à trouver l’information, met le contenu en valeur, ne laisse pas votre lecteur indifférent. Soigner le design de votre site c’est aussi soigner votre image, que vous soyez une société, une organisation, une association, un indépendant …
Nos sources
Ouvrages:
Sites web :
EXCELLENT Basée sur 22 avis pierre lenfantTrustindex vérifie que la source originale de l'avis est Google. Aurone est un agence web comme on n'en fait plus ! Très réactive, d'une grande souplesse dans le travail et toujours à la pointe de la technologie, vous pouvez compter sur de vrais pros pour tous vos projets web ! Sami Yassine TurkiTrustindex vérifie que la source originale de l'avis est Google. J'ai eu un plaisir à travailler, en tant que secrétaire général de l'association Lina Ben Mhenni, avec l'agence AURONE qui a assuré avec beaucoup de professionnalisme le développement de notre site web. Gwladys LavergneTrustindex vérifie que la source originale de l'avis est Google. Réactifs, attentifs, et très compétents nous sommes ravies de travailler avec Aurone qui sait parfaitement répondre à nos attentes que ce soit en terme de design graphique ou bien dans leurs compétences techniques ! Je recommande vivement leur accompagnement ! Perrine AmalTrustindex vérifie que la source originale de l'avis est Google. Aurone est une entreprise humaine, réactive et efficace. Travaux réalisés rapidement et avec célérité. Je recommande vivement et espère poursuivre cette collaboration à l'avenir. Stephanie WillmanTrustindex vérifie que la source originale de l'avis est Google. Nous travaillons avec Aurone dans le cadre de notre travail depuis 2016 et en sommes ravies. Au début nous avons commencer à solliciter leurs services pour un projet en Tunisie, et la qualité de leur travail a fait que nous sollicitons Aurone même pour des services dans d'autres pays. L'équipe est dynamique, créative, réactive et enthousiaste. Ils ont toujours bien compris nos besoins pour nos diverses et complexes présences web, et font de leur mieux pour y répondre. Plateformes web, ateliers de formation sur les plateformes, vidéos tutoriels, et conception graphique de divers produits ne sont que quelques uns des excellentes services fournies par Aurone. La qualité technique des prestations web sont top et nous recevons toujours de bons conseils que ce soit au niveau technique que graphique. Nous les recommandons fortement. Raphaël GianassoTrustindex vérifie que la source originale de l'avis est Google. Pour vos projets e-commerce et marketing digital, les collaborateurs d'Aurone font preuve d'écoute, d'expérience, de disponibilité et de réactivité. Une équipe sur laquelle on peut compter et pour laquelle la satisfaction du client est primordiale Samuel DechometsTrustindex vérifie que la source originale de l'avis est Google. J'ai trouvé chez Aurone tout ce que l'on peut attendre d'une bonne agence web : qualité, réactivité, souplesse, pertinence... Bravo et merci Karim DjebbarTrustindex vérifie que la source originale de l'avis est Google. L'ensemble de notre réseau a travaillé pendant plusieurs années avec l'agence Aurone. Quelques réglages ont été nécessaires au début de notre partenariat à l'époque. La qualité a rapidement été au rendez-vous. Les équipes ont travaillé de façon très professionnelle, et adaptée aux exigences de la clientèle française avec qui nous les avons rapidement mis en relation. Beaucoup d'agilité de la part de son fondateur. Merci pour ces belles années !
27 Avenue Taieb Mhiri
Immeuble Yasmina, bureau 17
2080 Ariana, Tunis, Tunisie
+216 22 774 450
Centre d'affaires TODA 2
Rue du Rhin Napoléon
67100 Strasbourg, France
+33 9 80 80 10 18
Rue du Port Franc, 2A
1003 Lausanne
Suisse
Avenue Mutsaard, 41
1020 Bruxelles
Belgique
+32 2 588 07 54