Cores distintas que combinam
Várias cores diferentes com a mesma luminosidade e saturação. Em ícones, etiquetas, gráficos e slides elas parecem um conjunto só.
Clique numa cor para copiar o HEX.
Como ficam juntas
- Início
- Mensagens
- Calendário
- Arquivos
- Fotos
- Música
Código
#ea6a64
#bf9000
#4db155
#00acba
#6793fa
#c972ceConferir suas cores
Cole as cores que você já usa, uma por linha ou separadas por espaço. Você verá se estão no mesmo nível e receberá um conjunto corrigido com os mesmos matizes.
Perguntas e respostas
Por que cores com a mesma luminosidade HSL parecem desiguais?
O HSL trata todos os matizes igual, mas o olho não: amarelo e verde parecem bem mais claros que o azul com os mesmos números HSL. Esta ferramenta trabalha em OKLCH, onde luminosidade igual parece igual, então nenhum ícone ou barra do gráfico se destaca por acaso.
Quantas cores distintas as pessoas conseguem diferenciar?
Num gráfico ou legenda, a maioria diferencia rápido de 6 a 8 cores. Até 12 ainda funciona com rótulos ao lado das cores. Com mais categorias, agrupe as pequenas ou use rótulos, padrões ou ícones.
Qual estilo devo escolher?
Pastel e Suaves servem para fundo de etiquetas e selos com texto escuro. Vivas e Intensas servem para ícones, barras e linhas de gráfico em fundo branco. Profundas e Escuras servem para blocos com texto branco e destaques em temas escuros.
Posso colocar texto sobre essas cores?
Sim. A prévia escolhe texto preto ou branco para cada cor. Estilos claros levam texto escuro e os profundos, branco. Para texto corrido, confira o par exato no verificador de contraste.
Cores de mesma luminosidade são seguras para daltonismo?
Cores de um mesmo nível diferem só no matiz, que é a parte mais difícil para quem tem daltonismo. Em gráficos adicione rótulos ou padrões, ou confira o conjunto no simulador de daltonismo. Para ícones com texto costuma ser suficiente.