Gerador de Paleta de Cores - Ferramenta online gratuita

Funcionalidades

Cores complementares

Cores análogas

Esquema triádico

Complementar dividido

Exportar como variáveis CSS

Como Usar

1. Escolha uma cor base e um esquema de harmonia — a superfície se preenche com uma paleta.

2. Pressione Espaço (ou Embaralhar) para variações. Passe o mouse sobre uma coluna para copiar, editar, abrir a escala de tons ou travá-la contra novos sorteios.

3. Alterne a superfície (branco / cinza / escuro / xadrez) para testar a paleta em fundos diferentes e exporte como CSS, Tailwind, JSON, SVG ou PNG.

Sobre esta ferramenta

Boas paletas raramente são aleatórias: a maioria segue relações no círculo cromático. A partir de uma cor base, este gerador cria paletas de seis cores com harmonias clássicas — análoga (matizes vizinhos para designs tranquilos), monocromática (um matiz em luminosidades diferentes), complementar (matizes opostos para contraste forte), complementar dividida, triádica e tetrádica. Cada coluna mostra seu valor e um nome aproximado da cor; você pode copiá-la, editá-la, abrir uma escala de tons mais claros e mais escuros ou travá-la para que não mude enquanto embaralha o resto. Visualize a paleta sobre fundo branco, cinza, escuro ou transparente e exporte-a como variáveis CSS, configuração de cores do Tailwind, JSON, SVG ou uma folha de amostras em PNG.

Perguntas Frequentes

Qual a diferença entre os esquemas de harmonia?

A análoga usa matizes vizinhos, a monocromática mantém um matiz e varia a luminosidade, a complementar junta matizes opostos, a complementar dividida usa os dois matizes ao lado do complementar, a triádica espaça três matizes a 120° e a tetrádica usa quatro matizes a 90°.

Qual esquema funciona melhor para um site?

Paletas análogas ou monocromáticas são as mais fáceis para interfaces porque transmitem calma. Esquemas complementares e triádicos dão destaques fortes, então uma abordagem comum é uma cor dominante, uma cor de apoio e um pouco da complementar para chamadas para ação.

Como funcionam as cores travadas?

Travar uma coluna mantém exatamente aquela cor quando você pressiona Espaço ou Embaralhar para gerar variações. É útil quando uma cor da marca é fixa e você quer explorar o que combina com ela.

As paletas geradas são acessíveis?

Harmonia não garante contraste legível. Antes de usar duas cores da paleta como texto e fundo, verifique o par num verificador de contraste segundo a WCAG AA (4,5:1 para texto comum).

Em quais formatos posso exportar?

Propriedades personalizadas CSS, um trecho theme.extend.colors do Tailwind, um array JSON de valores HEX, um arquivo SVG com as amostras e um PNG de 1500 × 900 com os valores impressos em cada coluna.