Gerador de paletas
Aperte espaço para ganhar uma paleta nova. Fixe as cores de que gostar, verifique o contraste e leve o código para o seu site.
Passe o mouse sobre uma cor: o cadeado fixa, os pontos arrastam e o «+» adiciona uma cor ao lado. Clique no código para editar.Cada cor tem botões: fixar, copiar, tons e remover. Toque no código da cor para editar.
Contraste
Pares de cores da paleta pela WCAG: AA - texto comum, AAA - a melhor opção.
Exportar
Paletas prontas
Verificações rápidas: Favicon · Prévia de SEO · Loja do concorrente · Gerador de paletas
Como usar
Cada toque no espaço gera uma paleta nova. Gostou de uma cor? Fixe com o cadeado e as próximas paletas vão combinar com ela. Clique no código de uma cor para ajustar brilho, saturação e matiz ou digitar seu próprio HEX. O botão listrado mostra tons mais claros e mais escuros da cor - útil quando você precisa de um fundo ou de uma cor para hover. As cores podem ser arrastadas, adicionadas entre vizinhas e removidas, de 2 a 10.
Paleta de uma foto e código pronto
Envie uma foto ou cole da área de transferência e a ferramenta encontra as cores principais. A paleta pode ser copiada como variáveis CSS, SCSS, configuração do Tailwind ou JSON, baixada como imagem PNG ou SVG, salva no perfil ou aberta no «Gradiente de uma foto» para virar um fundo. O endereço da página sempre contém a paleta atual - basta compartilhar.
Perguntas frequentes
Não encontrou a resposta? Fale com a gente que ajudamos.
Aperte espaço ou o botão «Gerar». Fixe com o cadeado as cores de que gostar - elas ficam na próxima geração, e as outras combinam com elas na harmonia escolhida.
Análoga - matizes vizinhos, calma e suave. Monocromática - um matiz em brilhos diferentes. Complementar - cores opostas, o contraste mais forte. Complementar dividida, tríade e tétrade - 3-4 matizes distribuídos pelo círculo. «Auto» escolhe uma delas a cada vez.
Nesse espaço os mesmos valores de luminosidade parecem igualmente claros ao olho, então a paleta sempre tem cores claras e escuras, e a saturação não salta entre matizes como no HSL.
O bloco «Contraste» mostra pares de cores da paleta e o contraste pela WCAG: a partir de 4.5:1 - texto comum (AA), a partir de 7:1 - AAA, a partir de 3:1 - só títulos grandes. A cor do texto em cada coluna é escolhida automaticamente.
Cerca de um em cada doze homens enxerga as cores de outro jeito. Ative a simulação de protanopia, deuteranopia, tritanopia ou visão monocromática e confira se as cores importantes não se misturam.
Sim, sem restrições. As paletas são geradas no seu navegador, e um conjunto de cores não é protegido por direitos autorais.