Ferramenta online de ajuste HSL de imagem

Funcionalidades e exemplo prático

Esta ferramenta aplica três operações globais à imagem: rotação de matiz (hue-rotate), saturação e brilho (brightness). A ordem de aplicação é fixa: primeiro matiz, depois saturação e por fim brilho. Os valores são limitados aos intervalos: matiz -360 a 360 graus, saturação 0 a 200% e brilho 0 a 200%. Valores em branco ou não numéricos são substituídos pelos neutros (0, 100, 100).

Exemplo concreto

Se definir matiz = 45, saturação = 150 e brilho = 80, o filtro aplicado será hue-rotate(45deg) saturate(150%) brightness(80%). Se introduzir matiz = 500, saturação = -20 e brilho = 250, os valores são limitados para 360, 0 e 200, respetivamente.

Limitações

• O processamento é local no navegador; não há envio de imagens para servidores.
• Não existe pré-visualização automática em tempo real; é necessário clicar em Gerar imagem.
• A saturação 0 produz uma imagem a preto e branco; o brilho 0 produz uma imagem preta, mantendo a geometria.
• Não há curvas de canal, histograma, máscaras ou balanceamento de branco automático.
• O tamanho da imagem de saída é o mesmo da original; a exportação é sempre em PNG.

Perguntas frequentes

O que acontece se eu definir saturação para 0%?

A imagem fica a preto e branco (grayscale), pois a saturação zero remove a cor.

Posso ajustar apenas o brilho sem afetar a saturação?

Sim, mantenha a saturação em 100% e o matiz em 0, e altere apenas o valor de brilho.

O resultado é igual ao ajuste de luminosidade (lightness) do HSL?

Não. A operação de brilho aqui é o filtro CSS brightness(), que multiplica os valores RGB, não a luminosidade perceptual do modelo HSL.