Ir para o conteúdo
Tutoriais Sem Enrolação
Cores

Gerador de Paleta de Cores Online

Escolha uma cor e gere combinações complementares, análogas, tríades, tétrades e variações monocromáticas. Ajuste HEX ou HSL, visualize as cores em tempo real, copie valores HEX, RGB e HSL, exporte variáveis CSS e salve paletas no navegador.

Esta ferramenta ainda não recebeu avaliações.
Amostras de cores organizadas em paletas complementares, análogas e tríades a partir de uma cor azul central.

Usar a ferramenta

Como criar uma paleta de cores

Escolha uma cor no seletor ou informe um código HEX, como #2563EB. Em seguida, selecione o tipo de combinação. A paleta é atualizada automaticamente conforme você muda a cor, a harmonia ou os controles de matiz, saturação e luminosidade.

Toque em uma amostra para consultar seus valores HEX, RGB e HSL. Você pode copiar uma cor, copiar as variáveis CSS da paleta inteira ou baixar um arquivo CSS pronto para usar. Também é possível salvar até 12 combinações no próprio navegador.

Qual combinação escolher?

A complementar usa dois tons opostos. As análogas combinam tons vizinhos, enquanto a tríade distribui três tons pelo círculo cromático. A complementar dividida combina uma cor com duas próximas à sua oposta, e a tétrade organiza dois pares complementares. A monocromática oferece variações claras e escuras da mesma tonalidade.

Usar as cores no CSS

O gerador cria variáveis CSS dentro de :root. Após copiar ou baixar o código, use var(--cor-principal) ou o nome da variável exibido no resultado em propriedades como background-color, color e border-color.

Contraste, precisão e privacidade

A harmonia é calculada com base nas posições do círculo cromático HSL. A prévia escolhe automaticamente uma cor de texto legível para cada amostra, mas uma paleta bonita não garante contraste suficiente em toda aplicação. Revise o contraste dos elementos do seu projeto, especialmente textos pequenos e botões. A aparência também pode variar entre telas e perfis de cor.

O processamento ocorre localmente no navegador. As paletas salvas ficam no armazenamento deste dispositivo e podem ser removidas a qualquer momento. Não é necessário enviar códigos de cores a um servidor.

Começar a partir de uma imagem

Para usar uma fotografia como referência, você pode primeiro extrair cores de uma imagem. Também é possível identificar uma cor com a câmera e informar o código encontrado neste gerador.

Perguntas frequentes

Como encontrar cores que combinam com uma cor escolhida?

Escolha a cor pelo seletor ou informe um HEX de seis dígitos. Depois selecione Complementar, Análogas, Tríade, Complementar dividida, Tétrade ou Monocromática. A paleta muda automaticamente.

Qual a diferença entre cores complementares e análogas?

Complementares ficam em posições opostas no círculo cromático. Análogas ficam próximas umas das outras, oferecendo uma variação mais contínua de tonalidade.

Posso copiar as cores em RGB ou HSL?

Sim. Selecione uma cor da paleta e use Copiar HEX, Copiar RGB ou Copiar HSL. Você também pode copiar todas as variáveis CSS ou baixar o arquivo CSS.

As paletas salvas ficam disponíveis em outro aparelho?

Não. Elas são guardadas apenas no armazenamento local do navegador utilizado. Você pode salvar até 12 paletas, restaurá-las ou excluir a coleção.

Uma paleta harmoniosa garante contraste para leitura?

Não. Harmonia e legibilidade são coisas diferentes. A ferramenta escolhe uma cor de texto de maior contraste nas amostras, mas você deve verificar o contraste de cada uso real, especialmente em textos pequenos e botões.

Ferramentas relacionadas

Outras ferramentas publicadas do catálogo com tema ou categoria relacionados.