Ir para o conteúdo
Totalmente local

Gerador de paleta de cores

Converta uma cor em paleta completa usando regras de harmonia cromática.

Entrada
0
0
Saída

Gerador de paleta de cores

Cole uma cor base como código hex, rgb() ou hsl() e esta ferramenta constrói uma paleta completa à sua volta usando regras de harmonia cromática, não simplesmente uma rampa de luminosidade da mesma tonalidade. Escolha complementar para uma cor oposta única, complementar dividida ou triádica para contraste equilibrado, tetrática para um retângulo de quatro cores, análoga para tonalidades vizinhas que funcionam bem juntas, ou monocromática para tonalidades e variações de uma só tonalidade.

A opção harmonia decide quantas cores são geradas — complementar sempre retorna duas, triádica e complementar dividida retornam três, tetrática retorna quatro — enquanto a contagem de cores e o ângulo do incremento de tonalidade apenas se aplicam a análoga e monocromática, onde você escolhe quantas cores e a que distância. Calcule em HSL para a matemática clássica da roda cromática, ou mude para OKLCH, que mantém a mesma luminosidade percebida em todas as tonalidades para que a paleta não fique com uma amostra estranhamente escura ou desbotada ao lado das outras. Os controles de ajuste de saturação e luminosidade refinam a paleta toda após a harmonia ser construída, e a opção de formato de cor imprime cada resultado como hex, rgb(), hsl() ou oklch().

Cada amostra é verificada contra WCAG AA (4.5:1) como texto em fundo branco e preto, marcada com um ✓ ou ✗ ao lado de cada proporção — útil para escolher quais cores da paleta gerada são seguras para texto do corpo versus apenas decoração. Exporte o resultado como uma lista simples, um bloco de propriedades CSS personalizadas pronto para colar numa folha de estilos, ou um objeto de cores de configuração Tailwind.

Tudo funciona localmente no seu navegador — a cor que introduz nunca é carregada para lugar nenhum. Copie o resultado, descarregue como ficheiro .txt, ou envie para a entrada de outra ferramenta para continuar a trabalhar com ele.

FAQ

Que formatos de entrada aceita para a cor base?
Códigos hex (#3b82f6, #38f, com ou sem o #), rgb()/rgba() e hsl()/hsla(). Cole um desses e a paleta atualiza instantaneamente.
Qual é a diferença entre HSL e OKLCH no cálculo?
HSL é a matemática clássica da roda cromática e é rápida e previsível. OKLCH é um espaço perceptualmente uniforme, portanto uma paleta construída nele mantém uma luminosidade percebida mais uniforme em todas as tonalidades, em vez de algumas cores parecerem acidentalmente mais escuras ou mais claras que as outras.
Por que mudar "cores na paleta" afeta apenas algumas harmonias?
Complementar, complementar dividida, triádica e tetrática são fixas por definição — duas, três, três e quatro cores. A contagem apenas controla análoga e monocromática, que podem razoavelmente ter qualquer número de cores.
O que significa o ✓/✗ ao lado de cada cor?
É o índice de contraste WCAG dessa cor usada como texto sobre um fundo branco e sobre um fundo preto, com um ✓ quando ultrapassa o limiar AA de 4.5:1 e um ✗ quando não ultrapassa.
A minha cor é carregada para algum lugar?
Não. A paleta é gerada inteiramente no seu navegador — nada do que escreve é enviado para um servidor.