paleta complementar para CTA
Um CTA que usa a mesma matiz do resto da interface se perde no fundo visual; a saída é girar 180 graus no círculo de matiz HSL até a cor oposta, o par complementar que o olho humano lê como tensão máxima entre duas cores.
A segunda cor da lista (#DA3E65) é a complementar pura a 180 graus; as demais são vizinhas a 150, 210 e 30 graus para estados de interface.
Trocar só o baseHue e manter S e L fixos garante que toda a paleta tenha o mesmo peso visual, mudando apenas a matiz.
Esse cálculo é independente da roda de cores: mesmo par complementar com fundo mais claro poderia reprovar o mesmo teste.
Matiz é a posição angular da cor no círculo, geralmente de 0 a 359 graus em HSL. É o que define se a cor é "vermelha", "azul" etc., independentemente da saturação e da luminosidade.
Só se a luminosidade dela destoar o suficiente do fundo ao redor. A relação de 180 graus garante contraste de matiz, a diferença perceptível entre tonalidades, mas duas cores complementares podem ter luminosidade parecida e ainda assim se misturarem visualmente num fundo neutro; ajuste a luminosidade (L) do CTA para além do que a matiz sozinha oferece.
Porque um botão real precisa de mais de um estado visual: cor de repouso, hover, foco e talvez um badge de destaque. As três cores extras ficam a 150, 210 e 30 graus da base, próximas o bastante da complementar pura para manter a mesma família cromática sem repetir o HEX exato em cada estado.
Sim. Harmonia de matiz mede a distância no círculo de 360 graus, contraste de leitura mede razão de luminância entre texto e fundo. São eixos matemáticos diferentes: a WCAG 2.1 pede 4,5:1 para texto normal e só aceita 3:1 a partir de texto grande (24px regular ou cerca de 18,66px em negrito), e nenhum desses números vem do ângulo de matiz.
Reserve a complementar pura (180 graus) para o estado de repouso, o mais visto, e use as vizinhas de 150 e 210 graus para hover e foco: a diferença de 30 graus entre elas é perceptível o bastante para sinalizar mudança de estado sem parecer uma cor de marca diferente.
#3EDA49#3EDA70#3EDA97#3EDABE#3ED0DA#3EDA49, #3EDA70, #3EDA97, #3EDABE, #3ED0DAA paleta é calculada localmente no navegador.