Gerador de Paleta de Cores - Crie Esquemas de Cores Harmoniosos

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 na 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 a matiz, a luminosidade ou ambas e, em seguida, converte o resultado novamente para um código hexadecimal.

Como calcular cores complementares

A fórmula:

$h' = (h + 180) \bmod 360$

em que h é a matiz da cor primária em graus e h′ é a nova matiz. A etapa mod faz com que um resultado que ultrapasse uma volta completa retorne à roda.

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.

$h \pm 30^{\circ}, \qquad h \pm 60^{\circ}$

em que h é a matiz da cor primária.

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.

$h + 120^{\circ}, \qquad h + 240^{\circ}$

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%.

$l \pm 15, \qquad l \pm 30$

em que l é a luminosidade da cor primária, em pontos percentuais.

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

Por causa dos limites de 5% e 95%, uma cor primária que já seja muito clara ou muito escura pode atingir o mesmo limite duas vezes. O preto, #000000, resulta em luminosidade 15% (#262626), 5% (#0D0D0D), 30% (#4D4D4D) e novamente 5% (#0D0D0D), portanto uma cor se repete.

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. Consulte a paleta gerada. Cada amostra exibe seu código hexadecimal em um botão.
4. Clique nesse botão para copiar o código hexadecimal ou use "Copiar todas as cores" para copiar a paleta inteira de uma só vez.

Verificação do contraste para acessibilidade

Cada amostra de cor exibe dois pequenos indicadores: um para o contraste contra o branco e outro para o contraste contra o preto. A ferramenta calcula uma razão de contraste usando a fórmula das WCAG (Diretrizes de Acessibilidade para Conteúdo da Web):

$C = \frac{L_{1} + 0.05}{L_{2} + 0.05}$

em que C é a razão de contraste.

L1 é a luminância relativa da cor mais clara, e L2 é a luminância relativa da cor mais escura. A luminância é obtida dos valores de vermelho, verde e azul da cor. Um indicador exibe "AA" quando a razão é 4,5 ou maior, que é o mínimo das WCAG para texto de tamanho normal. Ele exibe "!" quando a razão é menor que 4,5. Ao passar o cursor sobre um indicador, a razão exata é exibida. Texto preto sobre fundo branco obtém uma razão de 21, o maior valor possível.

A ferramenta usa a mesma regra de contraste para escolher a cor do botão de cópia em cada amostra. Ela compara a cor da amostra com o preto e com o branco e usa a opção que oferece melhor legibilidade. A mudança ocorre em uma luminância relativa de aproximadamente 0,179, o ponto em que as duas razões são iguais.

Dúvidas 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 escreve cada cor gerada como um código hexadecimal de seis dígitos precedido do sinal # (por exemplo, #ff0000 para vermelho). Os códigos hexadecimais mapeiam diretamente os valores de vermelho, verde e azul de 0 a 255 cada um. A cor primária é exibida exatamente como foi inserida, portanto uma abreviação de três dígitos, como #F00, permanece no formato curto. Códigos de três dígitos representam a mesma cor que a forma de seis dígitos: cada dígito é duplicado, portanto #F00 equivale a #FF0000. HSL é uma forma alternativa de descrever as mesmas cores, usando matiz, saturação e luminosidade em vez das quantidades de vermelho, verde e azul.