Guia prático de modelos de cor
HSB vs HSL vs HSV: diferenças e quando usar cada um
Os três nomes compartilham uma roda de matiz, mas nem sempre descrevem as mesmas coordenadas. Este guia mostra o que muda no terceiro canal, por que números iguais geram cores diferentes e como conservar um tom até o código web.
HSB vs HSL vs HSV
HSB, HSV e HSL são iguais?
HSB e HSV normalmente nomeiam o mesmo modelo baseado em RGB: brightness e value são rótulos do terceiro canal. HSL é outra transformação. Ele coloca um matiz puro e saturado em 50% de lightness e chega ao branco em 100%. HSB ou HSV coloca o matiz puro em 100% de brightness e só chega ao branco quando a saturação cai a zero. Mantenha o nome do modelo junto de todo trio percentual.
A resposta curta
- Trate HSB e HSV como equivalentes somente após conferir aplicativo, intervalos, perfil de cor e arredondamento.
- Não cole saturação e brightness HSB diretamente nos campos de saturação e lightness HSL.
- Use HSB ou HSV para ajustes visuais intuitivos; use HSL quando sua estrutura e a notação CSS hsl() servirem à tarefa.
- Salve um HEX ou RGB exato para entrega e teste contraste e diferença perceptual com métodos próprios.
Uma família de cor, três funções diferentes
Os modelos reorganizam cores de tela para decisões distintas. Estes valores de referência mostram a diferença antes de mover números entre ferramentas.
| Modelo | Terceiro canal | Referências úteis | Função comum |
|---|---|---|---|
| HSB / HSV | Brightness / Value | Matiz puro em S 100%, B/V 100%; preto em B/V 0% | Seletores, ferramentas de imagem, ajuste visual de matiz, intensidade e escuridão |
| HSL | Lightness | Matiz puro em S 100%, L 50%; preto em L 0%; branco em L 100% | Valores CSS hsl() e variações claras ou escuras em torno de um meio |
| HEX / RGB | Canais vermelho, verde e azul | Um trio explícito de canais sRGB depois da conversão | Entrega web estável, tokens de design e registros de implementação |
Por que os nomes parecem mais intercambiáveis do que são
HSB, HSV e HSL começam com o matiz, normalmente representado como ângulo em uma roda de cores. Os três também incluem um canal chamado saturação. Esse vocabulário compartilhado faz as coordenadas parecerem compatíveis. Na prática, cada modelo reorganiza coordenadas RGB de tela e não mede luz física de forma independente. O trabalho original sobre as transformações HSV e HSL descreveu duas geometrias diferentes para tornar um cubo RGB mais fácil de navegar. Ter rótulos iguais não torna cálculos, pontos de referência ou coordenadas finais intercambiáveis.
A leitura mais segura é operacional. Um modelo informa à ferramenta como transformar três controles em saída vermelha, verde e azul. Se dois aplicativos aplicarem a mesma conversão e arredondamento, o RGB ou HEX final pode coincidir mesmo quando um escreve HSB e o outro HSV. Assim que um campo usa HSL, os cálculos de saturação e do terceiro canal mudam. Copiar 210°, 70%, 80% entre os modelos pode alterar a amostra embora todos os números visíveis permaneçam iguais. Por isso, nome do modelo e resultado convertido devem viajar juntos.
Como HSB e HSV descrevem brightness ou value
No modelo HSV comum, value é o maior dos canais vermelho, verde e azul normalizados. HSB costuma chamar o mesmo controle pelo termo mais familiar brightness. Com saturação e brightness máximos, o matiz escolhido atinge sua cor de borda RGB mais intensa. Reduzir brightness leva o resultado ao preto. Reduzir a saturação leva a uma cor neutra enquanto mantém o teto de brightness. Com saturação zero e brightness máximo, o resultado é branco, não uma cor viva. Os três canais trabalham juntos para definir uma única cor de tela.
Essa organização funciona bem em um seletor bidimensional: escolha o matiz em uma faixa, mova na horizontal para saturação e na vertical para brightness. O Color Picker atual da Adobe documenta essa interação HSB com matiz de 0–360° e porcentagens de saturação e brightness. Ela é intuitiva para edição, mas brightness não significa luminância medida nem garante a mesma claridade percebida. Um amarelo e um azul podem mostrar B 100% e ter luminâncias relativas muito diferentes. O canal é um controle de edição, não uma aprovação perceptual ou de acessibilidade.
Como HSL muda o ponto médio e os dois extremos
HSL mantém a roda de matiz, mas define um eixo lightness com preto em 0%, branco em 100% e o matiz puro totalmente saturado em 50%. Acima do meio, a cor avança para o branco; abaixo, para o preto. Essa simetria ajuda a raciocinar sobre tons claros e sombras em torno de uma base. Ela também explica por que brightness HSB 100% não pode virar lightness HSL 100%: o primeiro valor pode ser um vermelho ou azul vivo, enquanto o segundo é sempre branco, qualquer que seja o matiz ou a saturação.
A saturação também muda de significado nessa geometria. Em HSL, uma cor muito próxima do branco ou preto tem pouco croma disponível, mesmo se o campo de saturação mostrar 100%. Em HSV, a saturação é calculada em relação a value. A especificação CSS Color do W3C define hsl() como forma de produzir cores sRGB e publica a conversão seguida pelos navegadores. Ela não define uma função CSS padrão hsv() ou hsb(). Portanto, um tom escolhido em HSB precisa ser convertido para HEX, RGB, HSL ou outra notação CSS aceita e depois conferido no navegador.
Como entregar uma cor do seletor ao código sem ambiguidade
Primeiro registre o modelo, aplicativo, perfil de cor ou premissa web e o trio exato. Depois salve o HEX de seis dígitos ou RGB resultante. Esse valor final de canais é a entrega mais segura, pois impede outra ferramenta de interpretar silenciosamente porcentagens HSB como HSL. Se o autor CSS preferir hsl(), deve converter a partir do RGB aprovado e conferir o resultado do navegador, não copiar campos por posição. Preserve precisão suficiente para reproduzir o tom sem sugerir que casas decimais extras corrigem uma tela sem calibração ou uma imagem comprimida.
Por fim, nomeie a decisão que cada valor pode sustentar. HSB ou HSL explica uma direção de edição. HEX ou RGB preserva um token digital. Delta E resume a diferença de um par sob uma fórmula declarada. Contraste WCAG usa luminância relativa e critérios definidos para primeiro plano e fundo. Nenhuma saída substitui automaticamente as outras. Um registro confiável inclui fonte, modelo, valor convertido, contexto visível, método de avaliação, responsável pela regra final e próxima ação esperada. Assim, não apenas o número, mas também o limite de sua interpretação permanece reproduzível.
Fluxo de cor seguro em cinco etapas
Use esta sequência quando uma cor sair de um seletor, captura ou arquivo de design para o código ou uma paleta compartilhada.
1. Nomeie o modelo
Escreva HSB, HSV, HSL, RGB ou o modelo exato junto aos valores, em vez de compartilhar um trio sem rótulo.
2. Preserve a fonte
Guarde o token aprovado ou arquivo original e anote se a cor foi amostrada, convertida ou criada visualmente.
3. Salve RGB ou HEX
Capture a saída convertida para outro aplicativo reproduzir os mesmos canais sRGB sem adivinhar o modelo.
4. Verifique no contexto
Veja a cor no tamanho, tema, vizinhança, estado e tela de destino reais antes de aprovar.
5. Faça o teste certo
Use contraste, Delta E, medição de impressão ou a regra do projeto; um canal do seletor não é prova.
Smith · W3C · Adobe
Fontes primárias e definições de plataforma
As referências documentam as transformações originais, o seletor HSB atual, a sintaxe HSL dos navegadores e a regra separada de contraste.
Compare os modelos e teste a cor real
Perguntas sobre HSB, HSV e HSL
HSB e HSV são sempre idênticos?
Geralmente nomeiam o mesmo modelo, com brightness e value como rótulos alternativos. Confira documentação, intervalos, perfil e arredondamento antes da transferência exata.
Por que HSB B 100% não equivale a HSL L 100%?
HSB pode mostrar um matiz puro e saturado com B 100%. HSL reserva L 100% para branco e coloca o matiz puro em L 50%.
CSS pode usar HSB ou HSV diretamente?
CSS Color define hsl(), mas não uma função padrão hsb() ou hsv(). Converta o tom para HEX, RGB, HSL ou outro formato CSS aceito.
Qual modelo é melhor para um seletor de cor?
HSB ou HSV é comum para faixa de matiz e campo de saturação-brightness. HSL pode ser mais legível em variações CSS. Escolha pela tarefa e salve uma saída exata.
Lightness igual em HSB ou HSL garante contraste igual?
Não. Nenhum canal é uma relação de contraste WCAG. Avalie o primeiro plano e fundo reais com o método exigido de luminância relativa.