Ajuste HSL

O que é o ajuste HSL?

O ajuste HSL é uma ferramenta online para modificar matiz, saturação e luminosidade em tempo real. Você pode começar com um código HEX ou com o seletor visual, mexer em cada controle separadamente e gerar versões mais claras, mais suaves, mais intensas ou mais contrastadas sem perder a família visual da cor original.

Isso ajuda bastante em design web, design systems, branding, interfaces de produto e handoff para frontend. A cor original e o resultado ficam lado a lado, enquanto HSL, HEX, RGB e CSS aparecem prontos para copiar em estilos, tokens, documentação técnica ou revisões visuais.

Quando esta ferramenta faz mais sentido

• Criar variações da cor da marca – Montar tons para botões, fundos leves, alertas, badges e destaques a partir de uma base única
• Definir hover e estado ativo – Ajustar principalmente a luminosidade para manter consistência entre estado normal e interação
• Organizar uma paleta de interface – Corrigir pequenas diferenças entre cartões, gráficos, etiquetas e superfícies secundárias
• Preparar uma checagem de acessibilidade – Testar versões mais claras ou mais escuras antes da validação final de contraste
• Explorar caminhos visuais – Comparar alternativas para uma área principal, um botão importante, ilustrações ou tema escuro
• Entregar cores para frontend – Levar HSL, HEX, RGB e CSS já prontos para implementação e QA visual

Principais recursos

• Controles HSL fáceis de entender – Matiz, saturação e luminosidade ficam separadas para que cada ajuste seja mais previsível.
• Entrada de cor flexível – Você pode começar por HEX, pelo seletor visual ou por uma cor salva anteriormente no navegador.
• Comparação imediata – O painel duplo ajuda a avaliar se a nova versão continua coerente com a marca ou com a interface.
• Saída em vários formatos – HSL, HEX, RGB e CSS aparecem juntos para evitar etapas extras em outras ferramentas.
• Histórico local automático – Os últimos testes ficam gravados no navegador para facilitar revisão, comparação e refinamento.
• Favoritos para referências importantes – Salve cores-chave para reutilizar em diferentes páginas, componentes e entregas.

Como usar o ajuste HSL

1. Escolha a cor de partida – Use o seletor visual ou cole um HEX já definido no mockup, no guia de estilo ou no design system.
2. Ajuste os controles – Mude matiz, saturação e luminosidade até chegar à variação que melhor atende o seu caso.
3. Compare antes e depois – Verifique se a nova versão continua funcionando em interface, identidade visual e legibilidade.
4. Copie ou salve – Copie o formato necessário ou salve a cor nos favoritos se ela for reaparecer em outros contextos.

Como ler matiz, saturação e luminosidade

O modelo HSL torna o trabalho com cor mais intuitivo do que editar apenas canais RGB:

• Matiz (0-360°) – Posição na roda de cores, como vermelho em 0°, verde em 120° e azul em 240°.
• Saturação (0-100%) – Mede o quanto a cor está intensa ou próxima de um cinza neutro.
• Luminosidade (0-100%) – Define a posição entre preto, cor cheia e branco.

Com isso fica mais fácil criar hover states, fundos suaves, bordas, acentos e variações de tema mantendo a mesma base cromática de forma consistente.

Perguntas frequentes