É muito difícil escolher boas cores para infográficos. Tentaremos lidar com esse problema.
Depois de ler este artigo, você se sentirá mais confiante em suas escolhas de cores. E se você não tem nenhum senso de cor, então estas são apenas recomendações para boas combinações. Vamos falar sobre os erros comuns de cor que nos cercam em todos os lugares e como evitá-los.
Este artigo não ajudará você a encontrar bons gradientes ou tons. Ele é projetado para fornecer cores lindas e nítidas para diferentes categorias de informações (por exemplo, continentes, indústrias, espécies de pássaros) em gráficos de linha, gráficos de pizza, gráficos de barras e assim por diante.
FiveThirtyEight, , Pudding, New York Times, The Economist Akkurat
Vou falar muito sobre saturação, brilho e matiz. Estes são os espaços de cores HSB (matiz, saturação, luminosidade) ou HSV (matiz, saturação, valor):
- O matiz varia de 0 ° a 360 °, esta é a sua roda de cores típica: ⬤ ⬤ ⬤
- A saturação varia de 0% (cinza) a 100% (superalimento colorido !!): ⬤ ⬤ ⬤
- O brilho / valor muda de 0% (preto) a 100% (cor real): ⬤ ⬤ ⬤
Para converter cores de HEX (por exemplo, # cc0000) ou RGB (por exemplo
rgb(207, 176, 58)) em HSB / HSV, use uma ferramenta como colorizer.org .
O parente de HSB / HSV é o espaço de cores HCL . Existem os mesmos parâmetros (matiz, croma = saturação, brilho), mas mais próximos de "como realmente vemos as cores". Nosso serviço Datawrapper usa o espaço de cores HCL no seletor de cores:
Como não há HCL no Adobe Photoshop ou colorizer.org, toda menção de graus (por exemplo, 0 °) ou porcentagem aqui se refere ao espaço de cores HSB / HSV.
Ok, vamos começar.
Amplie sua compreensão das cores
Você pode estar pensando: “Para um gráfico, preciso de cinco cores. Então eu uso verde, amarelo, azul e vermelho. E ... hmm ... talvez laranja? Ou roxo! "
Se você não pensou em cores desde que pintou seu livro de colorir quando criança, então esse pensamento faz sentido. Portanto, estou escrevendo este artigo para dizer que, na verdade, existem mais flores.
Dê uma olhada neste diagrama e compare-o com as cores principais ⬤ ⬤ ⬤ ⬤ ⬤ ⬤ :
Gatos ou cachorros? Autor: Nadia Bremer
As cores do gráfico são completamente diferentes. Nádia usa vermelho ⬤ , que é diferente do vermelho normal ⬤ . Verde ⬤ - é ... você pode até chamar de verde ⬤ ?
Portanto, antes de introduzir as regras, deixe-me assustá-lo um pouco: literalmente, milhares de cores podem ser usadas. Há um vermelho amarelado ⬤ , um vermelho azulado e todo o resto. Há cinza ⬤ , mas também há cinza frio ⬤ e cinza quente ⬤ . E depois há a cor azul. Muito azul! Assim ⬤ , este ⬤ , este ⬤ , este ⬤ e este ⬤ . E ainda não falamos sobre laranja e amarelo.
Voce tem muitoopções. Isso significa que você pode ficar em uma pequena área da roda de cores e ainda ter muitas opções.
Não dance na roda das cores
Você não precisa pegar as cores de toda a roda de cores, como ⬤ ⬤ ⬤ ⬤ ⬤ ⬤ . O diagrama parecerá mais profissional - e, portanto, mais confiável - quando usar apenas algumas cores e tons adjacentes.
Neste ponto, faz sentido olhar para a roda de cores. Adobe Color ou Color Calculator é adequado para isso .
Calculadora de cores para escolher combinações harmoniosas
Muitas dessas ferramentas fornecem combinações de cores harmoniosas. Um deles é denominado "quadrado" ou "caderno". Não use isso . Isso produzirá muitos tons, que devem ser evitados.
No vídeo, eu uso a ferramenta de cores Paletton , começando com uma combinação de notebook e depois diminuindo a distância. Observe como as combinações de cores são mais bonitas.
Se a distância é pequena o suficiente, você principalmente usar complementares cores ou complementares. E esta é uma ótima escolha! Muitos pares de cores complementares funcionam muito bem juntos. Na dúvida, use sempre cores complementares e suas vizinhas .
Então, vamos fazer - desta vez com Adobe Color:
Nossas Cores Adicionais em Adobe Color
Nossas cores são opostas na roda de cores, portanto, elas se complementam claramente. Hooray! Mas eles também são inutilizáveis: os dois laranja são muito semelhantes. E tudo parece tão ... brilhante.
É aqui que você precisa alterar a saturação e o brilho.
Use saturação e brilho para fazer os tons funcionarem
A saturação e o brilho são tão importantes quanto o matiz. Na verdade, você pode criar novas cores simplesmente alterando a saturação e o brilho. Aqui estão dois pares de cores com o mesmo tom, apenas saturação e brilho diferentes: ⬤ ⬤ / ⬤ ⬤ (se você mudar um pouco o tom, os resultados serão ainda melhores: ⬤ ⬤ / ⬤ ⬤ ).
Vamos voltar à nossa combinação de cores: ⬤ ⬤ ⬤ ⬤ . Depois de brincar com a saturação e o brilho, fica assim:
Cores complementares mais apropriadas no Adobe Color
I dessaturado ciano claro ⬤ e laranja claro ⬤e tornou todas as cores mais escuras, exceto o laranja claro. Droga, você já pode trabalhar com isso!
Portanto, se sua combinação de cores parecer incompleta, não será necessário adicionar outro tom imediatamente. Primeiro mude a saturação e a luminosidade - e veja o que acontece.
Aqui está o que fiz com todas essas paletas de cores: ⬤ ⬤ ⬤ ⬤ e ⬤ ⬤ ⬤ ⬤ ⬤ e ⬤ ⬤ ⬤ ⬤ . Todos eles se complementam aproximadamente e todos têm saturação e leveza diferentes.
Use cores quentes e azul
Os designers de infográficos gostam especialmente de outra combinação: amarelo / laranja / vermelho e azul . Confira o portfólio do South China Morning Post ou este do The Economist (PDF) , por exemplo : eles usam essas cores com muito mais frequência do que roxo ou verde.
Três páginas do South China Morning Post
O motivo é que essas cores quentes mais o azul são bastante versáteis para diferenciar categorias. Amarelo, laranja e vermelho ficam muito bem juntos, mas as pessoas ainda os percebem como cores diferentes: ⬤ ⬤ ⬤ é exatamente o que queremos para as cores da categoria. E o azul é mais flexível do que qualquer outro tom: muito azul, por mais escuro que seja ⬤ou leve, ⬤ rico ⬤ ou não saturado ⬤ , tem um aspecto agradável, relaxante e profissional.
E eles estão disponíveis: pessoas daltônicas podem facilmente distinguir entre azul e laranja / vermelho.
Portanto, na dúvida, use laranja / vermelho com azul.
Ao usar verde, torne-o amarelo ou azul
Os verdes vibrantes são um sexto na roda de cores, de cerca de 90 ° ⬤ a 150 ° ⬤ , com um pico de 120 ° ⬤ . Porém, você não encontrará um bom infográfico com essas cores. Por quê?
Primeiro, o verde em si é muito escuro. E o clareamento do verde se transforma em néon estranho ⬤ . Para obter um bom tom, é necessário clarear e dessaturar muito o verde - mais do que outras cores. Isso é exatamente o que o Washington Post faz com o seu verde ⬤ aqui:
“Como Trump faz reverter o legado de Obama”, The Washington Post.
É 142 ° verde, mas apenas 14% saturado. Mesmo matiz com o mesmo brilho em 100% de saturação: ⬤ . Veja como.
E lembre-se dos daltônicos: verde puro combinado com vermelho, laranja ou marrom é difícil para eles distinguirem.
Portanto, ao usar verde, torne-o um pouco amarelo ou um pouco azul. Você pode ver isso nos exemplos no início do artigo: todos os verdes, exceto ⬤, têm um tom maior que 160 ° (ou seja, são mais azuis) ⬤ ⬤ ⬤ ou menos que 60 ° (ou seja, mais amarelo) ⬤ ⬤ . Nesse projeto, que já vimos, Nádia usa tanto o verde-amarelo quanto o verde-azulado:
Gatos ou cachorros? Autor: Nadia Bremer
Parece que você pode usá-los em infográficos como duas cores diferentes: uma win-win!
Evite cores puras
Os tons "puros" estão localizados na roda de cores exatamente 60 °, 120 °, 180 °, 240 °, 300 ° ou 360 ° / 0 °:
Aqui está um exemplo: em HSV / HSB, o valor de matiz deste azul brilhante ⬤ é 180 °, o valor a saturação é 67% e o valor do brilho é 91%. Você também pode ver os valores RGB da sua cor: se pelo menos dois valores corresponderem, a cor é "pura". Por exemplo, nosso ⬤ é
rgb(77, 232, 232).
Para tornar as cores mais naturais e agradáveis aos olhos, você pode alterar a saturação das cores puras ou torná-las mais escuras. Se você quiser cores brilhantes e saturadas, escolha cores misturadas com pelo menos 5 a 10 ° das cores claras .
Na imagem acima, vermelho e laranja, azul e verde têm a mesma saturação e leveza. A única diferença é o tom: vermelho ⬤ (0 °), azul ⬤ (240 °) e verde ⬤ (120 °) parecem mais suculentos que laranja than (40 °), azul médio ⬤ (211 °) e verde azulado ⬤ (170 °).
Evite cores brilhantes e saturadas
As cores vibrantes certamente chamarão a atenção dos leitores. Mas esses leitores não vão agradecer. A maioria das pessoas fica um pouco tensa ao ver cores como esta: “Cores vibrantes e muito saturadas NÃO seriam apropriadas para [comunicação] séria, confiante ou calma”, explicam Bartram, Patra e Stone em seu artigo de 2017 em Cores Afetivas em Infográficos ( PDF ) ...
Se as cores estiverem se aproximando de 100% de saturação e 100% de brilho, provavelmente são muito brilhantes. Isso definitivamente se aplica a cores puras como ⬤ ⬤ ⬤ ⬤ .
"Mas eu já vi antes uma cor tão maluca e elas parecem boas" - você diz e chamará de projetos como estes:
Artigo New York Times sobre playlists
Artigo
Artigo da celebridade sobre pudim de falência da Bloomberg
Comparando as cores nestes exemplos com ⬤ ⬤ ⬤ ⬤ , elas são menos saturadas ou mais escuras. 100% saturado e 100% verde vívido ⬤ torna-se menos saturado no New York Times ⬤ e também menos saturado e Blo mais escurono artigo da Bloomberg e no artigo do Pudding ⬤ .
Eles mantêm o efeito divertido e chamativo das cores brilhantes, mas também são mais agradáveis aos olhos.
Tudo funciona porque Pudding, The New York Times e Bloomberg têm grandes designers.Em caso de dúvida, evite 100% de saturação combinada com 100% de brilho .
Combine cores com brilho diferente
Às vezes encontro infográficos, especialmente gráficos de área, onde elementos adjacentes têm o mesmo brilho. Você pode verificar isso facilmente: basta converter suas cores em preto e branco (por exemplo, usando nossa ferramenta ). Se todos tiverem a mesma cor cinza, o brilho será o mesmo.
Por exemplo, ⬤ ⬤ ⬤ no diagrama mais à esquerda parece ⬤ ⬤ ⬤ em tons de cinza.
Para evitar uma gama tão desagradável, existem duas opções:
- « »: , , , : ⬤⬤⬤. : ⬤⬤⬤
- , ,
Eu recomendo fortemente a primeira opção (você ainda pode usar uma borda branca se quiser): as cores ficarão mais dinâmicas e o daltônico agradecerá. Na verdade, todos vão agradecer, independentemente de sua discriminação de cores.
Na realidade, a maneira correta de definir cores para categorias é escolher cores de gradientes como este:
Esquemas de cores de Viridis
Todos esses gradientes vão do claro ao escuro, então as cores têm brilho diferente: ⬤ ⬤ ⬤ ⬤ ⬤ ou ⬤ ⬤ ⬤ ⬤ ⬤ . Se você gosta dessa abordagem, experimente este gerador de paleta de cores .
Torne as cores igualmente "coloridas"
Em seu infográfico, você geralmente deseja destacar cores. Existem diferentes maneiras de fazer isso. As cores são diferenciadas pelas seguintes características:
- porque são muito mais escuros ⬤ ⬤
- porque são muito mais leves ⬤ ⬤
- porque são mais intensos ⬤ ⬤
- porque são mais limpos ⬤ ⬤
Mas normalmente você só deseja destacar uma ou duas cores. A maior parte do resto deve ser mais ou menos igualmente visível .
Se você estiver usando cores com brilho diferente (diferentes em tons de cinza), será necessário equilibrá-los. Tente remover a saturação de cores brilhantes. Adicione mais saturação ao escuro .
Ou escolha um matiz menos puro: na imagem acima, o verde ⬤ e o azul ⬤ são muito puros, então eu os escureci (é assim que ficam com 100% de brilho: ⬤ ⬤ ).
Então eu quis adicionar vermelho ... mas o vermelho brilhante é muito intenso como um tom puro (de 0 °) ⬤ ⬤ ⬤ . Então, eu tinha duas opções:
- apenas escureça: ⬤ ⬤ ⬤ .
- mova o matiz (e apenas o matiz) 30 ° para torná-lo mais laranja ⬤ ⬤ ⬤ .
Escolhi o segundo para torná-lo um pouco mais amigável. Mas ambas as opções funcionam.
Evite contraste muito baixo com o fundo
Um número surpreendentemente grande de infográficos usa cores pastel em um fundo claro. Muitas vezes não são muito saturados e são terrivelmente leves.
Isso causa problemas: se você estiver trabalhando com pequenas áreas, linhas e pontos, as cores claras e desaturadas são difíceis de distinguir. Mas mesmo que a legibilidade não seja um problema - para grandes áreas, por exemplo - seu infográfico deve contrastar bem com o plano de fundo para dizer com segurança: "Ei, estou aqui e tenho algo a dizer."
Veja o que fazer quando as cores estão muito dessaturadas e muito claras ⬤ ⬤ ⬤ :
- Aumentar a saturação: ⬤ ⬤ ⬤
- Deixe-os mais escuros: ⬤ ⬤ ⬤
- Ou faça os dois para obter melhores resultados: ⬤ ⬤ ⬤
Claro, isso também é uma questão de gosto. Mas se você acha que as cores são muito pastéis, tente torná-las mais ricas e mais escuras. Apenas veja o que acontece. E se tudo correr bem, deixe assim.
Evite muito contraste com o fundo
O contrário também é verdadeiro: não deixe as cores muito escuras e saturadas contra um fundo claro. Na dúvida, tente iluminar as cores, removendo alguma saturação, e veja o que acontece.
Escolha um fundo suficientemente dessaturado
Depois de descobrir as cores, um fundo colorido pode parecer uma boa ideia. Mas esse pano de fundo tem duas grandes desvantagens: primeiro, ele distrai facilmente dos dados. Em segundo lugar, limita extremamente a gama potencial de cores e, portanto, é difícil de trabalhar. Na verdade, quanto mais saturado o fundo, mais complexo ele é, portanto, é melhor escolher cores dessaturadas. Aqui estão algumas regras básicas para o espaço de cores HSB / HSV:
- Se você quiser um fundo claro, fique longe de cores com menos de 95% de brilho e mais de 7% de saturação.
- Se você quiser um fundo escuro, mantenha a saturação abaixo de 20%. Além disso, não fique completamente preto - mantenha o brilho entre 10% e 25%.
Copie as cores ou tente entendê-las
É difícil sentir e escolher boas cores sozinho. Portanto, é perfeitamente normal apenas copiar belas combinações. Sério, não há nada de vergonhoso em roubar. Eu escrevi um artigo inteiro sobre onde obter inspiração de cores: filmes, artistas, paletas de cores de outras pessoas, etc. (e outros infográficos são uma ótima fonte).
Se você deseja entender intuitivamente quais cores funcionam bem entre si, tente o seguinte: Analise-as. Aqui estão algumas maneiras de fazer isso:
Photo tree niko photos no Unsplash
- , , , . , , Photoshop image-color.com. .
- Adobe Capture, , « »: (, !)
- : . ? ? , ?
- . . ?
Além disso, da próxima vez que você criar um infográfico e não estiver satisfeito com as cores, analise-as no espaço de cores HSV / HSB , por exemplo, usando colorizer.org :
- Quão saturadas são as cores - quão melhores ou piores elas ficam aumentando ou diminuindo a saturação em alguns (ou muitos) pontos percentuais?
- Qual é o significado do tom ? O que acontece se você alterar o tom apenas alguns graus?
- As cores têm brilho diferente?
Com o tempo, você passará do nível "Isso é ótimo, mas não sei por quê" para o nível "Isso é ótimo por um motivo". E você se descobrirá capaz de quebrar cada vez mais essas regras - e ainda criar excelentes combinações de cores.