Ferramenta online de esquema de cores análogas

O que faz esta ferramenta?

Esta ferramenta gera um esquema de cores análogas a partir de uma cor base. As cores análogas são frequentemente utilizadas em design para criar harmonia visual, pois partilham o mesmo nível de saturação e luminosidade, variando apenas o matiz.

Exemplo prático

Se escolher a cor base #3B82F6 (um azul) e definir um intervalo de 30 graus, a ferramenta converte internamente a cor para HSL (aproximadamente HSL(217, 91%, 60%)) e gera as seguintes cores:

• Cor análoga à esquerda: #3CE0F6 (matiz 217 - 30 = 187 graus)
• Cor base original: #3B82F6 (mantém-se exatamente igual)
• Cor análoga à direita: #523CF6 (matiz 217 + 30 = 247 graus)

Se aumentar o intervalo para 90 graus, as cores resultantes são #3CF652, #3B82F6 e #F63CE0.

Parâmetros e processamento

A ferramenta converte a cor RGB para HSL, arredonda os valores para inteiros e preserva a saturação e luminosidade arredondadas para as duas cores deslocadas. O matiz é deslocado para a esquerda (subtraindo o intervalo) e para a direita (adicionando o intervalo), com rotação de 360 graus quando necessário. A cor central é mantida sem conversão, garantindo que o valor HEX permanece idêntico ao da cor base selecionada.

Limitações

Esta ferramenta não calcula contraste de acessibilidade, não simula daltonismo, não avisa sobre gamas de cor fora do espaço sRGB e não oferece exportação de ficheiros. A distância de matiz análoga não garante texto legível ou contraste adequado; deve verificar separadamente os pares de primeiro plano/fundo em relação aos critérios de acessibilidade relevantes.

Perguntas frequentes

Como editar uma das cores geradas?

Depois de gerar o esquema, cada cor (incluindo a base) tem um painel avançado onde pode alterar os valores HEX, RGB, HSV ou HSL. Editar uma cor altera apenas essa cor no resultado apresentado; as outras duas não são recalculadas automaticamente.

O que acontece se eu escolher um intervalo de 90 graus?

Com um intervalo de 90 graus, as cores análogas ficam mais distantes da cor base. Por exemplo, com a base #3B82F6, obtém #3CF652 (verde) e #F63CE0 (magenta). O intervalo máximo é 90 graus, pelo que não pode ultrapassar esse valor.

Porque é que a cor central permanece exatamente igual à cor base?

A cor central é a própria cor base selecionada. A ferramenta não a converte para HSL e de volta, evitando assim qualquer alteração devida a arredondamentos. As outras duas cores são calculadas a partir da conversão HSL arredondada, pelo que podem apresentar pequenas diferenças em relação a uma conversão direta.

Lista de verificação antes de usar

• Escolha uma cor base adequada ao seu projeto.
• Defina o intervalo de matiz entre 1 e 90 graus.
• Gere o esquema e verifique as três cores no contexto da sua interface.
• Teste o contraste de texto e fundo separadamente para acessibilidade.
• Copie os valores HEX ou outros formatos conforme necessário.