Gerador de combinações de cores
Escolha uma harmonia, arraste os pontos conectados na roda das cores interativa e ajuste a luminosidade para criar uma paleta equilibrada.
Experimentar exemplo
Círculo cromático interativo
Arraste qualquer ponto para girar a harmonia. Mova em direção ao centro para reduzir a saturação.
Base
#3B82F6Complementar
#EEAD44Base · Variação 1
#AAC0E3Complementar · Variação 1
#E0CDADBase · Variação 2
#255BB1Mais ferramentas
Picker
Seletor de Cores
Faça upload de uma imagem e clique para extrair códigos de cor HEX, RGB e HSL.
Converter
Conversor de Cores
Converta cores entre HEX, RGB e HSL instantaneamente.
Checker
Verificador de Contraste
Verifique as proporções de contraste de cores em relação aos padrões WCAG AA e AAA.
Extrator
Extrator de paleta de imagem
Encontre as cores dominantes de uma imagem e copie a paleta como HEX, RGB ou variáveis CSS.
Crie combinações de cores na hora
Encontrar cores que combinam é um dos desafios mais comuns em design. A roda das cores mostra as relações entre os matizes e oferece uma base confiável para criar combinações equilibradas.
Este gerador usa qualquer cor base e aplica regras de harmonia para produzir combinações de cores prontas para comparar. Digite uma cor em HEX, RGB ou HSL e alterne entre os tipos de harmonia da roda das cores.
Tipos de harmonia explicados
- Complementar — duas cores opostas no círculo cromático (a 180°). Alto contraste, combinações marcantes.
- Análoga — três cores adjacentes no círculo (a 30°). Naturalmente harmônica e baixo contraste.
- Triádica — três cores equidistantes no círculo (a 120°). Vibrante e equilibrada.
- Complementar dividida — uma cor base mais duas cores adjacentes ao seu complementar (150° e 210°). Mais suave que o complementar puro.
- Tetrádica (quadrado) — quatro cores equidistantes no círculo (a 90°). Paletas ricas e complexas.
Como usar o gerador de paletas
- Digite uma cor base — insira um valor HEX, RGB ou HSL, ou use o seletor de cor nativo
- Escolha um tipo de harmonia no seletor
- Arraste um ponto conectado na roda para mudar matiz e saturação e depois ajuste a luminosidade
- Veja a paleta gerada exibida como amostras de cor
- Copie valores HEX ou RGB de qualquer amostra com um clique
- Alterne entre tipos de harmonia para comparar diferentes paletas
Quando usar um gerador de paletas
- Ao iniciar um novo projeto de design e precisar de uma paleta equilibrada
- Para construir uma identidade de marca em torno de uma cor principal
- Para criar temas de interface com cores de destaque harmônicas
- Para explorar relações cromáticas em ilustração ou arte
- Para gerar paletas rapidamente em apresentações ou protótipos
Harmonia principal e variações de apoio
Cada harmonia gera cinco amostras. A complementar tem duas cores principais; a análoga, a triádica e a complementar dividida têm três, e a tetrádica tem quatro. As demais são variações de apoio com saturação ou luminosidade ajustadas.
Crie cinco cores a partir de uma cor-base
A cor-base identificada é preservada enquanto a roda das cores calcula a harmonia e suas variações. Para obter as cores dominantes de uma imagem inteira, use o Extrator de paleta da imagem; para um pixel exato, use o Seletor de cores.
Use HEX, RGB, HSL e OKLCH
O campo aceita HEX, RGB, HSL e OKLCH. Copie uma amostra em HEX ou RGB, ou use “Copiar paleta” para obter as cinco cores como códigos HEX maiúsculos separados por vírgulas.
Rápido, grátis e privado
Todos os cálculos acontecem no seu navegador. Não há cadastro, upload, armazenamento nem processamento no servidor; a roda funciona com mouse, toque e teclado.
A roda mostra relações cromáticas teóricas, mas não garante legibilidade. Use o Verificador de contraste para medir o contraste WCAG e o Conversor de cores para mudar de formato.
Perguntas frequentes
- O que é harmonia cromática?
- Harmonia cromática refere-se a combinações de cores visualmente agradáveis. Essas combinações se baseiam nas relações geométricas entre matizes no círculo cromático — por exemplo, cores opostas (complementares) ou equidistantes (triádicas).
- Qual tipo de harmonia devo usar?
- Depende do seu objetivo de design. O complementar cria forte contraste e impacto visual. O análogo transmite calma e coesão. O triádico é vibrante e equilibrado. O complementar dividido oferece contraste com menos tensão. O tetrádico dá paletas ricas e complexas, ideais para designs com muitos elementos.
- Quais formatos de cor posso inserir?
- Você pode inserir HEX, RGB, HSL ou OKLCH; a ferramenta detecta o formato automaticamente.
- Como as cores da paleta são calculadas?
- A cor base é convertida para HSL e posicionada nos ângulos exatos da harmonia escolhida. Cada relação é ampliada para cinco amostras práticas com variações equilibradas de saturação e luminosidade. A roda interativa mostra cada amostra: arrastar um ponto gira toda a harmonia, enquanto o controle de luminosidade atualiza a paleta.
- Posso copiar as cores geradas?
- Sim. Copie cada cor em HEX ou RGB, ou a paleta completa como cinco códigos HEX maiúsculos separados por vírgulas.
- Esta ferramenta funciona no celular?
- Sim. A roda responsiva funciona por toque no celular e com mouse ou teclado no computador.
- Esta ferramenta é grátis?
- Sim. O ColourPicker.app é completamente gratuito, sem necessidade de cadastro.
- Posso salvar minhas paletas geradas?
- A ferramenta não salva paletas entre sessões. Você pode copiar valores de cores individuais e salvá-los nos seus arquivos de projeto ou ferramenta de design.
- O que a roda das cores mostra?
- Ela organiza os matizes em um círculo: o ângulo representa o matiz, a distância do centro representa a saturação e o controle separado ajusta a luminosidade.
- Por que cada paleta contém cinco cores?
- Cinco amostras oferecem um conjunto consistente de duas a quatro cores principais mais as variações de apoio necessárias.
- O que são cores principais e variações de apoio?
- As cores principais formam a geometria escolhida; as variações reutilizam esses matizes com saturação ou luminosidade ajustadas.
- Uma harmonia garante contraste suficiente?
- Não. A harmonia descreve relações entre matizes; verifique separadamente o contraste WCAG entre primeiro plano e fundo.