O que é Gerador de Paleta de Cores?
O Gerador de Paleta de Cores cria combinações harmoniosas com base na teoria das cores. Escolha uma cor base e uma regra de harmonia para gerar paletas instantaneamente.
Comece de três formas: escolha uma cor base com o seletor ou cole um código hex, solte uma foto para extrair suas cores dominantes, ou digite um clima como ocean ou sunset. Depois escolha uma regra de harmonia e a ferramenta monta o resto da paleta a partir das proporções da teoria das cores na roda. Trave os tons que quiser manter, embaralhe os demais, clique numa cor que você gosta para girar toda a paleta em torno dela e pré-visualize o resultado com filtros de daltonismo. Exporte as cinco cores como um bloco de propriedades CSS, uma config do Tailwind ou um arquivo JSON para o seu design system, ou salve a tira como imagem PNG ou SVG para compartilhar num brief ou nas redes.
Como usar
- Comece por uma cor base, solte uma foto para extrair suas cores, ou digite um clima como ocean ou sunset
- Escolha a regra de harmonia: complementar, análoga, triádica, complementar dividida, tetrádica ou monocromática
- Copie qualquer amostra em HEX, RGB ou HSL, varra a grade de contraste à procura de pares acessíveis e exporte a paleta como CSS, config do Tailwind, JSON ou uma imagem de amostras em PNG ou SVG
Quando usar
- Montar uma paleta de marca a partir da cor principal já aprovada pelo cliente.
- Escolher cores de apoio legíveis para um gráfico ou dashboard.
- Testar combinações rápidas para uma apresentação ou post de rede social.
Resultado
Cor base #3498DB com harmonia triádica gera: #3498DB, #976CD6, #DB3498.
Perguntas frequentes
- Qual a diferença entre complementar, análoga e tríade?
- Complementar coloca a cor base contra seu oposto a 180°, contraste máximo. Análoga mantém tudo em até 30° no círculo, resultado suave. Tríade distribui três cores a 120° entre si, contraste forte mas equilibrado.
- Dá para manter uma cor favorita e regerar só as outras?
- Sim. Use o cadeado nas amostras que quer manter, troque a regra ou a cor base, ou pressione embaralhar. As amostras travadas ficam fixas enquanto as demais são recalculadas em volta.
- Qual formato de exportação usar?
- CSS entrega variáveis como --color-1, a opção Tailwind solta um bloco theme.extend.colors pronto para a config e JSON é um objeto estruturado para ferramentas de design tokens ou scripts. Para compartilhar a paleta como imagem — num brief, numa apresentação ou num post — escolha PNG para um bitmap ou SVG para uma tira de amostras vetorial nítida.
- Essas paletas atendem o contraste WCAG?
- A grade de contraste embutida classifica cada par pelos limites WCAG 2.x — AAA em 7:1, AA em 4,5:1, AA Grande em 3:1 — e marca falhas em rosa. Escolha um par direto da grade antes de aplicá-lo em corpo de texto ou botões, já que as regras de harmonia miram equilíbrio visual, não razões de contraste.
- Para onde vão meus dados de cor?
- Lugar nenhum. Todos os cálculos de cor acontecem dentro da página, e qualquer foto que você soltar é lida no seu dispositivo para extrair as cores — nunca é enviada a lugar algum. Sua cor base, a paleta e os arquivos exportados ficam no local, então uma paleta de marca ainda não lançada fica tão privada quanto a sua própria área de transferência.
Ferramentas relacionadas
Gerador de gradientes em malha
Crie fundos com gradientes em malha em camadas
Conversor de códigos de cor
Converta códigos de cor HEX, RGB, HSL, CMYK e HSV
Conversor de cores
Converta códigos HEX, RGB, HSL, HSV e CMYK
Misturador de cores
Misture duas cores visualmente
Identificador de nome de cor
Encontre a cor nomeada mais próxima de qualquer valor
Localizador de cores complementares
Encontre cores complementares para qualquer entrada