Gerador de paleta de cores para gráficos
Escolha cores que ajudem a explicar os dados. Comece com uma paleta categórica, use uma escala de tons para valores ordenados e confira cada cor no fundo do gráfico.
Este guia explica o processo. Use a ferramenta indicada abaixo para gerar cores e exportar arquivos.
Escolha a paleta conforme os dados
Categorias
Use matizes diferentes para grupos sem uma ordem natural, como canais de venda. Mantenha a mesma cor para cada categoria em todas as visualizações e acrescente os nomes junto às marcas.
Valores ordenados
Use uma escala do claro ao escuro quando os valores tiverem uma ordem, como níveis de atividade. Comece pela escala de tons de azul e confira o resultado no tamanho real de uso.
Um ponto central significativo
Para valores acima e abaixo de uma meta, use duas famílias de matizes com um ponto central neutro. Exiba a escala numérica e identifique a meta.
Uma paleta de quatro cores para um gráfico claro
O exemplo usa fundo branco. Os nomes e valores aparecem junto às barras, para que a leitura não dependa apenas da cor. Os números são ilustrativos, não estatísticas do site.
- Direto48
- Busca36
- E-mail28
- Indicação20
const chartColors = [
'#2563EB', // Direto
'#047857', // Busca
'#B45309', // E-mail
'#7E22CE' // Indicação
];Use estas cores exatas na configuração do gráfico ou gere outra combinação a partir do azul base. As variações geradas serão diferentes deste exemplo selecionado manualmente.
Confira o gráfico pronto
- Defina o fundo do gráfico antes de avaliar qualquer cor das séries.
- Compare cada marca significativa com as cores adjacentes. Linhas finas podem precisar de mais contraste ou de um traço mais espesso.
- Acrescente rótulos diretos, símbolos, padrões ou uma tabela de dados. Distinguir apenas vermelho e verde não é suficiente.
- Visualize a paleta com o guia de simulação da visão de cores e depois confira o gráfico real em uma tela pequena e na impressão, se for o caso. Uma simulação de paleta é uma aproximação, não uma certificação de acessibilidade.
As WCAG distinguem o contraste do texto do contraste de gráficos significativos. Em geral, texto normal precisa de 4,5:1, texto grande de 3:1 e partes gráficas necessárias à compreensão de 3:1 em relação às cores adjacentes. A aplicação depende do gráfico real.
Quantas cores devo usar em um gráfico?
Use o menor número adequado à tarefa. Não existe uma quantidade universalmente segura: o tamanho das marcas, o fundo e os rótulos importam. Para muitas categorias, considere agrupar itens menores ou dividir a visualização.
Uma paleta com cores distintas garante acessibilidade?
Não. Matizes distintos não garantem contraste nem identificam todas as categorias. Teste o gráfico real, incluindo rótulos, foco, sobreposições e cores adjacentes.
Posso reutilizar a paleta em um fundo escuro?
Confira novamente sobre a superfície escura. Uma paleta escolhida no branco pode perder contraste quando o fundo muda. Use o exemplo de modo escuro para começar com tokens explícitos de superfície e texto.