Il est très difficile de choisir de bonnes couleurs pour les infographies. Nous essaierons de résoudre ce problème.
Après avoir lu cet article, vous vous sentirez plus confiant dans vos choix de couleurs. Et si vous n'avez aucun sens de la couleur, ce ne sont que des recommandations pour de bonnes combinaisons. Parlons des erreurs de couleur courantes qui nous entourent partout et comment les éviter.
Cet article ne vous aidera pas à trouver de bons dégradés ou nuances. Il est conçu pour fournir de belles couleurs nettes pour diverses catégories d'informations (par exemple, les continents, les industries, les espèces d'oiseaux) dans les graphiques linéaires, les camemberts, les graphiques à barres, etc.
FiveThirtyEight, , Pudding, New York Times, The Economist Akkurat
Je parlerai beaucoup de saturation, de luminosité et de teinte. Il s'agit des espaces colorimétriques HSB (teinte, saturation, luminosité) ou HSV (teinte, saturation, valeur):
- La teinte varie de 0 ° à 360 °, c'est votre roue chromatique typique: ⬤ ⬤ ⬤
- La saturation varie de 0% (gris) à 100% (superaliments colorés !!): ⬤ ⬤ ⬤
- La luminosité / valeur passe de 0% (noir) à 100% (couleur réelle): ⬤ ⬤ ⬤
Pour convertir des couleurs HEX (par exemple # cc0000) ou RVB (par exemple
rgb(207, 176, 58)) en HSB / HSV, utilisez un outil comme colorizer.org .
Le parent HSB / HSV est l'espace colorimétrique HCL . Il y a les mêmes paramètres (teinte, chroma = saturation, luminosité), mais plus proches de «comment on voit vraiment les couleurs». Notre service Datawrapper utilise l'espace colorimétrique HCL dans le sélecteur de couleurs:
comme il n'y a pas de HCL dans Adobe Photoshop ou colorizer.org, chaque mention de degrés (par exemple 0 °) ou de pourcentage ici fait référence à l'espace colorimétrique HSB / HSV.
D'accord, commençons.
Élargissez votre compréhension des couleurs
Vous pensez peut-être: «Pour un graphique, j'ai besoin de cinq couleurs. J'utilise donc du vert, du jaune, du bleu et du rouge. Et ... hmm ... peut-être orange? Ou violet! "
Si vous n'avez pas pensé aux couleurs depuis que vous avez peint votre livre de coloriage lorsque vous étiez enfant, cette pensée a du sens. Par conséquent, j'écris cet article pour vous dire qu'il y a en fait plus de fleurs.
Jetez un œil à ce diagramme et comparez-le aux couleurs principales ⬤ ⬤ ⬤ ⬤ C ⬤ :
Chats ou chiens? Auteur: Nadia Bremer
Les couleurs de la carte sont complètement différentes. Nadia utilise le rouge ⬤ , qui est différent du rouge ordinaire ⬤ . Vert ⬤ - est-ce ... pouvez-vous même l'appeler vert ⬤ ?
Alors avant d'introduire les règles, laissez-moi vous faire un peu peur: littéralement des milliers de couleurs peuvent être utilisées. Il y a un rouge jaunâtre ⬤ , un rouge bleuâtre et tout le reste . Il y a du gris ⬤ , mais il y a aussi du gris froid ⬤ et du gris chaud ⬤ . Et puis il y a la couleur bleue. Tellement de bleu! Comme ça ⬤ , ça ⬤ , ça ⬤ , ça ⬤ et ça ⬤ . Et nous n'avons pas encore parlé d'orange et de jaune.
Vous en avez beaucoupoptions. Cela signifie que vous pouvez rester dans une petite zone de la roue chromatique et qu'il reste encore beaucoup d'options.
Ne danse pas autour de la roue chromatique
Vous n'avez pas besoin de prendre des couleurs de la roue chromatique entière comme ⬤ ⬤ ⬤ ⬤ ⬤ ⬤ . Le diagramme aura l'air plus professionnel - et donc plus fiable - s'il n'utilise que quelques couleurs et tons adjacents.
À ce stade, il est logique de regarder la roue chromatique. Adobe Color ou Color Calculator convient pour cela .
Calculateur de couleurs pour une correspondance harmonieuse
Beaucoup de ces outils fournissent des combinaisons de couleurs harmonieuses. L'un d'eux est appelé «carré» ou «cahier». Ne l'utilisez pas . Cela produira trop de tons, ce qui devrait être évité.
Dans la vidéo, j'utilise l'outil de couleur Paletton , en commençant par une combinaison de cahiers puis en diminuant la distance. Remarquez à quel point les combinaisons de couleurs sont plus jolies.
Si la distance est suffisamment petite, vous utilisez principalement des couleurs complémentaires ou complémentaires. Et c'est un excellent choix! De nombreuses paires de couleurs complémentaires fonctionnent très bien ensemble. En cas de doute, utilisez toujours des couleurs complémentaires et leurs voisines .
Alors faisons-le - cette fois avec Adobe Color:
Nos couleurs supplémentaires dans Adobe Color
Nos couleurs sont opposées sur la roue chromatique, elles se complètent donc clairement. Hourra! Mais ils sont également inutilisables: les deux oranges sont trop similaires. Et tout a l'air si ... brillant.
C'est là que vous devez modifier la saturation et la luminosité.
Utilisez la saturation et la luminosité pour faire fonctionner les tons
La saturation et la luminosité sont tout aussi importantes que la teinte. En fait, vous pouvez créer de nouvelles couleurs simplement en modifiant la saturation et la luminosité. Voici deux paires de couleurs avec le même ton, seulement avec une saturation et une luminosité différentes: ⬤ ⬤ / ⬤ ⬤ (si vous changez un peu le ton, les résultats seront encore meilleurs: ⬤ ⬤ / ⬤ ⬤ ).
Revenons à notre combinaison de couleurs: ⬤ ⬤ ⬤ ⬤ . Après avoir joué avec la saturation et la luminosité, cela ressemble à ceci:
Des couleurs complémentaires plus appropriées dans Adobe Color
J'ai désaturé le cyan clair ⬤ et l'orange clair ⬤et a rendu toutes les couleurs plus foncées sauf l'orange clair. Bon sang, vous pouvez déjà travailler avec ça!
Par conséquent, si votre combinaison de couleurs semble incomplète, vous n'avez pas besoin d'ajouter immédiatement un autre ton. Tout d'abord, changez la saturation et la luminosité - et voyez ce qui se passe.
Voici ce que j'ai fait avec toutes ces palettes de couleurs: ⬤ ⬤ ⬤ ⬤ et ⬤ ⬤ ⬤ ⬤ ⬤ et ⬤ ⬤ ⬤ ⬤ . Tous se complètent approximativement et ont tous une saturation et une légèreté différentes.
Utilisez des couleurs chaudes et du bleu
Les concepteurs d'infographie aiment particulièrement une autre combinaison: jaune / orange / rouge et bleu . Consultez le portfolio du South China Morning Post ou celui de The Economist (PDF) , par exemple : ils utilisent ces couleurs beaucoup plus souvent qu'ils n'utilisent le violet ou le vert.
Trois pages du South China Morning Post
La raison en est que ces couleurs chaudes et le bleu sont assez polyvalents pour différencier les catégories. Le jaune, l'orange et le rouge semblent très bien ensemble, mais les gens les perçoivent toujours comme des couleurs différentes: ⬤ ⬤ ⬤ est exactement ce que nous voulons pour les couleurs de catégorie. Et le bleu est plus flexible que tout autre ton: beaucoup de bleu, peu importe comment sombre ⬤ou léger, ⬤ riche ⬤ ou non saturé ⬤ , semble agréable, apaisant et professionnel.
Et ils sont disponibles: les daltoniens peuvent facilement faire la distinction entre le bleu et l'orange / rouge.
Par conséquent, en cas de doute, utilisez orange / rouge avec du bleu.
Lorsque vous utilisez du vert, rendez-le jaune ou bleu
Les verts vibrants sont un sixième sur la roue chromatique, d'environ 90 ° ⬤ à 150 ° ⬤ , avec un pic à 120 ° ⬤ . Cependant, vous ne trouverez pas une bonne infographie avec ces couleurs. Pourquoi?
Premièrement, le vert lui-même est juste très sombre. Et l'éclair du vert se transforme en néon gênant ⬤ . Pour obtenir un bon ton, vous devez éclaircir et désaturer beaucoup le vert - plus que les autres couleurs. C'est exactement ce que fait le Washington Post avec son vert ⬤ ici:
«Comment Trump fait reculer l' héritage d'Obama», The Washington Post
C'est 142 ° vert, mais seulement 14% saturé. Même teinte avec la même luminosité à 100% de saturation: ⬤ . Voici comment.
Et souvenez-vous des personnes daltoniennes: le vert pur combiné au rouge, à l'orange ou au brun est difficile à distinguer.
Donc, lorsque vous utilisez du vert, faites-le un peu jaune ou un peu bleu. Vous pouvez le voir dans les exemples au début de l'article: tous les verts sauf ⬤ ont un ton supérieur à 160 ° (c'est-à-dire qu'ils sont plus bleus) ⬤ ⬤ ⬤ ou inférieurs à 60 ° (c'est-à-dire plus jaunes) ⬤ ⬤ . Dans ce projet, que nous avons déjà vu, Nadia utilise à la fois le jaune-vert et le bleu-vert:
Chats ou chiens? Auteur: Nadia Bremer
On dirait que vous pouvez les utiliser dans les infographies sous deux couleurs différentes: un gagnant-gagnant!
Évitez les couleurs pures
Les tons «purs» sont situés dans la roue chromatique exactement 60 °, 120 °, 180 °, 240 °, 300 ° ou 360 ° / 0 °:
Voici un exemple: en HSV / HSB, la valeur de teinte de ce bleu vif ⬤ est de 180 °, la valeur la saturation est de 67% et la valeur de luminosité est de 91%. Vous pouvez également voir les valeurs RVB de votre couleur: si au moins deux valeurs correspondent, alors la couleur est "pure". Par exemple, notre ⬤ est
rgb(77, 232, 232).
Pour rendre les couleurs plus naturelles et plus agréables à regarder, vous pouvez soit modifier la saturation des couleurs pures, soit les assombrir. Si vous voulez des couleurs vives et saturées, choisissez des couleurs mélangées d' au moins 5 à 10 ° des couleurs propres.
Dans l'image ci-dessus, le rouge et l'orange, le bleu et le vert ont la même saturation et la même légèreté. La seule différence est dans le ton: le rouge ⬤ (0 °), le bleu ⬤ (240 °) et le vert ⬤ (120 °) semblent plus juteux que l'orange ⬤ (40 °), le bleu moyen ⬤ (211 °) et le vert bleuâtre ⬤ (170 °).
Évitez les couleurs vives et saturées
Les couleurs vibrantes attireront certainement l'attention des lecteurs. Mais ces lecteurs ne vous remercieront pas. La plupart des gens se crispent un peu lorsqu'ils voient des couleurs comme celle-ci: «Les couleurs très saturées et vibrantes ne conviendraient PAS à une [communication] sérieuse, confiante ou calme», expliquent Bartram, Patra et Stone dans leur article de 2017 Affective Color in Infographics ( PDF ) ...
Si les couleurs approchent de 100% de saturation et de 100% de luminosité, elles sont probablement trop lumineuses. Cela s'applique certainement aux couleurs pures telles que ⬤ ⬤ ⬤ ⬤ .
"Mais j'ai déjà vu une couleur aussi folle, et elles ont l'air bien" - vous dites et appellerez des projets comme ceux-ci:
Article New York Times sur les playlists
ArticleBloomberg Bankruptcy Pudding Celebrity
Article
En comparant les couleurs de ces exemples à ⬤ ⬤ ⬤ ⬤ , elles sont moins saturées ou plus foncées. 100% saturé et 100% vert vif ⬤ devient moins saturé dans le New York Times ⬤ et aussi moins saturé et plus sombre de Blo dans l'article de Bloomberg et dans l'article de Pudding ⬤ .
Ils conservent l'effet amusant et accrocheur des couleurs vives, mais sont également plus faciles pour les yeux.
Tout fonctionne parce que Pudding, le New York Times et Bloomberg ont de grands designers.En cas de doute, évitez une saturation de 100% combinée à une luminosité de 100% .
Combinez des couleurs avec une luminosité différente
Parfois, je rencontre des infographies, en particulier des graphiques en aires, où les éléments adjacents ont la même luminosité. Vous pouvez facilement vérifier ceci: convertissez simplement vos couleurs en noir et blanc (par exemple, en utilisant notre outil ). Si tout le monde a la même couleur grise, la luminosité est la même.
Par exemple, ⬤ ⬤ ⬤ dans le diagramme le plus à gauche ressemble à ⬤ ⬤ ⬤ en niveaux de gris.
Pour éviter une gamme aussi désagréable, il existe deux options:
- « »: , , , : ⬤⬤⬤. : ⬤⬤⬤
- , ,
Je recommande vivement la première option (vous pouvez toujours mettre une bordure blanche si vous le souhaitez): les couleurs deviendront plus dynamiques, et le daltonien vous en sera reconnaissant. En fait, tout le monde vous remerciera, quelle que soit sa discrimination de couleur.
En réalité, la manière correcte de définir les couleurs des catégories est de choisir des couleurs parmi des dégradés comme celui-ci:
Schémas de couleurs Viridis
Tous ces dégradés vont du clair au foncé, les couleurs ont donc une luminosité différente: ⬤ ⬤ ⬤ ⬤ ⬤ ou ⬤ ⬤ ⬤ ⬤ ⬤ . Si vous aimez cette approche, essayez ce générateur de palette de couleurs .
Rendre les couleurs tout aussi «colorées»
Dans vos infographies, vous souhaitez souvent mettre en valeur les couleurs. Il existe différentes manières d'y parvenir. Les couleurs se distinguent par les caractéristiques suivantes:
- parce qu'ils sont beaucoup plus sombres ⬤ ⬤
- parce qu'ils sont beaucoup plus légers ⬤ ⬤
- parce qu'ils sont plus intenses ⬤ ⬤
- parce qu'ils sont plus propres ⬤ ⬤
Mais généralement, vous voulez simplement mettre en évidence une ou deux couleurs. La plupart des autres devraient être plus ou moins également visibles .
Si vous utilisez des couleurs avec une luminosité différente (différente dans les nuances de gris), vous devez les équilibrer. Essayez de désaturer les couleurs vives. Ajoutez plus de saturation à l'obscurité .
Ou choisissez une teinte moins pure: dans l'image ci-dessus, le vert ⬤ et le bleu ⬤ sont très purs, je les ai donc assombris (c'est à quoi ils ressemblent à 100% de luminosité: ⬤ ⬤ ).
Ensuite, j'ai voulu ajouter du rouge ... mais le rouge vif est trop intense comme nuance pure (à partir de 0 °) ⬤ ⬤ ⬤ . J'avais donc deux options:
- assombrissez-le simplement: ⬤ ⬤ ⬤ .
- déplacez la teinte (et uniquement la teinte) de 30 ° pour la rendre plus orange ⬤ ⬤ ⬤ .
J'ai choisi le deuxième pour le rendre un peu plus convivial. Mais les deux options fonctionnent.
Évitez un contraste trop faible avec l'arrière-plan
Un nombre étonnamment élevé d'infographies utilisent des couleurs pastel sur un fond clair. Ils sont souvent peu saturés et terriblement légers.
Cela pose des problèmes: si vous travaillez avec de petites zones, des lignes et des points, les couleurs claires et désaturées sont difficiles à distinguer. Mais même si la lisibilité n'est pas un problème - pour de grandes zones, par exemple - votre infographie doit bien contraste avec l'arrière-plan pour dire en toute confiance: «Hé, je suis là et j'ai quelque chose à dire».
Voici ce qu'il faut faire lorsque les couleurs sont trop désaturées et trop claires ⬤ ⬤ ⬤ :
- Augmenter la saturation: ⬤ ⬤ ⬤
- Rendez-les plus sombres: ⬤ ⬤ ⬤
- Ou faites les deux pour de meilleurs résultats: ⬤ ⬤ ⬤
Bien sûr, c'est aussi une question de goût. Mais si vous pensez que les couleurs sont trop pastel, essayez simplement de les rendre plus riches et plus sombres. Regarde juste ce qui se passe. Et si cela se passe bien, laissez-le ainsi.
Évitez trop de contraste avec l'arrière-plan
L'inverse est également vrai: ne rendez pas les couleurs trop sombres et saturées sur un fond clair. En cas de doute, essayez d'éclaircir les couleurs, de supprimer une certaine saturation et voyez ce qui se passe.
Choisissez un fond suffisamment désaturé
Une fois que vous avez déterminé les couleurs, un fond coloré peut sembler une bonne idée. Mais ce contexte présente deux gros inconvénients: Premièrement, il détourne facilement les données. Deuxièmement, il limite extrêmement la gamme de couleurs potentielle et est donc difficile à travailler. En fait, plus l'arrière-plan est saturé, plus il est complexe, il est donc préférable de choisir des couleurs désaturées. Voici quelques règles de base pour l'espace colorimétrique HSB / HSV:
- Si vous voulez un arrière-plan clair, évitez les couleurs avec moins de 95% de luminosité et plus de 7% de saturation.
- Si vous voulez un fond sombre, maintenez la saturation en dessous de 20%. Aussi, ne devenez pas complètement noir - gardez la luminosité entre 10% et 25%.
Copiez simplement les couleurs ou essayez de les comprendre
Il est difficile de ressentir et de choisir de bonnes couleurs par vous-même. Il est donc parfaitement normal de simplement copier de belles combinaisons. Sérieusement, il n'y a rien de honteux à voler. J'ai écrit un article entier sur les sources d'inspiration des couleurs: films, artistes, palettes de couleurs d'autres personnes, etc. (et d'autres infographies sont une excellente source).
Si vous voulez comprendre intuitivement quelles couleurs fonctionnent bien les unes avec les autres, essayez ceci: Analysez-les. Voici quelques moyens de le faire:
Arbre photo niko photos sur Unsplash
- , , , . , , Photoshop image-color.com. .
- Adobe Capture, , « »: (, !)
- : . ? ? , ?
- . . ?
De plus, la prochaine fois que vous créez une infographie et que vous n'êtes pas satisfait des couleurs, analysez-les dans l'espace colorimétrique HSV / HSB , par exemple en utilisant colorizer.org :
- À quel point les couleurs sont-elles saturées - dans quelle mesure les couleurs sont -elles meilleures ou pires en augmentant ou en diminuant la saturation de quelques (ou plusieurs) points de pourcentage?
- Quelle est la signification du ton ? Que se passe-t-il si vous changez le ton de quelques degrés seulement?
- Les couleurs sont-elles différentes en luminosité ?
Avec le temps, vous passerez du niveau «C'est génial, mais je ne sais pas pourquoi» au niveau «C'est génial pour une raison». Et vous serez en mesure de briser de plus en plus ces règles - tout en créant de superbes combinaisons de couleurs.