Fonte sem ajuste
1200 × 800 px · PNG
Fixture sintética criada pelo projeto, usada sem correções globais, recorte ou redimensionamento.
Baixar fonteExperimento 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
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.