Gerador de paletas para gráficos
Gere cores categóricas, sequenciais ou divergentes. Veja um gráfico de exemplo e copie as cores para sua biblioteca.
Gerar cores para gráficos ↓Insira cores opacas válidas e escolha as opções disponíveis.
Cores categóricas separam grupos; sequenciais mostram ordem; divergentes mostram um ponto médio. As variações podem ser limitadas ao gamut sRGB.
Valores de exemplo, não análises. Use rótulos, símbolos ou padrões além das cores. Uma relação de 3:1 com o fundo não certifica um gráfico.
| Série | HEX | Contraste sobre o fundo |
|---|
// Pass this array as your dataset backgroundColor or borderColor.
const colors = [
"#2563EB",
"#AC3C99",
"#BF4100",
"#677C00",
"#008E89"
];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.
Continue com a sua paleta
Leve a paleta para o dashboard
Use as cores do gráfico junto de superfícies, texto e estados definidos. Compare três paletas completas para dashboards, incluindo uma opção clara e uma escura.