Paleta de cores complementares
Escolha uma cor base: a complementar dela (oposta a 180° no círculo cromático) é calculada automaticamente, com tons claros e escuros das duas cores. Processamento 100% local no seu navegador — nada é enviado a um servidor.
Como funciona
No círculo cromático, a cor complementar é a que fica exatamente no lado oposto da cor base (180° de diferença de matiz). Combinadas, essas duas cores criam um forte contraste visual, muito usado em design para destacar um botão de ação, um logotipo ou um elemento-chave sobre um fundo da cor oposta. Esta ferramenta calcula a complementar exata e depois gera, para cada cor, uma versão mais escura e outra mais clara, resultando direto em uma minipaleta pronta para uso.
Por que usar uma paleta complementar em vez de uma paleta de cores próximas?
Uma paleta de cores próximas (análogas) cria um clima harmonioso e discreto, enquanto uma paleta complementar gera de propósito uma tensão visual e chama a atenção. Ela funciona bem em um botão de chamada para ação, um selo de notificação ou qualquer elemento que precise se destacar claramente do restante da interface.
Como usar os tons claros e escuros gerados?
Os tons escuros funcionam bem para textos e para os estados "hover" e "ativo", enquanto os tons claros são úteis para fundos de seção, estados desabilitados ou selos discretos, sempre na mesma família de cor da cor principal ou da sua complementar.
Todo o cálculo de cores (conversão HEX/HSL, rotação de matiz) é executado localmente em JavaScript, direto no seu navegador.