Palette Generator: Criador de Esquemas de Cores

O que é o Palette Generator?

Em breve: Palette Generator é uma ferramenta baseada em navegador que aplica algoritmos de teoria das cores para gerar paletas de cores matematicamente equilibradas a partir de uma única cor base. A ferramenta oferece três modos: Harmonia (com 11 tipos de harmonia, incluindo complementar, análoga, triádica, tetrádica, split-complementar, monocromática, duplo-split-complementar, retângulo, clash, cinco tons e seis tons), Gerar (com sombras/matizes/tons, aleatório restrito, pares de contraste WCAG, interpolação de gradiente e extração de cores de imagem) e Humor (com 20 presets baseados em humor). O resultado é uma paleta que você pode copiar como valores hexadecimais, baixar como arquivo de variáveis CSS, objeto JSON, variáveis SCSS ou extensão de configuração Tailwind, ou exportar como arquivo Adobe Swatch Exchange (ASE). Tudo funciona no navegador — nenhum dado é enviado para servidor algum.

Funcionalidades principais

• Esquemas de cores complementares: Gera uma paleta de duas cores usando cores diretamente opostas no círculo cromático (a 180° de distância), produzindo contraste máximo com equilíbrio visual inerente.
• Paletas de cores análogas: Produz três cores que ficam adjacentes no círculo cromático, criando paletas harmoniosas e de baixo contraste, bem adequadas para fundos e designs de interface tranquilos.
• Harmonias triádicas e tetrádicas: O triádico usa três cores espaçadas uniformemente em intervalos de 120°; o tetrádico usa quatro cores em intervalos de 90°. Ambos oferecem ricas opções multicoloridas mantendo a harmonia.
• Esquemas split-complementares: Uma alternativa mais suave ao complementar — pega a cor base e duas cores adjacentes ao seu complemento em vez do complemento em si. Verificado no componente como tipo de harmonia 'split-complementary'.
• Variações monocromáticas: Gera múltiplas sombras do mesmo matiz variando a luminosidade, criando paletas coesas de tom único.
• Ajustar saturação e luminosidade: A entrada de cor base aceita qualquer valor HEX válido digitado manualmente, escolhido por um widget de seleção de cores ou gerado aleatoriamente com o botão Aleatório.
• Copiar cores em múltiplos formatos: Cada cor na paleta tem seu próprio botão de cópia. O botão "Copiar tudo" escreve toda a paleta como valores HEX separados por vírgula e também registra a ação no histórico da sessão.
• Exportar paleta como JSON, CSS, SCSS, Tailwind ou ASE: Cinco formatos de exportação estão disponíveis diretamente da ferramenta, cobrindo desenvolvimento web, pré-processadores de folhas de estilo e aplicações de design da Adobe.

Como usar o Palette Generator

Passo 1: Escolha sua cor base

Abra o Em breve: Palette Generator. A ferramenta carrega com uma cor base padrão derivada do seu esquema de cores atual do site (o esquema padrão usa azul). Mude-a de três formas:

• Clique na entrada da amostra de cor (um seletor de cores nativo do navegador abre)
• Digite ou cole um valor HEX diretamente no campo de texto ao lado da amostra
• Clique no botão "Aleatório" para gerar uma cor HEX aleatória

Uma grande prévia de amostra é atualizada em tempo real mostrando sua cor base com seu valor hexadecimal em texto contrastante.

Passo 2: Selecione um tipo de harmonia

Abaixo da seção de cor base, onze botões de tipo de harmonia são exibidos em uma grade. Clique em um para selecioná-lo:

O botão de tipo de harmonia ativo é destacado na cor primária. A paleta gerada é atualizada instantaneamente a cada mudança de seleção.

Passo 3: Revisar a paleta gerada

A seção "Paleta gerada" mostra duas visualizações do resultado:

• Uma faixa horizontal de blocos de cores, cada um ocupando largura proporcional. Clique em qualquer bloco para copiar o valor HEX dessa cor diretamente.
• Uma lista abaixo da faixa mostrando o código HEX de cada cor com uma amostra e seu próprio botão de cópia. A primeira entrada é rotulada como a cor base.

Por exemplo, começando de #e63946 com harmonia triádica produz:

#e63946  (base)
#46e639
#3946e6

Passo 4: Copiar ou exportar

Use os botões de exportação para salvar a paleta para seu fluxo de trabalho:

