Gere uma cor complementar a partir de um valor hex ou RGB

Você pode usá-lo para criar uma relação forte entre duas cores em interfaces, ilustrações, gráficos, estudos de marca ou tokens de design. O cálculo é determinístico: a mesma entrada válida sempre produz o mesmo resultado, enquanto formatos incorretos são recusados com um erro claro.

Informe uma cor base precisa

Comece com a cor que você já conhece. O gerador aceita hex de três dígitos, como #369, hex de seis dígitos, como #336699, os mesmos seis dígitos sem cerquilha ou uma função RGB, como rgb(51, 102, 153). Letras hex não diferenciam maiúsculas e minúsculas, e o retorno é normalizado em hex de seis dígitos maiúsculos. Os canais RGB devem ser números inteiros de zero a 255. Formatos ambíguos, incluindo nomes CSS, canais alfa, porcentagens, sequências hex incompletas e canais fora do intervalo, são recusados em vez de interpretados. Envie o valor no campo color; o alias value também é aceito. A resposta repete a cor base normalizada para que você confirme exatamente o que o serviço interpretou antes de usar o resultado gerado.

Entenda a rotação de matiz de 180 graus

O cálculo converte a cor base de RGB para o modelo HSL, soma 180 graus à matiz, faz o resultado voltar ao círculo de 360 graus e converte novamente para RGB. A saturação e a luminosidade são preservadas. Trata-se de um complemento no círculo cromático, e não de uma simples inversão de cada canal RGB. Vermelho segue para ciano, verde para magenta e azul para amarelo. O arredondamento só ocorre no retorno aos canais RGB inteiros. Cinzas neutros têm saturação zero e não possuem matiz visível; portanto, a rotação não altera sua aparência. A resposta inclui hex e canais vermelho, verde e azul separados para a base e para o complemento. Essa estrutura atende tanto ao uso visual quanto a pipelines programáticos sem exigir que você analise uma string formatada.

Use o resultado como relação inicial

Cores complementares criam separação forte, mas o par bruto é um ponto de partida, não uma garantia de acessibilidade ou boa composição. Complementos totalmente saturados em quantidades iguais podem causar vibração visual; por isso, muitas interfaces usam uma matiz como superfície dominante e reservam o complemento para um pequeno destaque, marcador de estado, série de dados ou chamada para ação. Você também pode criar tons claros e escuros a partir das duas cores. Em textos e controles, confira o contraste com o fundo real, pois posições opostas não garantem luminância equivalente. A saída determinística ajuda quando um processo de build precisa derivar sempre o mesmo destaque de uma cor de marca. Ela também funciona em protótipos, gráficos, temas e pipelines de ativos. As chamadas de API usam o preço-base publicado de US$ 0,002, enquanto o navegador executa localmente o mesmo cálculo puro.