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, por terem matizes vizinhos no círculo cromático. Neste gerador, as duas cores deslocadas usam a saturação e a luminosidade arredondadas da cor base.

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.