Gerador de paletas de cores

Gere uma paleta de cores de cinco formas diferentes

Este gerador de paletas de cores substitui um conjunto de ferramentas separadas. Prima Gerar para uma paleta de cores aleatória, ajuste uma harmonia de cores a partir de uma cor base, extraia cores de uma imagem ou fotografia, expanda um único código hex num esquema completo, ou converta um nome de cor ou palavra numa paleta reproduzível. Defina a contagem de 3 a 10, bloqueie as cores que gosta e regenere as restantes — sem conta e nada sai do seu browser.

Clique em qualquer amostra para copiar o seu valor, mude o formato entre HEX, RGB e HSL, e arraste as amostras para as reordenar. Prima Espaço para gerar uma nova paleta instantaneamente — o mesmo fluxo que o Coolors popularizou, disponível aqui sem paywall.

Extraia cores de uma imagem, código hex ou nome

A partir de uma imagem: Arraste uma fotografia e a ferramenta processa-a numa canvas HTML5 oculta usando um algoritmo de corte mediano para extrair as cores dominantes — útil para combinar uma paleta com uma fotografia de produto, uma imagem de marca ou um quadro de inspiração. A imagem fica no seu dispositivo e nunca é carregada para qualquer servidor. O Coolors cobra aos subscritores Pro por esta funcionalidade; aqui é grátis.

A partir de um código hex: Cole uma cor de marca e mantenha-a como âncora enquanto o gerador cria companheiros análogos, complementares e de tonalidades ao seu redor. A partir de um nome: Escreva qualquer palavra e um hash determinístico semente a paleta, pelo que o mesmo nome produz sempre as mesmas cores — uma alternativa offline fiável aos geradores de paletas baseados em IA que dão resultados diferentes em cada execução.

Harmonias de cores baseadas na teoria real das cores

O modo Harmonia aplica a teoria das cores rodando o matiz em torno da roda de cores. As cores complementares ficam a 180° para um contraste forte; as cores análogas ficam dentro de ±30° para um aspeto calmo e unificado; o triádico usa três matizes a 120°; o tetráico usa quatro a 90°; o split-complementar suaviza o choque de contraste a 150°/210°; e o monocromático mantém um matiz e varia a luminosidade na paleta.

Cada cor gerada também inclui uma escala completa de tons e sombras de 50 a 900 — os passos mais claros e mais escuros necessários para estados hover, cores de bordo e variantes de fundo num 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 (4 $/mês) bloqueia a extração de imagens, exportação avançada e histórico de paletas atrás de um paywall. A exportação nativa para Tailwind não está no nível gratuito. Adobe Color faz bem a verificação de acessibilidade WCAG e a visualização de harmonias de cores, mas guardar paletas requer 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 — o bloqueio estilo Coolors, o painel WCAG do Adobe Color, extração de imagens e exportação para Tailwind/SCSS — sem conta, sem paywall e sem anúncios na ferramenta.

Bloqueie os seus favoritos e continue a iterar

As boas paletas resultam da iteração, não de uma única geração. Bloqueie uma amostra e ela fica fixa. Tudo o que está desbloqueado volta a ser gerado quando prime Gerar ou a Barra de espaço. Mantenha a cor dominante que gosta, misture os acentos e afine até encontrar um conjunto que funcione — depois passe diretamente para a exportação.

Pode bloquear várias cores de uma vez. Bloqueie a cor principal da sua marca e um fundo neutro, e deixe que a ferramenta sugira acentos. Bloqueie esses acentos quando encontrar os que funcionam e regenere os tons de suporte. Isto imita como os designers criam paletas manualmente, mas muito mais rapidamente.

Exporte para CSS, Tailwind, SCSS, JSON, PNG e link partilhável

Quando a paleta estiver pronta, exporte no formato que o seu projeto precisa. CSS gera um bloco :root de propriedades personalizadas. 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 tokens de design. Descarregue uma folha de amostras em PNG para um documento de marca ou apresentação. Copie um link partilhável que codifica a paleta no URL para que um colega abra exatamente o que você vê.

Verificação de contraste WCAG integrada

Uma paleta não está completa 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 distintivos de aprovado/reprovado AA e AAA. O WCAG 2.1 AA requer 4,5:1 para texto normal e 3:1 para texto grande. AAA requer 7:1 para texto normal. A maioria das ferramentas de paletas omite este passo ou coloca-o atrás de um nível premium — aqui está integrado e funciona em tempo real enquanto gera ou modifica amostras.

Sem registo, sem carregamentos, nada sai do seu browser. Cada operação de paleta — geração aleatória, extração de imagens, cálculo de harmonias, verificação de contraste e exportação — é executada em JavaScript local. Marque este gerador de paletas de cores gratuito para design web, identidade de marca, ilustração, apresentações e paletas sazonais ou de casamento.