Gerador de Cores Análogas

Dando contraste às cores vizinhas

Cores análogas ficam próximas e compartilham a saturação e a luminosidade da base, por isso se misturam suavemente e combinam com gradientes, fundos e ilustrações. Essa mesma proximidade significa que elas não conseguem separar o texto do fundo nem indicar o que é clicável. Varie a luminosidade de uma cor para textos e superfícies e adicione um destaque contrastante, por exemplo, o oposto da base no gerador de cores complementares, para botões e realces.

Trinta graus nem sempre representam o mesmo passo

O HSL distribui os matizes de forma desigual para os olhos. Entre vermelho a 0°, laranja a 30° e amarelo a 60°, cada passo de 30° chega a uma cor com um nome diferente, enquanto a faixa de cerca de 90° a 150° é toda formada por verdes; por isso, um conjunto análogo baseado em verde pode parecer quase idêntico. Uma base vermelha também dá a volta no círculo, produzindo um rosa perto de 330° de um lado e laranja do outro.

Como usar

1. Insira valores #RGB ou #RRGGBB válidos e qualquer porcentagem solicitada.
2. Execute a operação de cor fixa localmente no navegador.
3. Revise as amostras e copie o resultado ou os valores da paleta.

Privacidade e limitações

Os valores de cor permanecem neste dispositivo. O resultado de contraste é um verificador matemático, não uma garantia geral de conformidade com as WCAG; contexto, renderização de fonte, contraste de elementos não textuais e estados de interface ainda precisam ser revisados.