Pular para o conteúdo
🛠️
Whiz Tools

Gerador de Paleta de Cores - Crie Esquemas de Cores Harmoniosos

Gerador gratuito de paleta de cores cria belos esquemas de cores complementares, análogos, tríadicos e monocromáticos instantaneamente. Escolha uma cor primária e gere paletas harmoniosas para design web, gráficos e projetos de branding.

Gerador Simples de Paleta de Cores

Selecione o tipo de harmonia

Paleta Gerada

Selecione uma cor e um tipo de harmonia para gerar uma paleta

Sobre Harmonias de Cores

Harmonias de cores são combinações de cores agradáveis aos olhos. Elas criam um senso de ordem e equilíbrio no design.

Tipos de Harmonia

  • Complementar: Cores opostas no círculo cromático, criando alto contraste e visuais vibrantes.
  • Análogo: Cores adjacentes no círculo cromático, criando um design sereno e confortável.
  • Tríade: Três cores igualmente espaçadas no círculo cromático, oferecendo forte contraste visual mantendo a harmonia.
  • Monocromático: Diferentes tons, matizes e nuances de uma única cor, criando uma aparência coesa com variações sutis.
Calculadora de carregamento...
📚

Documentação

O que é um gerador de paletas de cores?

Um gerador de paletas de cores é uma ferramenta que cria um conjunto de cores combinando a partir de uma cor inicial, chamada cor primária. Este gerador de paletas de cores recebe uma cor primária e um tipo de harmonia, e então calcula o restante da paleta usando regras da teoria das cores. Os quatro tipos de harmonia compatíveis são complementar, análoga, triádica e monocromática.

Como a ferramenta cria uma paleta

