Softonic

Encontrador de Cores Complementares

Etapa 1 / 3

Informe uma cor base

Aceita #RGB, #RRGGBB, rgb() com inteiros e hsl() com porcentagens. O cálculo fica no navegador; a cor entra na URL enviada em cada solicitação de página.

Próximo

As cores complementares ocupam posições opostas em um círculo cromático digital. Informe um valor HEX, RGB ou HSL estrito para calcular o complemento HSL, os complementos divididos, as cores tetrádicas e as relações exatas de contraste WCAG. Todo o cálculo ocorre localmente no navegador.

Como o complemento é calculado

  1. 1

    Insira qualquer cor

    Use #RGB, #RRGGBB, rgb() com inteiros ou hsl() com porcentagens. O valor completo é validado antes do cálculo.

  2. 2

    Gire a matiz em 180°

    Complemento HSL: adicione 180° à matiz, mantenha a saturação e a luminosidade as mesmas.

  3. 3

    Complemento dividido derivado

    Duas cores a 150° e 210° da base, uma alternativa mais suave ao complemento direto quando o contraste é muito alto.

  4. 4

    Dicas de acessibilidade aparecem

    Relação de contraste do par contra branco e preto, além de um aviso se o par provavelmente falhará no WCAG AA quando usado como fg/bg.

Exemplos

Cor base Hex Complemento (HSL) Hex
Vermelho puro #FF0000 Ciano #00FFFF
Coral #FF7F50 Turquesa água #50D0FF
Verde floresta #228B22 Roxo #8B228B
Azul royal #4169E1 Laranja-dourado #E1B941
Lavanda #E6E6FA Amarelo pálido #FAFAE6

Os valores HEX, RGB e HSL exibidos descrevem a mesma cor sRGB. Copie um resultado para usar no CSS ou em outra ferramenta de design.

Complemento HSL vs Complemento RYB

  • HSL (tela): vermelho ↔ ciano, verde ↔ magenta, azul ↔ amarelo. É a geometria do ângulo HSL derivado de sRGB usado no CSS, não uma simulação de mistura de luz.
  • RYB (artista): vermelho ↔ verde, azul ↔ laranja, amarelo ↔ roxo. É uma convenção didática tradicional, não uma previsão da mistura de pigmentos específicos.

Este localizador usa somente o modelo HSL digital. Ele não converte para a roda RYB de tintas, pois o complemento de um pigmento depende do material e da mistura.

Onde os complementos funcionam bem

  • Botões CTA contra fundos de marca. Combine o primário com seu complemento para fazer o botão se destacar.
  • Visualização de dados gráficos de séries duplas (lucro vs perda, antes vs depois).
  • Sombras de ilustração: a sombra de uma abóbora laranja parece mais convincente em azul do que em um laranja mais escuro.
  • Branding esportivo: muitas equipes usam paletas complementares ou de complemento dividido (azul/laranja, vermelho/verde, amarelo/roxo).

Onde eles falham

  • Texto do corpo em fundo: complementos diretos (vermelho em verde, azul em laranja) são desconfortáveis de ler. Alta aberração cromática causa fadiga visual.
  • Uso de superfície total: uma tela que é 50% vermelha e 50% verde é exaustiva. Use o complemento para acentos (5-10% da área da superfície), não como principal.
  • Coerência da marca: complementos parecem ocupados. A maioria das marcas modernas usa monocromático ou análogo + um acento, não complemento duplo.

Complemento dividido

O complemento dividido (base + 150° + 210°) é frequentemente uma escolha prática melhor:

  • Mantém alto contraste com a região do complemento.
  • Evita a vibração do complemento direto.
  • Fornece dois acentos para design em camadas.

Exemplo: base = azul → complemento = laranja (agressivo) → complemento dividido = vermelho-laranja + amarelo-laranja (mais rico).

Desaturando complementos

Complementos puros raramente parecem bons em saturação total. Reduza a saturação em 20-40% em um ou ambos para uma paleta mais calma:

  • Vermelho (S=100%) + Ciano (S=100%) = vibrante.
  • Vermelho (S=60%) + Ciano (S=60%) = paleta clássica de pôster.
  • Tijolo de marca (S=45%) + Teal empoeirado (S=30%) = moderno, utilizável.

Verificação de sanidade antes de usar

  • Relação de contraste do par: o encontrador relata isso. Abaixo de 4.5:1 falha AA para texto.
  • Teste em fundo neutro: complementos parecem diferentes contra branco, cinza, preto.
  • Teste de impressão se esse for o destino, CMYK pode alterar a saturação e as relações de complemento em relação ao RGB.

Perguntas frequentes

Eles organizam o matiz por convenções diferentes. HSL usa um ângulo numérico derivado de sRGB; a roda RYB tradicional distribui as primárias dos artistas em um círculo conceitual. Nenhuma delas prevê o resultado de misturar luzes ou tintas reais.

Sim, são sinônimos na teoria das cores. “Oposto na roda de cores” e “complementar” referem-se à mesma relação.

Raramente. Complementos diretos geralmente falham no contraste WCAG quando usados como fg/bg porque têm luminosidade semelhante. Aumente a diferença de luminosidade (texto escuro em fundo claro) para passar.

Sim, o painel de resultados inclui complemento direto, complemento dividido (duas cores flanqueando) e quadruplo tetrádico. Escolha o que melhor se adequa ao seu objetivo de design.

Ferramentas relacionadas

Gerador de cards CSS

Crie um card com seu título, texto e link opcional. Ajuste cores, borda, espaçamento, sombra e efeito ao passar o mouse. Depois copie ou baixe o HTML e o CSS.

Gerador de textura de ruído

Gere uma textura de ruído em SVG que se repete sem emendas, com opacidade, frequência do grão, tipo de ruído e cor de fundo ajustáveis, e copie o CSS já pronto.

Gerador de Docker Compose

Gere um docker-compose.yml a partir de definições de serviços com imagem, portas e volumes, com padrões de boas práticas.

Conversor de base numérica

Converta números entre binário, octal, decimal, hexadecimal e qualquer base personalizada de 2 a 36, com o detalhamento posicional.

Conversor de Tamanho de Arquivo

Converta entre bytes, KB, MB, GB, TB e as unidades binárias IEC (KiB, MiB, GiB, TiB), combinando decimal e binário como preferir.

Gerador de Imagem Markdown

Gere a sintaxe de imagem do Markdown com texto alternativo, atributo de título e link opcional. Saída inline e em estilo de referência.

Ferramenta disponível em outros idiomas