• Exportar JSON: Baixa triadic-palette.json contendo { baseColor, harmonyType, palette }.
• Exportar CSS: Baixa triadic-palette.css como propriedades CSS personalizadas :root: --color-1, --color-2, etc.
• Exportar Tailwind JS: Baixa triadic-tailwind.js com um bloco de configuração Tailwind theme.extend.colors usando palette como chave de família de cores com entradas como color-1, color-2, etc.
• Exportar Variáveis SCSS: Baixa triadic-palette.scss com $color-1, $color-2, etc., mais um mapa Sass.
• Exportar ASE (premium): Baixa um arquivo binário Adobe Swatch Exchange legível por Photoshop, Illustrator e outras aplicações Adobe.

Passo 5: Salvar como preset ou redefinir

Se você usa regularmente essa combinação de cor base e tipo de harmonia, use o painel de Presets (recurso de apoiador do Glyph Widgets) para salvá-la por nome para recall com um clique. Para restaurar os padrões, clique no botão Limpar — isso redefine para a cor base #8467c7 e o tipo de harmonia complementar.

Exemplos práticos

Projetar um sistema de cores para uma landing page

Comece com sua cor de marca principal, por exemplo #0f62fe (IBM Blue). Selecione a harmonia split-complementar para obter um par de contraste mais suave. O resultado lhe dá um azul primário mais duas opções de destaque quente que funcionam juntas sem colidir. Exporte como variáveis CSS e cole diretamente no bloco :root da sua folha de estilo.

:root {
  --color-1: #0f62fe;
  --color-2: #fe620f;
  --color-3: #fe0f62;
}

Gerar uma extensão de paleta Tailwind

Você está construindo um projeto Tailwind CSS e precisa de uma família de cores personalizada. Digite sua cor de marca, escolha monocromática para gerar sombras do claro ao escuro, e então exporte como Tailwind JS. O arquivo baixado lhe dá um bloco theme.extend.colors pronto para colar, onde cada sombra está indexada como monochromatic-1, monochromatic-2, etc.

Preparar amostras para um projeto Adobe Illustrator

Você precisa combinar uma paleta de cores web em um design impresso. Digite a cor base, escolha seu tipo de harmonia, e então exporte como ASE. O arquivo ASE binário segue o formato ASEF e pode ser carregado diretamente no painel Swatches do Illustrator, preservando todos os valores RGB sem nenhuma reinserção manual.

Dicas e boas práticas

O botão Aleatório define uma cor HEX base completamente aleatória. Use-o para explorar harmonias que você não teria escolhido deliberadamente — é uma forma rápida de encontrar pontos de partida inesperados para um novo design.

Ao comparar tipos de harmonia, observe que a cor base é sempre a primeira entrada em cada paleta gerada. Isso permite ancorar sua paleta a uma cor à qual você já se comprometeu (uma cor de logo, um valor de diretriz de marca) enquanto explora diferentes opções complementares.

Paletas triádicas funcionam bem quando você precisa de três cores funcionais claramente distintas — ação primária, ação secundária e estados destrutivos ou de aviso. O espaçamento de 120° garante que nenhuma das duas seja visualmente muito similar.

Para acessibilidade, passe as cores da sua paleta gerada pelo Contrast Checker antes de finalizar. Pares complementares frequentemente atendem aos requisitos de contraste WCAG, mas paletas análogas podem produzir combinações que falham para uso em texto.

O painel de histórico (recurso de apoiador) registra cada ação "Copiar tudo" com a cor base e o tipo de harmonia, permitindo que você retorne a uma paleta que gerou anteriormente na sessão sem se lembrar dos valores exatos.

Problemas comuns e resolução

A paleta não atualiza quando digito um valor HEX: A ferramenta reage a cada pressionamento de tecla na entrada de texto. Se você digitar uma string HEX incompleta ou inválida, a função generateHarmony recebe o valor atual e pode produzir saída inesperada até que o valor seja um HEX válido de 6 dígitos. Digite o valor completo ou use a entrada do seletor de cores para garantir um resultado válido.

O botão Aleatório produz paletas muito escuras ou muito claras: A função generateRandomColor() gera uma gama completa de valores HEX, incluindo quase-preto e quase-branco. Se o resultado aleatório for muito extremo, clique em Aleatório novamente ou ajuste a cor base manualmente usando o seletor de cores.

Exportar como ASE produz um arquivo que a Adobe não consegue abrir: A exportação ASE constrói um arquivo binário no formato ASEF no navegador usando DataView. Se o download contiver zero bytes ou o arquivo for rejeitado, verifique se seu navegador suporta Blob com application/octet-stream. Navegadores modernos baseados em Chromium e Firefox lidam com isso corretamente.

"Copiar tudo" copia uma lista separada por vírgulas, mas preciso de valores separados por quebra de linha: A saída da área de transferência usa , como separador. Cole os valores em um editor de texto e use localizar-e-substituir para trocar , por uma quebra de linha se sua ferramenta alvo requerer um valor por linha.

