Gerador de cores complementares

Ele retorna duas cores como códigos hexadecimais de seis dígitos em letras minúsculas. A cor 1 é sua cor-base, e a cor 2 é sua complementar, diretamente oposta a ela na roda de cores.

A ferramenta converte seu código hexadecimal para HSL, adiciona 180 graus ao matiz e mantém a saturação e a luminosidade inalteradas. O valor girado é convertido novamente para RGB e escrito como código hexadecimal, de modo que a cor complementar tenha a mesma vivacidade e brilho da cor-base.

Insira um código hexadecimal de 3 ou 6 dígitos, com ou sem o # inicial, em letras maiúsculas ou minúsculas, como #ff5733, FF5733 ou #f00. As notações RGB e HSL e nomes de cores não são aceitos aqui; primeiro, converta-os para hexadecimal com um conversor de cores.

A cor-base é convertida para HSL com valores inteiros de matiz, saturação e luminosidade e, em seguida, de volta para hexadecimal; por isso, um canal pode variar uma unidade. Por exemplo, #ff5733 retorna como #ff5833, e sua complementar é #33daff.

A cor complementar de #ff0000 é #00ffff, ciano. Esta ferramenta usa a roda HSL baseada em RGB, usada em telas, então o vermelho combina com ciano, e não com verde, como na roda tradicional dos pintores.

As cores neutras têm saturação zero, então girar o matiz não altera nada e os dois resultados são o mesmo tom de cinza. Escolha uma cor-base com alguma saturação se precisar de um complemento visível.

Use uma cor na maior parte da superfície e a complementar com moderação em chamadas para ação, realces ou dados que você queira destacar. Quantidades iguais de ambas, com saturação máxima, tendem a vibrar visualmente; por isso, aplique um tom mais claro ou mais escuro a uma delas em áreas grandes.

Não, ela apenas calcula o par de cores. A cor complementar mantém a luminosidade da cor-base, então as duas podem ter luminância semelhante e pouco contraste para o texto; verifique o par com um verificador de contraste WCAG antes de usar uma sobre a outra.

Não, cada execução aceita exatamente um código hexadecimal. Entradas com várias linhas ou texto extra são rejeitadas com uma mensagem de erro; portanto, execute a ferramenta uma vez para cada cor-base.

Sim. Esta ferramenta executa o mesmo cálculo que a opção Complementar do Gerador de paletas de cores, então a mesma cor-base sempre produz os mesmos dois códigos hexadecimais nas duas ferramentas.