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.

Tipo de harmonia

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.

60%
H 217°S 91%L 60%
Harmonia principal (2)Variações de apoio (3)
Base
Complementar

Base

#3B82F6

Complementar

#EEAD44

Base · Variação 1

#AAC0E3

Complementar · Variação 1

#E0CDAD

Base · Variação 2

#255BB1

Mais ferramentas

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

  1. Digite uma cor base — insira um valor HEX, RGB ou HSL, ou use o seletor de cor nativo
  2. Escolha um tipo de harmonia no seletor
  3. Arraste um ponto conectado na roda para mudar matiz e saturação e depois ajuste a luminosidade
  4. Veja a paleta gerada exibida como amostras de cor
  5. Copie valores HEX ou RGB de qualquer amostra com um clique
  6. 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.