A ferramenta converte a cor primária do código hexadecimal (como #3B82F6) para o modelo de cores HSL. HSL descreve uma cor com três números:

  • Matiz: a posição da cor em uma roda de cores de 360 graus (0° é vermelho, 120° é verde, 240° é azul).
  • Saturação: a intensidade da cor, de 0% (cinza) a 100% (cor pura).
  • Luminosidade: o quanto a cor se aproxima do preto ou do branco, de 0% (preto) a 100% (branco).

Cada tipo de harmonia desloca o matiz, a luminosidade ou ambos e, em seguida, converte o resultado novamente para um código hexadecimal.

Como calcular cores complementares

A fórmula:

1new_hue = (original_hue + 180) mod 360
2

A saturação e a luminosidade permanecem iguais.

Exemplo resolvido: O azul puro, #0000FF, tem matiz 240°, saturação 100% e luminosidade 50%. Somar 180° resulta em uma matiz de 60°. Converter a matiz 60° novamente para hexadecimal, com a mesma saturação e luminosidade, produz #FFFF00, um amarelo. Portanto, esta ferramenta combina azul com amarelo, não com laranja.

Isso pode causar confusão porque as aulas de arte costumam ensinar uma roda de cores diferente, a roda de pigmentos RYB (vermelho-amarelo-azul), na qual o oposto do azul é o laranja. Esta ferramenta funciona com a roda HSL baseada em RGB, usada pelas telas, portanto seus pares complementares diferem dos da roda de mistura de tintas.

Como calcular cores análogas

As cores análogas ficam próximas da cor primária na roda. A ferramenta gera duas matizes a 30° e duas matizes a 60° da matiz primária, todas com a mesma saturação e luminosidade.

1hue ± 30°  and  hue ± 60°
2

Exemplo resolvido: O azul, #0000FF (matiz 240°), produz a matiz 270° (#8000FF), a matiz 210° (#0080FF), a matiz 300° (#FF00FF) e a matiz 180° (#00FFFF). Junto com a cor primária, a paleta contém cinco cores.

Como calcular cores triádicas

As cores triádicas ficam separadas por 120° na roda, formando um trio uniformemente espaçado com a cor primária.

1hue + 120°  and  hue + 240°
2

Exemplo resolvido: O vermelho, #FF0000 (matiz 0°), produz a matiz 120° (#00FF00, verde) e a matiz 240° (#0000FF, azul). O conjunto de três cores é vermelho, verde e azul, as mesmas três matizes usadas como primárias nas telas digitais.

Como calcular cores monocromáticas

As cores monocromáticas mantêm a mesma matiz e saturação e alteram apenas a luminosidade. A ferramenta desloca a luminosidade em 15 e 30 pontos percentuais em cada direção, limitada entre 5% e 95%.

1lightness ± 15  and  lightness ± 30
2

Exemplo resolvido: O azul, #0000FF (luminosidade 50%), produz luminosidade 65% (#4D4DFF), luminosidade 35% (#0000B3), luminosidade 80% (#9999FF) e luminosidade 20% (#000066).

Como usar a ferramenta

  1. Escolha uma cor primária com o seletor de cores ou digite um código hexadecimal, como #3B82F6.
  2. Escolha um tipo de harmonia: complementar, análoga, triádica ou monocromática.
  3. Leia a paleta gerada. Cada amostra mostra seu código hexadecimal.
  4. Clique em uma amostra para copiar seu código hexadecimal ou use "Copiar todas as cores" para copiar a paleta inteira de uma vez.

Verificação do contraste para acessibilidade

Cada amostra de cor exibe dois pequenos selos: um para o contraste com o branco e outro para o contraste com o preto. A ferramenta calcula a razão de contraste com a fórmula das WCAG (Web Content Accessibility Guidelines, diretrizes de acessibilidade para conteúdo web):

1contrast ratio = (L1 + 0.05) / (L2 + 0.05)
2

L1 é a luminância relativa da cor mais clara, e L2 é a luminância relativa da cor mais escura. A luminância é obtida a partir dos valores de vermelho, verde e azul da cor. Um selo indica "AA" quando a razão é de 4,5 ou mais, que é o mínimo de 4,5:1 do Nível AA das WCAG para texto de tamanho normal. Caso contrário, mostra "!". Texto preto sobre fundo branco tem razão de 21, o maior valor possível.

Perguntas frequentes

O que é um gerador de paletas de cores? É uma ferramenta que produz um conjunto de cores que combinam entre si, partindo de uma cor primária e de uma regra de harmonia escolhida.

Por que esta ferramenta combina azul com amarelo, em vez de laranja, para cores complementares? A ferramenta gira a matiz em 180° na roda HSL, que se baseia na forma como as telas misturam luz vermelha, verde e azul. A roda de tintas vermelho-amarelo-azul ensinada nas aulas de arte produz pares complementares diferentes, porque mistura pigmentos em vez de luz.

Quantas cores cada tipo de harmonia produz? A harmonia complementar produz 2 cores ao todo (incluindo a primária). A triádica produz 3. A análoga produz 5. A monocromática produz 5.

Que modelo de cores a ferramenta usa internamente? HSL (matiz, saturação e luminosidade). Ela converte o código hexadecimal de entrada para HSL, faz os cálculos e converte o resultado novamente para hexadecimal.

A ferramenta verifica se as cores são acessíveis? Sim. Cada amostra mostra se tem contraste suficiente contra o branco e contra o preto para atender ao padrão WCAG AA para texto normal, que exige uma razão de pelo menos 4,5.

Posso usar mais de um tipo de harmonia em um projeto? Sim. Muitos designs combinam tipos de harmonia, por exemplo, um conjunto análogo para as cores principais e uma cor complementar para um botão ou destaque.

Formatos de cor

A ferramenta exibe as cores como códigos hexadecimais, códigos de seis dígitos precedidos pelo sinal # (por exemplo, #FF0000 para o vermelho). Os códigos hexadecimais correspondem diretamente aos valores de vermelho, verde e azul, de 0 a 255 cada. HSL é uma forma alternativa de descrever as mesmas cores usando matiz, saturação e luminosidade em vez das quantidades de vermelho, verde e azul.

Referências

  1. World Wide Web Consortium (W3C). Web Content Accessibility Guidelines (WCAG) 2.2. WCAG 2.2 — razão de contraste (L1 + 0,05) / (L2 + 0,05), razões de 1 a 21 e o mínimo de 4,5:1 para texto normal (Critério de Sucesso 1.4.3, Nível AA).
  2. World Wide Web Consortium (W3C). CSS Color Module Level 4. CSS Color Module Level 4 — em HSL, o matiz 0° é vermelho, 120° é verde e 240° é azul.