Buscador de cor complementar
Encontre em um passo a cor oposta à sua no círculo cromático: o vermelho puro #FF0000 gera o ciano #00FFFF, com a mesma saturação e luminosidade, em hexadecimal, RGB e HSL. Prático para criar destaques a partir da cor de uma marca. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Exemplo resolvido
- Cor de origem como hex
- #FF0000
- Hexadecimal
- #00FFFF
- Dígitos hex
- 00FFFF
- Resistência (Ω)
- 0
- G
- 255
Designers, desenvolvedores front-end e equipes de marca costumam precisar da cor que fica exatamente oposta a uma amostra na roda de matizes—pares para botões e fundos, tokens de destaque a partir de um primário da marca, ou demos didáticas da teoria clássica das cores. Este buscador de cor complementar aceita um código hex como #FF0000 ou a forma curta #f00, uma string rgb(r,g,b) ou canais vermelho, verde e azul separados de zero a duzentos e cinquenta e cinco; converte a origem em matiz, saturação e luminosidade, gira a matiz em exatamente cento e oitenta graus mantendo saturação e luminosidade fixas, e devolve a cor complementar como hex, canais RGB, componentes HSL e strings CSS prontas para colar.
Como informar uma cor e como a matiz oposta é calculada
A entrada hex aceita três ou seis dígitos hexadecimais com ou sem cerquilha inicial, então #FF0000 e FF0000 funcionam, assim como as formas curtas #f00 e f00. Maiúsculas e minúsculas são ignoradas. Você também pode enviar uma string rgb(...) ou rgba(...), ou um triplo separado por vírgulas como 255,0,0; quando há alfa, ele é ignorado no cálculo do complemento.
Depois que o motor resolve a origem em canais sRGB inteiros, converte para HSL pelo mesmo caminho max-min-croma usado em CSS e pilhas gráficas: a luminosidade é metade da soma dos canais normalizados máximo e mínimo, a saturação é zero para cinzas e, caso contrário, o croma escalado pela fórmula HSL padrão, e a matiz é o ângulo de setor em graus de zero até trezentos e sessenta.
O complemento se forma somando cento e oitenta graus à matiz módulo trezentos e sessenta, deixando saturação e luminosidade inalteradas, e convertendo esse triplo HSL de volta a inteiros RGB e a um código hex de seis dígitos em maiúsculas.
Lendo original, complemento e campos de conveniência de topo
Em sucesso a resposta inclui um objeto original descrevendo a cor de origem analisada e um objeto complement descrevendo a cor oposta. O campo source registra se a análise usou hex, string rgb ou canais separados. O vermelho puro #FF0000 gera ciano #00FFFF; o verde puro complementa em direção ao magenta; o azul puro complementa em direção ao amarelo.
Cinzas acromáticos mantêm o mesmo RGB após a rotação porque a saturação é zero—só o ângulo de matiz relatado avança cento e oitenta graus.
Casos de uso
Destaques de marca a partir de um hex primário
Transforme um primário da marca em um destaque oposto confiável para botões, gráficos e blocos de marketing sem escolher amostras à mão toda vez.
Perguntas frequentes
Como encontro a cor complementar de um código hex?
A resposta inclui complement.hex (e hex de topo) mais RGB e HSL da matiz oposta.
Posso enviar canais RGB em vez de hex?
Sim. Forneça r, g e b cada um entre 0 e 255, ou uma string como rgb(255,0,0). Os três canais são obrigatórios na entrada por canais.
O que acontece se o valor de cor for inválido?
Hex malformado, comprimento errado, caracteres não hex, campos ausentes e canais fora de 0–255 são rejeitados e não cobrados.
O buscador de cor complementar é grátis?
A ferramenta do navegador roda grátis no seu dispositivo.
Qual é a cor complementar do cinza?
O cinza não tem saturação, então a complementar mantém exatamente os mesmos valores RGB. Só o ângulo de matiz informado avança 180 graus; o que aparece na tela não muda.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/color/complementary \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"color":"#FF0000","hex":"valor-ejemplo"}'const res = await fetch("https://api.kit.forhosting.com/color/complementary", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"color": "#FF0000",
"hex": "valor-ejemplo"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/complementary",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"color": "#FF0000",
"hex": "valor-ejemplo"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/complementary", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"color":"#FF0000","hex":"valor-ejemplo"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"color":"#FF0000","hex":"valor-ejemplo"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/complementary", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"color": "#FF0000",
"hex": "valor-ejemplo"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.complementary",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
Valores de cor inválidos—hex malformado, canais fora da faixa ou campo ausente—falham com um erro claro de invalid_input para que dados ruins nunca sejam limitados em silêncio.
Como informar uma cor e como a matiz oposta é calculada
Forneça um campo string chamado color (aliases hex, value, colour e input) ou os três canais numéricos r, g e b (aliases red, green e blue). A entrada por canais exige os três componentes no intervalo inclusivo de zero a duzentos e cinquenta e cinco; os números podem chegar como números JSON ou strings numéricas. Entradas idênticas sempre produzem JSON idêntico porque o caminho é aritmética pura, sem rede, sem semente aleatória e sem relógio de parede.
Lendo original, complemento e campos de conveniência de topo
Cada pacote traz hex com cerquilha e seis dígitos maiúsculos, hex_digits sem a cerquilha, canais r, g e b, h, s e l para matiz em graus e saturação e luminosidade em por cento, os nomes longos hue, saturation e lightness, um objeto hsl aninhado e uma string rgb_css como rgb(0, 255, 255). Para encadear com rapidez, os mesmos valores do complemento se repetem no nível superior como hex, r, g, b, h, s, l, hsl e rgb_css para que código de UI e avaliadores leiam um formato plano sem aninhamento. O campo hue_rotation_deg é sempre cento e oitenta, e method é sempre hue_rotate_180 para que roteadores ramifiquem sem cheirar formatos. Dados de cor ausentes, lixo não hex, comprimento hex errado e canais fora de zero a duzentos e cinquenta e cinco falham com invalid_input e não são cobrados após a rejeição do motor.
Uso da API, preços, fluxos de design e limites práticos
Chame o buscador de cor complementar gratuito no navegador para checagens de paleta, demos de aula e experimentos de destaque de marca sem instalar biblioteca de cor. Combine complementos com verificadores de contraste ao montar temas acessíveis, ou alimente destaques opostos em pipelines de tokens que mantêm a luminosidade fixa ao inverter primários da marca. Autores de SDKs podem mapear hex e RGB de topo diretamente em controles de formulário ou propriedades customizadas CSS sem reimplementar análise de cor e rotação HSL em cada linguagem. Envie um corpo JSON com color definido como string hex ou rgb, ou r, g e b como valores de canal. Use a API pré-paga quando um design system, gerador de temas, ferramenta de variantes de e-commerce ou pipeline de acessibilidade precisar de contrato estável sob saldo KIT a US$ 0,002 por item bem-sucedido; falhas de validação nunca consomem saldo após a rejeição do motor. Prefira este endpoint quando a intenção de busca for especificamente cor complementar ou oposta na roda de matizes; para só hex para HSL use o conversor dedicado, para RGB para HSL o conversor RGB para HSL, e para conversão multiformato entre HEX, RGB, HSL, LAB e CMYK o conversor de cor mais amplo do catálogo.
Casos de integração
Temas e pipelines de tokens de design
Automação que armazena cores como hex ou RGB deriva tokens complementares com JSON determinístico para variantes de tema claro e escuro.
Ensino de teoria das cores e avaliação
Cursos e avaliações de código checam respostas complementares dos alunos contra fixtures estáveis, com invalid_input quando o valor de cor está malformado.
Perguntas técnicas
Como o complemento é calculado?
O motor converte a cor para HSL, soma 180 graus à matiz (módulo 360), mantém saturação e luminosidade e reconverte para RGB e hex. method é sempre hue_rotate_180.