Fonte sem ajuste
1200 × 800 px · PNG
Fixture sintética criada pelo projeto, usada sem correções globais, recorte ou redimensionamento.
Baixar fonte( Experimento próprio reproduzível )
Veja o que o HSL realmente altera
A mesma imagem foi aberta três vezes no editor. Em cada exportação, mudamos somente uma faixa HSL e mantivemos todos os ajustes globais em zero.
Comparações observadas
A fonte própria tem 1200×800 px. As porcentagens indicam quantos pixels tiveram ao menos um canal RGB alterado; não representam percentual de qualidade.
Faixa azul
A saturação maior e a luminosidade menor intensificaram grande parte do gradiente frio e também afetaram cores próximas.
- Parâmetros
- H 0 · S +45 · L -15
- Pixels RGB alterados
- 98,49%
- Diferença RGB média
- 37,809 / 255
Faixa roxa
O deslocamento de matiz e a saturação mudaram o céu violeta e as montanhas, mostrando que áreas diferentes na mesma faixa respondem juntas.
- Parâmetros
- H +35 · S +30 · L 0
- Pixels RGB alterados
- 63,533%
- Diferença RGB média
- 11,796 / 255
Faixa amarela
A alteração ficou concentrada principalmente no sol. Nesta imagem, poucos pixels pertencem à faixa amarela.
- Parâmetros
- H -25 · S +35 · L +15
- Pixels RGB alterados
- 1,51%
- Diferença RGB média
- 0,287 / 255
Matiz
Desloca a cor dos pixels alcançados pela faixa; não escolhe um objeto.
Saturação
Aumenta ou reduz a intensidade das cores naquela faixa.
Luminosidade
Clareia ou escurece os pixels influenciados pela faixa.
Como o teste foi feito, e o que ele não mostra
Referência conceitual: CSS Color Module Level 4, seção HSL (W3C). Os resultados numéricos desta página vêm do experimento próprio, não da especificação.
npm run dev -- --port 3218
npm run guide:hslContinue explorando HSL
A geometria do espaço HSL e seus limites práticos
O modelo de cores HSL traduz as coordenadas cartesianas RGB (Vermelho, Verde, Azul) em uma geometria cilíndrica definida por Matiz (Hue), Saturação (Saturation) e Luminosidade (Lightness). O matiz representa o ângulo em um círculo de 360 graus (0° Vermelho, 60° Amarelo, 120° Verde, 180° Ciano/Aqua, 240° Azul, 300° Magenta). A saturação mede a pureza radial de 0% (cinza neutro) a 100% (pigmento pleno). A luminosidade mede a claridade vertical de 0% (preto total) a 100% (branco puro), com os tons balanceados a 50%.
No PhotoEditor.sbs, o ajuste seletivo de cores oferece controles para oito faixas distintas: Vermelho, Laranja, Amarelo, Verde, Aqua, Azul, Roxo e Magenta. Em vez de aplicar cortes abruptos que provocam posterização ou quebras visíveis em gradientes, o editor utiliza curvas de atenuação suave (falloff) centralizadas em cada faixa angular. Pixels nas bordas da faixa recebem correções proporcionais menores, preservando a suavidade de céus e tecidos.
Uma grande vantagem prática da edição seletiva por HSL é separar os tons de pele do restante da cena. Tons de pele em diferentes etnias concentram-se no setor angular do laranja e amarelo quente (aproximadamente entre 15° e 45°). Ao ajustar especificamente a faixa azul (200° a 260°) ou verde (90° a 150°), é possível intensificar céus ou folhagens sem desfigurar o tom natural da pele em fotos de pessoas.
Perguntas sobre este guia
- Por que só três faixas de cor nos exemplos?
- Porque o objetivo era isolar o efeito. Alterar azul, roxo e amarelo separadamente, com os ajustes globais em zero, mostra o que cada faixa faz sem a interferência de outras mudanças. Alterar as oito de uma vez daria uma imagem bonita e nenhuma evidência.
- Posso reproduzir estes números?
- Pode. A fonte é um arquivo do próprio projeto, as saídas estão disponíveis para download e os dois comandos que geram tudo estão no fim da página. A diferença de RGB é calculada pixel a pixel contra a fonte.
- A diferença de RGB diz se ficou bom?
- Não. Ela diz o quanto a imagem mudou, não se a mudança foi acertada. Uma correção discreta e bem-feita produz um número baixo; um exagero também pode produzir um número baixo se afetar poucos pixels.
- Em que faixas HSL diferem de máscaras de objeto?
- Faixas de cor filtram propriedades cromáticas na imagem inteira, não contornos espaciais de objetos. Se um carro azul e uma jaqueta azul compartilharem o mesmo matiz e saturação, o ajuste na faixa azul afetará ambos simultaneamente.
- Como o editor calcula o HSL de forma rápida no navegador?
- Os cálculos ocorrem em um Web Worker isolado com aritmética inteira otimizada e iteração direta em buffers de pixel. As coordenadas RGB são convertidas para cilíndricas, multiplicadas pelas curvas dos controles e convertidas de volta para RGB sem travar a thread de interface.
Conheça o Hub Temático de Cor e Luz
Acesse nosso conjunto completo de ferramentas para curvas de tom, P&B seletivo e calibração de luz.