paleta análoga para SaaS
Interfaces de SaaS vivem de estados de baixa urgência, badges, tags, superfícies e cards, e cor complementar chamaria atenção demais para esses lugares; a saída é a paleta análoga, matizes vizinhas no mesmo lado do círculo, próximas o bastante para parecerem a mesma família de cor.
A cor do meio (#3E8CDA) é a matiz de base sem deslocamento; as outras quatro ficam a 15 ou 30 graus dela, duas para cada lado.
Nenhum desses estados é um erro ou alerta, então nenhuma cor deveria competir com o vermelho ou amarelo reservados para essas mensagens.
A diferença de 15 graus entre repouso e hover é perceptível de perto mas não distrai a leitura da lista de cards.
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.
Sessenta graus no total, de -30 a +30 em relação à matiz de base, com cinco pontos fixos espaçados a cada 15 graus. Essa janela é o consenso clássico de teoria da cor para "análogo": ampla o bastante para variar, estreita o bastante para continuar parecendo uma única família.
Nem uma nem outra: erro pede uma cor semanticamente fixa (normalmente vermelho), fora do sistema de harmonia da marca, para não ser confundida com um estado calmo de baixa urgência. A paleta análoga é para as dezenas de badges neutras que não competem por atenção.
Para manter peso visual igual em todos os tons: só a matiz varia (-30 a +30 graus), então nenhuma badge parece mais saturada ou mais clara que a vizinha por acidente. Se precisar de hierarquia entre estados, mude a matiz para outra cor da roda, não a saturação dentro da mesma família análoga.
Não, e essa é a armadilha mais comum em badges: cinco tons próximos em matiz costumam ter luminosidade parecida entre si, então o mesmo texto branco ou preto pode passar no teste WCAG (4,5:1 para texto normal) numa cor e falhar na vizinha 15 graus ao lado. Confira cada par texto/fundo individualmente.
#3EDA49#3EDA70#3EDA97#3EDABE#3ED0DA#3EDA49, #3EDA70, #3EDA97, #3EDABE, #3ED0DAA paleta é calculada localmente no navegador.