Gerador de paleta de cores
NovoGere paletas complementares, análogas, triádicas e monocromáticas.
Tint & shade scales (50–900)
WCAG contrast check
Contrast ratio of each color against white and black. AA needs 4.5:1 for normal text, AAA needs 7:1.
| Color | vs White | vs Black | Best text |
|---|
Runs entirely in your browser. Nothing is uploaded.
Gere uma paleta de cores de cinco formas diferentes
Este gerador de paleta de cores substitui um conjunto de ferramentas separadas. Clique em Gerar para uma paleta de cores aleatória, configure uma harmonia de cores a partir de uma cor base, extraia cores de uma imagem ou foto, expanda um único código hex em um esquema completo, ou transforme um nome de cor ou palavra em uma paleta reproduzível. Configure de 3 a 10 cores, bloqueie as que você gosta e regenere as demais — sem conta e sem sair do navegador.
Clique em qualquer amostra para copiar o valor, alterne entre HEX, RGB e HSL, e arraste as amostras para reordená-las. Pressione Espaço para gerar uma nova paleta instantaneamente — o mesmo fluxo que o Coolors popularizou, disponível aqui sem paywall.
Extraia cores de imagem, código hex ou nome
A partir de imagem: Arraste uma foto e a ferramenta a processa em um canvas HTML5 oculto usando um algoritmo de corte mediano para extrair as cores dominantes — útil para combinar uma paleta com uma foto de produto, imagem de marca ou moodboard. A imagem fica no seu dispositivo e nunca é enviada para nenhum servidor. O Coolors cobra dos assinantes Pro por esse recurso; aqui é grátis.
A partir de código hex: Cole uma cor de marca e mantenha-a como âncora enquanto o gerador cria cores análogas, complementares e variações de tom ao redor dela. A partir de um nome: Digite qualquer palavra e um hash determinístico gera a paleta, então o mesmo nome sempre produz as mesmas cores — uma alternativa confiável offline aos geradores baseados em IA que dão resultados diferentes a cada vez.
Harmonias de cores baseadas na teoria real das cores
O modo Harmonia aplica a teoria das cores girando o matiz ao redor da roda de cores. Cores complementares ficam a 180° para contraste forte; cores análogas ficam dentro de ±30° para um visual calmo e unificado; o triádico usa três matizes a 120°; o tetrádico usa quatro a 90°; o split-complementar suaviza o contraste a 150°/210°; e o monocromático mantém um matiz e varia a luminosidade na paleta.
Cada cor gerada também vem com uma escala completa de tons e sombras de 50 a 900 — os passos mais claros e escuros necessários para estados hover, cores de borda e variantes de fundo em um sistema de design de interface real.
Como o UtiloKit se compara ao Coolors, Adobe Color e Paletton
Coolors é a ferramenta de paletas mais popular, com um excelente fluxo de bloqueio e regeneração e uma grande comunidade. O Coolors Pro (US$ 4/mês) coloca extração de imagem, exportação avançada e histórico de paletas atrás de um paywall. A exportação nativa para Tailwind não está no plano gratuito. Adobe Color faz bem a verificação de acessibilidade WCAG e a visualização de harmonias, mas salvar paletas exige uma conta Adobe gratuita e são necessários mais cliques para chegar à exportação.
Paletton é forte em teoria das cores, mas mostra apenas quatro tipos de harmonia e não inclui extração de imagens. UtiloKit combina os pontos fortes dos três — bloqueio estilo Coolors, painel WCAG do Adobe Color, extração de imagem e exportação para Tailwind/SCSS — sem conta, sem paywall e sem anúncios na ferramenta.
Bloqueie seus favoritos e continue iterando
Boas paletas vêm da iteração, não de uma única geração. Bloqueie uma amostra e ela fica no lugar. Tudo que está desbloqueado é regenerado quando você clica em Gerar ou pressiona Espaço. Mantenha a cor dominante que gostou, misture os acentos e vá refinando até encontrar um conjunto que funcione — depois vá direto para a exportação.
Você pode bloquear várias cores ao mesmo tempo. Bloqueie a cor principal da sua marca e um fundo neutro, e deixe a ferramenta sugerir acentos. Bloqueie esses acentos quando encontrar os que funcionam e regenere os tons de suporte. Isso imita como designers criam paletas manualmente, só que muito mais rápido.
Exporte para CSS, Tailwind, SCSS, JSON, PNG e link compartilhável
Quando a paleta estiver pronta, exporte no formato que seu projeto precisa. CSS gera um bloco :root de propriedades customizadas. Tailwind gera um objeto theme.extend.colors pronto para colar no tailwind.config.js. SCSS gera declarações de $variáveis compatíveis com Sass. JSON lista cada cor em HEX, RGB e HSL para JavaScript ou pipelines de design tokens. Baixe uma folha de amostras em PNG para um documento de marca ou apresentação. Copie um link compartilhável que codifica a paleta na URL para que um colega abra exatamente o que você vê.
Verificação de contraste WCAG integrada
Uma paleta não está pronta até que o texto sobre ela seja legível. O painel de contraste mostra a relação de contraste WCAG de cada cor contra texto branco e preto, com selos de aprovado/reprovado AA e AAA. O WCAG 2.1 AA exige 4,5:1 para texto normal e 3:1 para texto grande. AAA exige 7:1 para texto normal. A maioria das ferramentas de paletas pula essa etapa ou a coloca atrás de um plano premium — aqui está integrado e roda em tempo real enquanto você gera ou modifica amostras.
Sem cadastro, sem upload, nada sai do seu navegador. Cada operação de paleta — geração aleatória, extração de imagem, cálculo de harmonias, verificação de contraste e exportação — roda em JavaScript local. Salve nos favoritos este gerador de paleta de cores gratuito para design de sites, identidade visual, ilustração, apresentações e paletas sazonais ou de casamento.
Frequently asked questions
Qual é o melhor gerador de paleta de cores gratuito?
O melhor gerador faz tudo que você precisa sem conta, assinatura ou processamento no servidor. Essa ferramenta cria paletas de cinco formas — aleatório, harmonias de roda de cores, a partir de imagem, a partir de código hex e a partir de nome de cor — permite bloquear cores e regenerar as demais, verifica as relações de contraste WCAG e exporta para CSS, Tailwind, SCSS, JSON e PNG. O Coolors tem um bom fluxo mas requer conta Pro (US$ 4/mês) para extração de imagem e exportação avançada. O Adobe Color faz bem as harmonias mas exige login para salvar. O UtiloKit combina os dois, funciona completamente offline e não exige conta.
Como crio uma paleta de cores do zero?
Escolha um ponto de partida — arraste uma imagem, digite um código hex, insira um nome de cor, escolha um tipo de harmonia ou clique em Gerar (ou pressione Espaço) para um conjunto aleatório. Ajuste o tamanho da paleta para 3–10 cores, bloqueie as amostras que quer manter e regenere as outras até a paleta completa encaixar. Clique em qualquer amostra para copiar o valor em HEX, RGB ou HSL, depois exporte tudo para CSS, Tailwind ou uma folha de amostras PNG.
Como gero uma paleta de cores a partir de uma imagem?
Mude para o modo 'Imagem' e arraste uma foto (ou clique para selecionar uma). A ferramenta desenha a imagem em um canvas HTML5 oculto, processa os dados de pixels e roda um algoritmo de quantização de corte mediano para extrair as cores mais dominantes e visualmente distintas. Tudo acontece localmente com a Canvas API — a foto nunca toca um servidor. O Coolors requer assinatura Pro para extração de imagem; aqui é grátis.
Qual é a diferença entre cores complementares, análogas e triádicas?
São relações baseadas na posição na roda de cores, medidas em graus de matiz. Cores complementares ficam a 180° para contraste máximo — azul e laranja, vermelho e verde. Cores análogas são vizinhas dentro de ±30° para um visual calmo e coeso. Cores triádicas são três matizes igualmente espaçados a 120° para um esquema equilibrado e vibrante. O modo Harmonia gera todos esses — mais tetrádico, split-complementar e monocromático — a partir de qualquer cor base que você escolher.
Quantas cores deve ter uma paleta?
A maioria das paletas funcionais usa de 3 a 5 cores: uma cor dominante, uma ou duas cores de suporte e um acento. A regra 60-30-10 sugere 60% dominante, 30% secundário e 10% acento em um design. Para design de interfaces, gere 5 cores base e use escalas de tons por cor (passos 50–900) para estados hover, bordas e fundos.
Como exporto uma paleta para CSS, Tailwind ou SCSS?
Use os botões de Exportar após gerar a paleta. 'CSS' copia um bloco :root de propriedades customizadas pronto para colar em uma folha de estilos. 'Tailwind' copia um objeto theme.extend.colors com chaves palette-1 a palette-n, pronto para o tailwind.config.js. 'SCSS' copia declarações de variáveis $color-n. 'JSON' exporta cada cor como objeto com valores HEX, RGB e HSL.
Essa ferramenta funciona no iPhone e Android?
Sim — é totalmente responsiva e funciona no Safari do iPhone, Chrome do Android e todos os navegadores móveis modernos. As amostras de cor, o mecanismo de bloqueio e os botões de exportação são amigáveis ao toque com grandes áreas clicáveis. A extração de imagens da galeria funciona no celular pelo seletor de arquivos. A barra de espaço para regenerar também tem um botão Gerar para telas sensíveis ao toque.
Related tools
Ver todas as ferramentas
Novo Playground de CSS Grid
Ajuste colunas, espaçamento e alinhamento do grid com prévia ao vivo e CSS.
Novo Gerador de glassmorphism
Crie um cartão de vidro fosco e copie o CSS, com prévia ao vivo.
Novo Gerador de text-shadow CSS
Ajuste uma sombra de texto CSS com prévia ao vivo e copie o código.
Novo Misturador de cores
Misture duas cores em qualquer proporção e copie o resultado ou qualquer etapa.
Novo Seletor de cores de imagem
Escolha qualquer cor de uma imagem e extraia a paleta dominante em HEX, RGB e HSL.
Novo Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.