Geradores
Gerador de Paletas de Cores
Crie paletas a partir de uma cor base, com HEX, RGB, HSL e contraste.
Sua paleta
Escolha a cor base e o esquema. Você recebe os códigos em HEX, RGB e HSL, com o contraste de cada cor.
Paleta gerada
O contraste indicado compara cada cor com o texto sugerido. Para texto normal, as WCAG pedem no mínimo 4,5.
Explicação rápida
Escolha a cor base e o esquema. A paleta aparece com os códigos em HEX, RGB e HSL, e com o contraste de cada cor em relação ao texto sugerido. Dá para copiar cor a cor, ou exportar tudo como variáveis CSS ou JSON.
Passo a passo
Como usar
-
Defina a cor base
Use o seletor ou cole um código HEX.
-
Escolha o esquema
Complementar para contraste forte, análogo para harmonia, monocromático para variações da mesma cor.
-
Ajuste a quantidade
De 3 a 8 cores. As cores extras vêm de variações de luminosidade.
-
Exporte
Copie o HEX de cada cor, ou leve a paleta inteira em CSS ou JSON.
O que cada esquema faz
- Complementar: cor oposta no círculo cromático. Contraste alto, bom para botão e destaque.
- Análogo: cores vizinhas. Resultado harmônico, bom para fundo e seções.
- Triádico e tetrádico: três ou quatro cores distribuídas no círculo. Mais variedade, exige controle.
- Monocromático: uma cor em várias luminosidades. Seguro e fácil de aplicar.
Contraste importa mais que gosto
O número ao lado de cada cor é a razão de contraste com o texto sugerido. As diretrizes de acessibilidade WCAG pedem no mínimo 4,5 para texto normal e 3 para texto grande. Uma paleta bonita com contraste baixo deixa o site difícil de ler, principalmente no celular sob luz do sol.
Dúvidas
Perguntas frequentes
Respostas curtas sobre gerador de paletas de cores.
Como escolher a cor principal de uma marca?
Comece pela aplicação mais crítica, normalmente o botão. Escolha uma cor com contraste suficiente sobre o fundo e construa a paleta a partir dela.
Posso usar a paleta direto no CSS?
Pode. O botão de copiar CSS gera as variáveis prontas para colar no seu arquivo de estilos.
O que significa o número de contraste?
É a razão entre a luminosidade da cor e a do texto. Quanto maior, mais legível.
Continue por aqui
Ferramentas e conteúdos relacionados
Ferramentas relacionadas
Conte o que você gostaria de calcular ou qual ferramenta faria diferença no seu treino. As sugestões ajudam a definir as próximas melhorias.