O gerador de paleta de cores transforma um tom inicial em um conjunto pronto de cores harmoniosas. Você escolhe um modo de harmonia e uma cor base, e o gerador posiciona as cores parceiras por você: a visualização padrão é um par complementar, o azul #428CD7 e o laranja #D78C42, calculado no momento em que a página carrega. Tudo roda no navegador, então as paletas que você constrói ficam no seu dispositivo.
Cinco modos de harmonia, um controle
Os cinco botões de modo são o coração da ferramenta. Complementar dá 2 cores, o tom base e o tom a 180 graus. Análogo dá 4, a 30 e 60 graus de um lado e 30 graus do outro. Triádico dá 3, separados 120 graus. Tetraédrico dá 4, a 90, 180 e 270 graus. Complementar dividido dá 3, a 150 e 210 graus. O controle de matiz vai de 0 a 360 e por padrão está em 210, um azul médio, e todos os deslocamentos dão a volta na roda, então uma base de 340 no modo análogo produz tons em 340, 10, 40 e 310.
Saturação e luminosidade fixas, 65 e 55
Não há controles de saturação nem de luminosidade, porque ambas são constantes: cada cor que a ferramenta gera é calculada com 65% de saturação e 55% de luminosidade, e só o matiz muda, de um modo para o outro e ao arrastar o controle. Isso mantém todas as cores da paleta com o mesmo peso visual, então o conjunto se lê como uma família e não como um monte aleatório. A conversão em si é o algoritmo padrão de HSL para hexadecimal, e o resultado sempre é um código hex de 7 caracteres em maiúsculas, como #428CD7.
A paleta atualiza ao vivo
Não há botão de gerar. A paleta é recalculada toda vez que você clica em um botão de modo ou move o controle, então as amostras seguem seu ingresso sem passo intermediário. Clique em tetraédrico e de imediato você tem quatro amostras em vez de duas; desloque o matiz alguns graus e todas as amostras se movem na mesma direção. Isso torna a exploração rápida: você pode varrer a roda inteira em segundos e parar onde o conjunto ficar bem.
O botão de aleatorizar
O botão de dados escolhe um tom inteiro entre 0 e 359, salta o controle para lá e mantém o modo que você já tinha escolhido, e então a paleta é recalculada exatamente como se você tivesse arrastado o controle até lá você mesmo. É uma forma rápida de se livrar de uma cor para a qual você continua voltando: jogue algumas vezes até um tom base encaixar, e depois ajuste fino à mão com o controle.
Copiar cores, uma a uma ou todas de uma vez
Clicar em qualquer amostra copia aquele valor hex para a sua área de transferência, por exemplo #8C42D7 do conjunto análogo no tom 210. O botão copiar tudo copia em vez disso a paleta inteira como uma lista separada por vírgulas, como #428CD7, #D78C42 para o par complementar padrão. Os valores sempre são hex de seis dígitos em maiúsculas, que colam diretamente em CSS, em arquivos de design ou em uma mensagem de chat sem qualquer reformatação.
Por que o rótulo de uma amostra alterna entre branco e escuro
Cada amostra exibe seu valor hex ao passar o mouse, em texto branco ou quase preto conforme o quão clara é a base. A verificação é uma pontuação simples de luminância: os canais vermelho, verde e azul são ponderados 0.299, 0.587 e 0.114, e se a pontuação for estritamente maior que 186 o rótulo usa texto escuro, senão branco. É uma heurística rápida de brilho, não uma razão de contraste WCAG: ela mantém o rótulo legível, mas não diz se o texto sobre essa cor passaria nos limites de acessibilidade.
O que a ferramenta guarda, e para onde ir a seguir
Nada é guardado e nada sai do seu navegador; o modo e o tom vivem só na página, e um recarregamento reinicia a ferramenta no modo complementar no tom 210. Quando você tiver uma paleta de que goste, coloque-a para trabalhar: use o Conversor de Cores para transformar os valores hex em rgb() ou hsl() na sua folha de estilos, passe as combinações de primeiro plano e fundo pelo Verificador de Contraste de Cor WCAG antes de as fixar em texto, e entregue o conjunto ao Gerador de Gradiente CSS se quiser esticá-lo em um banner. Para o método completo por trás dessas verificações, o guia do verificador de contraste percorre os quatro limites passo a passo.