Dados Finos: Cores para visualização de dados: as melhores ferramentas e paletas

Capa do artigo listando os melhores sites para escolher paletas de cores para gráficos e dashboards

A cor é um dos fatores mais impactantes na visualização de dados através de gráficos e dashboards. É um dos recursos visuais que o olho humano absorve por primeiro, e tem alto poder de transmitir significados e conotações diferentes, a depender do público.

E também por isso, a escolha de cores adequadas acaba sendo uma etapa difícil no processo de visualização para quem trabalha com dados. Uma paleta adequada torna o visual bonito e atrativo, com maior chance de leitura e compreensão, ao passo que cores mal escolhidas podem afastar leitores e até causar entendimentos contraditórios.

Para facilitar nesse processo, aqui estão as melhores ferramentas para escolher a paleta de cores ideal para os seus gráficos no excel, google sheets, dashboard no Power BI ou apresentação de slides no powerpoint. Todas elas possuem códigos RGB e hexadecimais para copiar, ajudando tanto quem trabalha com gráficos vetoriais no Figma, Illustrator, Inkscape ou com linguagens de programação como R, Python ou Javascript/CSS.

Paletas prontas para escolher e usar

1. Colors – Chart color generator

Quase desconhecido, esse site japonês é das melhores ferramentas para escolha de paletas de cores bonitas para usar em seus gráficos. Após escolher, a tela de edição permite vários ajustes finos, como brilho, saturação e a substituição de tons da paleta simplesmente arrastando a cor para os lados.

Como usar: é só abrir, escolher uma paleta e usar
55 paletas prontas para escolher
A partir de 3 tons, sem limite (a sugestão abre com adequados 7 tons de 3 cores diferentes)
É possível escolher as cores principais e o número de tons em cada uma
Arrastando a cor na escala gera uma variação de brilho
Sliders para ajuste de brilho e vivacidade
Color picker: Função de subir a foto
Código para copiar: Hexadecimal e RGB

https://colors.design4u.jp/

2. Coolors

O Coolors não é um site específico para visualização de dados, mas pode ser usado com esse fim, além do propósito geral para design gráfico e UX/UI. Ele tem dois modos interessantes de uso: basta escolher uma paleta entre as sugeridas na tela ou ir apertando a barra de espaço para gerar um novo esquema de cor aleatório.

Coolors Pallete Generator: https://coolors.co/generate

Como usar: apertar a barra de espaço para gerar uma nova paleta randômica. É possível travar uma ou mais cores para ir gerando combinações.

Explore Palletes: https://coolors.co/palettes/trending

Como usar: rolar a página e escolher entre as milhares de paletas disponíveis, ordenadas por popularidade dos usuário do site

2 a 10 cores (sugestão inicial com 5 cores)
Clique em qualquer cor para copiar o hexadecimal
Geração fácil de similares
Color picker: Uma URL única para cada cor (exemplo), com checagem de contraste, simulação de daltonismo, esquemas de harmonia com aquela cor e paletas que a utilizam
Possibilidade de login para curtir e salvar cores e paletas favoritas
Código para copiar: Hexadecimal, RGB, CMYK, HSL, ....

3. ColorBrewer

O clássico dos clássicos. O gerador de paletas de cores para uso em mapas com base nas pesquisas de Cynthia Brewer é uma ferramenta precursora (criada inicialmente em flash!) que provavelmente inspirou todas as outras e ainda é uma mão na roda na hora de escolher uma paleta sem medo de errar.

Como usar: escolha tipo de esquema, a quantidade de tons
Tipos de esquema de cor: sequenciais, divergentes ou qualitativas
Modo sequencial com "single hue" e "multi-hue" (como aquela escala de amarelo a vermelho passando pelo laranja)
3 a 12 tons
Modos "colorblind safe", "print friendly" e "photocopy safe" para filtrar as paletas
Código para copiar: Hexadecimal, RGB, CMYK, CSS, Javascript
Exporta: ASE (Adobe Swatch), paleta para Gimp e Inkscape

http://colorbrewer2.org/

4. ColorSpace

Gerador de paletas a partir de uma única cor. Escolha uma cor ou coloque a cor principal da sua empresa ou organização para gerar 25 esquemas de cor que harmonizem com ela.

Como usar: selecione uma cor ou cole o código hexadecimal e gere paletas a partir da cor escolhida
Código para copiar: Hexadecimais individuais

https://mycolor.space/

5. Adobe Color

O Adobe Color, assim como o Coolors e o ColorSpace, não é dedicada a gráficos, porém é uma ferramenta bem completa, desenhada para todos os profissionais de design e áreas afins. Há o modo de explorar paletas populares entre os usuários, tendências por área (moda, arquitetura, design gráfico, UX/UI, ilustração design de jogos...)

Como usar: explore as paletas prontas e escolha uma, ou use o gerador para customizar
Possibilidade de login para salvar favoritas
Ajuda com harmonia de cores no gerador
Busca por palavras chave
Código para copiar: Hexadecimal, CSS, LESS, SASS, XML
Exporta: ASE, JPG

https://color.adobe.com/pt/explore

Paletas para criar e ajustar

Essas ferramentas não tem paletas de cor prontas para escolher, portanto são para um uso mais avançado por profissionais de visualização de dados, mas nada que alguns testes não sejam suficientes para chegar em resultados interessantes.

6. Viz Palette

Ferramenta para auxiliar na geração de paletas para visualização de dados

Usa o colorbrewer, o chroma.js e o colorgorical
Permite simular deficiências para ver cores
Código para copiar: hexadecimal, rgb ou hsl
Projeto do Elijah Meeks & Susie Lu

http://projects.susielu.com/viz-palette

7. Chroma.js Color Scale Helper

Ferramenta pra auxiliar na geração de paletas sequenciais

Ideal para paletas sequenciais ou divergentes
Tem ajuste fino de luminosidade (Artigo: mastering multi-hued, multi-stops color scales)
Código para copiar: hexadecimal ou javascript, já pronto para d3.js
Projeto do Gregor Aisch

https://gka.github.io/palettes/#colors=lightyellow,orange,deeppink,darkred|steps=7|bez=1|coL=1