[Dúvida] Qual a diferença na prática entre HSB e HSL quando fazemos uma arte?

Oi, Ana.

A principal diferença na prática entre HSB e HSL está em como a luz e a sombra se comportam quando mudamos a cor de um elemento.

O significado de cada letra

Ambos usam o H (Hue / Matiz) da mesma forma: é a cor pura em um círculo de 0 a 360 graus (vermelho, azul, verde). A saturação S (Saturation) também é parecida: o quanto essa cor é viva ou cinzenta.

A grande mudança está na última letra:

HSB (Hue, Saturation, Brightness)

Também conhecido como HSV (Value).

O B (Brightness / Brilho) funciona adicionando tinta preta.

• Se você colocar o Brilho em 100%, você tem a cor mais pura e vibrante possível.
• Se você diminuir o Brilho para 50%, você está misturando preto à sua cor (ela fica mais escura).
• Para conseguir o branco puro no HSB, você precisa colocar o Brilho em 100% e a Saturação em 0%.

HSL (Hue, Saturation, Lightness)

O L (Lightness / Luminosidade) funciona colocando a cor em uma escala entre o preto total e o branco total, onde o meio do caminho (50%) é a sua cor pura.

• Se você colocar a Luminosidade em 100%, a cor vira branco puro, não importa qual seja a matiz ou a saturação.
• Se colocar em 0%, vira preto puro.
• Para ter a cor viva e no tom correto, ela precisa ficar em 50%.

Escolha o HSB se você trabalha com Ilustração, Pintura Digital ou Identidade Visual

O HSB simula muito bem a forma como misturamos tinta na vida real. É o modelo padrão de softwares como Adobe Photoshop, Illustrator e Figma quando usamos o seletor de cores quadrado.

• Caso de uso: Se você está desenhando um elemento e quer criar a sombra dele, o HSB é ótimo. Você mantém a mesma matiz (H) e apenas diminui o brilho (B) para escurecer a área.

Escolha o HSL se você trabalha com Web Design, UI Design ou Programação (CSS)

O HSL é muito usado no desenvolvimento de interfaces porque a matemática dele facilita a criação de variações claras e escuras de uma mesma cor base.

• Caso de uso: Imagine que você está criando um sistema de design e precisa de uma cor para o botão (cor base) e outra cor para quando o usuário passar o mouse por cima (hover). Com o HSL, basta pegar a cor base (que está em 50% de luminosidade) e aumentar a luminosidade para 60% para criar a versão mais clara, ou diminuir para 40% para a versão mais escura.

Conseguiu clarear um pouco as coisas para os seus projetos?

Conte com o apoio da comunidade Alura na sua jornada. Abraços e bons estudos!