Gerador de Paletas

Pressione Espaço para gerar paletas aleatórias harmoniosas com travar, reordenar e ajuste H/S/L por amostra. Exporte HEX, RGB, HSL, CSS, SVG ou PNG, ou mude para o modo imagem e extraia uma paleta de qualquer foto.

Copiar como:

ou Espaço

Bloqueie para manter · arraste para reordenar · clique para copiar · Espaço para gerar

Cores de interface

Transforma a paleta atual em tokens de interface prontos para desenvolvedores com contraste legível.

O que é um gerador de paletas?

Um jeito rápido de achar cores que combinam

Um gerador de paletas cria um conjunto de 5 a 10 cores feitas para ficarem bem juntas. Em vez de escolher cores uma por uma e torcer para combinarem, você recebe uma harmonia pronta em um clique, como ter um consultor profissional de cores dentro do navegador.

Nossa ferramenta oferece duas abordagens comprovadas: Aleatório cria harmonias novas com base na teoria das cores, enquanto o modo imagem extrai as cores que realmente dominam sua foto contando pixels. Ambos são grátis e instantâneos, sem cadastro.

Use a paleta para marcas, sites, posts sociais, ilustrações ou slides, copie como HEX, RGB, HSL ou variáveis CSS, ou baixe como TXT, SVG ou PNG.

Como usar

Dois jeitos de criar: aleatório e imagem

🎲 Modo aleatório (padrão)

01

Escolha uma harmonia

Escolha Aleatória, Análoga, Complementar, Triádica, Tetrádica, Mono ou Tons. Cada uma usa regras de matiz da teoria das cores.

02

Gere e trave

Clique em Gerar ou pressione Espaço. Trave as cores que você ama, os espaços destravados se regeneram enquanto as travadas ficam fixas.

03

Refine e exporte

Arraste para reordenar, clique na engrenagem para ajustar H/S/L, remova ou adicione até 10. Copie como HEX/RGB/HSL/CSS ou baixe CSS, JSON, SVG ou PNG. O ícone de relógio guarda suas últimas 10 gerações para restaurar rápido.

🖼️ Modo imagem

01

Envie uma imagem

Clique no ícone de imagem, arraste e solte, cole, ou carregue por URL.

02

Extração automática

Analisamos cerca de 12 mil pixels, quantizamos, ordenamos por área (dominância) e unimos cores próximas (distância 0.08).

03

Ajuste e use

A paleta aparece acima da prévia da foto. Remova amostras, arraste para reordenar, copie no formato escolhido, ou exporte o conjunto.

Guia de harmonias

Escolha a regra que combina com seu estilo, nós cuidamos da matemática.

Aleatória

Matizes vibrantes e bem distribuídos (S 65-90, L 48-66). Ideal para explorar e se inspirar.

Análoga

Matizes separados por ±30°/60°. Calma, coesa, ótima para fundos, gradientes e temas de natureza.

Complementar

Matizes a 180° de distância. Pares de alto contraste, ideais para CTAs, logotipos e marcas de esporte e comida.

Triádica

Três matizes a 120° de distância. Equilibrada e viva, popular em ilustrações, painéis e embalagens.

Tetrádica

Quatro matizes em retângulo (0/90/180/270). Rica e variada. Use uma dominante e o resto como destaques.

Monocromática / Tons

Um só matiz, com leveza e saturação variadas. Elegante, minimalista, perfeita para SaaS, editorial e marcas monocromáticas.

Casos de uso reais

Identidade de marca

Gere um kit de marca de 5 cores em segundos. Trave sua cor primária, explore tons de apoio, exporte variáveis CSS direto para seu design system.

UI e web design

Crie interfaces acessíveis: fundo, superfície, primária, destaque e texto. Confira o contraste, copie o HEX pronto para Tailwind, cole no Figma.

Redes sociais e marketing

Acerte o clima da campanha rápido, pastel para bem-estar, complementar para promoções, tons para premium. Pressione Espaço até encaixar.

Ilustração e arte

Harmonias triádicas e análogas dão a ilustradores conjuntos equilibrados sem misturas opacas. Ajuste H/S/L por amostra para impressão.

Interiores e moda

Extraia paletas de fotos de ambientes, looks ou produtos para manter histórias de cores do mundo real consistentes.

Gráficos e slides

Precisa de 6 a 10 cores distintas e harmoniosas para gráficos? Gere tetrádica, trave as legíveis, exporte a legenda em SVG/PNG.

Perguntas frequentes

1Como gero uma paleta de cores aleatória?

Selecione uma harmonia (ou Aleatória), clique em Gerar ou pressione Espaço. Cada toque cria um conjunto novo de 5 cores (ajustável de 1 a 10 com +/-). Trave qualquer amostra para mantê-la enquanto o resto se regenera.

2Também posso extrair uma paleta de imagem aqui?

Sim, clique no ícone de imagem para enviar ou colar uma foto e a ferramenta conta pixels para mostrar os matizes dominantes acima da prévia. Para um fluxo focado em foto com imagem de exemplo já carregada, use o gerador de paleta de imagem dedicado.

3Qual a diferença entre os modos Aleatório e Imagem?

O Aleatório cria harmonias da teoria das cores do zero (matemática HSL). O modo imagem encontra as cores que realmente dominam sua foto por frequência, ideal para combinar arte, logotipos ou fotografias existentes.

4Como funcionam travar, arrastar e ajustar?

Travar (ícone de cadeado) fixa uma cor entre gerações. Arraste qualquer amostra para reordenar (a ordem afeta a exportação CSS). O ícone de engrenagem abre controles H/S/L para ajuste fino sem sair da página.

5O que significam as opções de harmonia?

Análoga: vizinhas no círculo (calma). Complementar: opostas (ousada). Triádica: 3x120° (equilibrada). Tetrádica: 4 cantos (rica). Monocromática/Tons: um matiz, leveza variada (minimalista). Aleatória: mistura livre e vibrante para descobrir.

6Em quais formatos posso copiar ou baixar?

Use a chave Copiar como para HEX, RGB, HSL ou variáveis CSS, ela controla amostras individuais e o botão de copiar o conjunto. O popup de download oferece quatro abas: CSS (salvo como palette.txt), JSON, faixa SVG ou PNG legendado.

7É grátis? Minhas imagens são enviadas?

Sim, grátis para sempre sem cadastro. Paletas aleatórias são pura matemática de cores, e qualquer foto enviada é lida localmente via Canvas.

8Quantas cores uma paleta pode ter?

De 1 a 10. Use -/+ ao lado da faixa. O aleatório começa com 5, a imagem com 8 (visão dominante). O histórico guarda suas últimas 10 gerações para restaurar rápido.

Gerador de Paleta de Imagem

Extraia a paleta de qualquer foto

Gerador de Gradientes

CSS linear, radial e cônico

Verificador de Contraste

Notas de legibilidade de texto WCAG

Conversor de Cores

HEX RGB HSL HSV CMYK LAB