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.

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

Conversor de Binário para ASCII

Cole binário (bytes separados por espaço ou um longo fluxo de bits) e obtenha o texto ASCII que ele representa. Lida com codificações de 7 bits e 8 bits.

Gerador de Paletas de Cores

Gere paletas monocromáticas, análogas, complementares, triádicas ou tetrádicas a partir de uma cor base HEX e exporte variáveis CSS prontas para copiar.

Simplificador de Álgebra Booleana

Simplifique expressões booleanas usando mapas de Karnaugh e o algoritmo de Quine-McCluskey. Mostra cada passo de minimização e uma forma final SOP/POS.

Conversor de BBCode para HTML

Converta BBCode (marcação de fórum) para HTML limpo. Lida com tags de formatação, listas, citações, código, imagens, links e tabelas.

Conversor de ASCII para Hex

Converta texto ASCII em valores de byte hexadecimal. A saída usa dois dígitos hexadecimais por caractere, prontos para dumps de memória, rastreamentos de pacotes ou tabelas de firmware.

Binário para Decimal

Converta números binários para decimal instantaneamente. Mostra a expansão posicional para que você possa ver como cada bit contribui.