O botão Limpar redefine para os padrões: O botão Limpar é projetado para restaurar as configurações padrão, incluindo a cor base do seu esquema de cores atual do site e o tipo de harmonia complementar. Esse é o comportamento esperado — ele não restaura uma cor personalizada anterior.

Privacidade e segurança

O Palette Generator funciona completamente do lado do cliente. Todos os cálculos de harmonia de cores acontecem no seu navegador usando JavaScript — nenhum valor de cor, preferência ou dado de exportação é transmitido para servidor algum. Os arquivos exportados (JSON, CSS, SCSS, Tailwind JS, ASE) são gerados como objetos Blob em memória e baixados diretamente para o seu dispositivo. A ferramenta funciona offline depois que a página é carregada.

Perguntas frequentes

O Palette Generator é gratuito?

Sim. A geração de paletas principal e todos os formatos de exportação padrão (JSON, CSS, SCSS, Tailwind JS) são gratuitos sem necessidade de conta. A exportação ASE é um recurso de apoiador do Glyph Widgets, disponível com uma doação de $5 ou mais no Ko-fi que concede 30 dias de acesso premium.

O Palette Generator funciona offline?

Sim. Depois que a página carrega no seu navegador, todos os cálculos de cores e exportações de arquivos funcionam sem conexão à internet. A ferramenta não faz solicitações de rede durante a geração normal de paletas.

Meus dados estão seguros com o Palette Generator?

Todos os cálculos são realizados localmente no seu navegador. Nenhum dado de cor, cores base ou arquivos exportados são enviados para qualquer servidor. Seu trabalho com paletas é completamente privado.

Qual é a diferença entre triádico e split-complementar?

O triádico seleciona três cores em exatamente 120° de intervalos no círculo cromático. O split-complementar pega sua cor base e duas cores que flanqueiam seu complemento — as duas cores que estão a 30° em cada lado do matiz oposto. O split-complementar normalmente produz menos tensão visual do que um par verdadeiramente complementar, ainda oferecendo bom contraste.

Como uso as variáveis CSS exportadas?

A exportação CSS produz um bloco :root com variáveis chamadas --color-1, --color-2, etc. Cole este bloco na sua folha de estilo e referencie as variáveis em qualquer lugar com var(--color-1). O nome do arquivo inclui o tipo de harmonia, então complementary-palette.css é claramente rotulado.

Posso usar a exportação Tailwind diretamente no meu projeto?

O arquivo baixado é um trecho de configuração Tailwind, não um tailwind.config.js completo. Copie o objeto colors de dentro de theme.extend.colors e mescle-o na sua configuração Tailwind existente. A família de cores usa palette como chave com entradas como color-1, color-2, etc., então você pode referenciar cores como text-palette-color-1 ou bg-palette-color-2 nos seus templates.

O que é o formato de exportação ASE e para quem é destinado?

ASE (Adobe Swatch Exchange) é um formato binário que armazena amostras de cores para uso em aplicações Adobe Creative Suite, incluindo Photoshop, Illustrator e InDesign. Designers que trabalham tanto para web (CSS) quanto para impressão (aplicativos Adobe) podem usar a exportação ASE para manter consistência de cores em ambos os ambientes sem reinserir valores manualmente.

Quantas cores cada tipo de harmonia gera?

O complementar gera 2 cores; análoga, triádica, split-complementar e clash geram 3 cada; tetrádica e retângulo geram 4 cada; duplo-split-complementar e cinco tons geram 5 cada; seis tons gera 6; monocromática gera um número variável de sombras. Todas as entradas da paleta são exibidas na faixa de paleta e na lista abaixo dela.

Posso começar de uma cor que escolhi de uma imagem?

Sim. Use o Em breve: Image Color Picker para extrair uma cor de uma foto, copie seu valor HEX, e então cole-o no campo de texto da cor base no Palette Generator para construir uma harmonia ao redor dela.

Posso salvar minhas paletas favoritas?

Com uma conta de apoiador do Glyph Widgets, o painel de Presets permite salvar presets nomeados que armazenam a cor base e o tipo de harmonia. O painel de Histórico também registra operações passadas de "Copiar tudo", facilitando encontrar uma paleta gerada anteriormente.

Ferramentas relacionadas

• Em breve: Color Blender — Misturar duas cores juntas e gerar passos intermediários, complementando o trabalho de paleta.
• Color Picker — Escolher uma cor base precisa usando uma roda de cores ou sliders antes de gerar uma paleta.
• Em breve: Gradient Generator — Criar gradientes CSS usando cores da sua paleta gerada.
• Contrast Checker — Verificar as taxas de contraste WCAG para quaisquer duas cores da sua paleta antes de usá-las em texto de interface.

Experimente o Palette Generator agora: Em breve: Glyph Widgets Palette Generator