Pesquisa · Mapa mental

HSL e HSV

HSL e HSV são as duas representações em coordenadas cilíndricas mais comuns de pontos em um modelo de cores RGB. As duas representações reorganizam a geometria do RGB na tentativa de serem mais intuitivas e mais relevantes do ponto de vista da percepção de cores do que a representação cartesiana (cúbica). Desenvolvidos na década de 1970 para aplicações de computação gráfica, HSL e HSV são usados atualmente em seletores de cores, programas de edição de imagem e, com menor frequência, em análise de imagem e visão computacional.

Fonte: Wikipédia (pt)Atualizado em 03/11/2026
01

Princípio básico

HSL e HSV são, ambos, geometrias cilíndricas (fig. 2), nas quais o matiz, sua dimensão angular, começa na primária vermelha a 0°, passa pela primária verde a 120° e pela primária azul a 240° e, então, retorna ao vermelho a 360°. Em cada geometria, o eixo vertical central compreende as cores neutras, acromáticas ou cinzentas, variando, de cima para baixo, do branco com luminosidade 1 (valor 1) ao preto com luminosidade 0 (valor 0). Em ambas as geometrias, as cores primárias aditivas e as cores secundárias — vermelho, amarelo, verde, ciano, azul e magenta —, bem como as misturas lineares entre pares adjacentes dessas cores, às vezes chamadas de cores puras, são dispostas ao redor da borda externa do cilindro com saturação 1. Essas cores saturadas têm luminosidade 0,5 no HSL, enquanto no HSV têm valor 1. Misturar essas cores puras com preto — produzindo as chamadas cores escurecidas (shades) — mantém a saturação inalterada. No HSL, a saturação também permanece inalterada ao se adicionar branco, e apenas misturas com preto e branco — chamadas tons — apresentam saturação inferior a 1. No HSV, a adição apenas de branco reduz a saturação.

02

Motivação

A maioria dos televisores, monitores de computador e projetores produz cores combinando luz vermelha, verde e azul em diferentes intensidades — as chamadas primárias RGB aditivas. As misturas resultantes no espaço de cores RGB podem reproduzir uma ampla variedade de cores (denominada gama); contudo, a relação entre as quantidades constituintes de luz vermelha, verde e azul e a cor resultante é pouco intuitiva, especialmente para usuários inexperientes e para usuários familiarizados com a síntese subtrativa de tintas ou com modelos tradicionais de artistas baseados em cores clareadas e escurecidas (fig. 4). Além disso, nem os modelos aditivos nem os subtrativos definem relações entre cores da mesma maneira que o olho humano.[C] Por exemplo, imagine um monitor RGB cuja cor seja controlada por três controles deslizantes variando de 0–255, um para controlar a intensidade de cada uma das primárias vermelha, verde e azul. Se começarmos com um laranja relativamente colorido , com valores sRGB R = 217, G = 118, B = 33, e quisermos reduzir seu colorido pela metade para obter um laranja menos saturado , seria necessário mover os controles para diminuir R em 31, aumentar G em 14 e aumentar B em 59, como ilustrado abaixo.

03

Derivação formal

Atributos de formação da cor

As dimensões das geometrias HSL e HSV — transformações simples do modelo RGB, que não é baseado na percepção — não se relacionam diretamente com os atributos fotométricos de formação da cor de mesmos nomes, conforme definidos por cientistas e organizações como a CIE ou a ASTM. Ainda assim, vale a pena revisar essas definições antes de passar à derivação de nossos modelos.[D] Para as definições dos atributos de formação da cor apresentadas a seguir, ver: Brilhância e colorido são medidas absolutas, que geralmente descrevem a distribuição espectral da luz que entra no olho, enquanto luminosidade e croma são medidos em relação a algum ponto branco e, portanto, são frequentemente usados para descrever cores de superfícies, permanecendo aproximadamente constantes mesmo quando a brilhância e o colorido mudam sob diferentes condições de iluminação. Saturação pode ser definida como a razão entre colorido e brilhância ou entre croma e luminosidade.

Abordagem geral

HSL, HSV e modelos relacionados podem ser derivados por estratégias geométricas ou entendidos como casos específicos de um «modelo LHS generalizado». Os criadores dos modelos HSL e HSV tomaram um cubo RGB — com as quantidades constituintes de luz vermelha, verde e azul em uma cor denotadas por R, G, B ∈ [0, 1][E] — e o inclinaram sobre um de seus vértices, de modo que o preto ficasse na origem e o branco diretamente acima dele ao longo do eixo vertical; então, mediram o matiz das cores no cubo pelo ângulo em torno desse eixo, começando pelo vermelho a 0°. Em seguida, estabeleceram uma caracterização de brilhância/valor/luminosidade e definiram a saturação de modo que variasse de 0 ao longo do eixo até 1 no ponto mais colorido para cada par dos outros parâmetros. Programas destinados ao usuário final podem usar outra escala. Por exemplo, no Microsoft Paint, o matiz varia de 0 a 239, em vez de 0 a 360 graus, e a saturação e a luminosidade (denominada «Lum») variam de 0 a 240, em vez de 0 a 1.

Matiz e croma

Em cada um de nossos modelos, calculamos tanto o matiz quanto aquilo que este artigo denominará croma, seguindo Joblove e Greenberg (1978), da mesma maneira — isto é, o matiz de uma cor tem os mesmos valores numéricos em todos esses modelos, assim como seu croma. Se tomarmos nosso cubo RGB inclinado e o projetarmos sobre o «plano de cromaticidade» perpendicular ao eixo neutro, nossa projeção assumirá a forma de um hexágono, com vermelho, amarelo, verde, ciano, azul e magenta nos vértices (fig. 9). O matiz é aproximadamente o ângulo do vetor até um ponto da projeção, com o vermelho em 0°, enquanto o croma é aproximadamente a distância do ponto à origem.[F][G]

Luminosidade

Embora a definição de matiz seja relativamente pouco controversa — ela satisfaz aproximadamente o critério de que cores com o mesmo matiz percebido tenham o mesmo matiz numérico —, a definição de uma dimensão de luminosidade ou valor é menos evidente: há várias possibilidades, dependendo da finalidade e dos objetivos da representação. Quatro das mais comuns são apresentadas a seguir (fig. 12; três delas também aparecem na fig. 8): Todas as quatro formulações deixam o eixo neutro inalterado. Isto é, para cores com R = G = B, qualquer uma das quatro formulações produz uma luminosidade igual ao valor de R, G ou B. Para uma comparação gráfica, ver fig. 13 abaixo.

Saturação

Ao codificar cores em um modelo matiz/luminosidade/croma ou matiz/valor/croma (usando as definições das duas seções anteriores), nem todas as combinações de luminosidade (ou valor) e croma são significativas: isto é, metade das cores que podem ser denotadas usando H ∈ [0°, 360°), C ∈ [0, 1] e V ∈ [0, 1] ficam fora da gama RGB (as partes cinzentas das fatias na figura 14). Os criadores desses modelos consideraram isso um problema para alguns usos. Por exemplo, em uma interface de seleção de cores com duas dimensões em um retângulo e a terceira em um controle deslizante, metade desse retângulo é constituída por espaço não utilizado. Agora, imagine que temos um controle deslizante de luminosidade: a intenção do usuário ao ajustá-lo é potencialmente ambígua — como o programa deve lidar com cores fora da gama? Ou, inversamente, se o usuário selecionou um roxo escuro tão colorido quanto possível e, em seguida, move o controle de luminosidade para cima, o que deve ser feito: o usuário preferiria ver um roxo mais claro ainda tão colorido quanto possível para o matiz e a luminosidade dados ou um roxo mais claro com exatamente o mesmo croma da cor original ?

Exemplos

Todos os valores de parâmetros mostrados abaixo são dados como valores no intervalo [0, 1], exceto os de H e H2, que estão no intervalo [0°, 360°).[K]

04

Uso em programas destinados ao usuário final

A finalidade original do HSL, do HSV e de modelos semelhantes, e sua aplicação atual mais comum, está nas ferramentas de seleção de cores. Em sua forma mais simples, alguns desses seletores fornecem três controles deslizantes, um para cada atributo. A maioria, entretanto, mostra uma fatia bidimensional do modelo, juntamente com um controle deslizante que determina qual fatia específica é exibida. Esse último tipo de interface gráfica apresenta grande variedade, devido à escolha entre cilindros, prismas hexagonais ou cones/bicones sugeridos pelos modelos (ver o diagrama próximo ao topo da página). Na década de 1990, ferramentas de seleção de cores HSL e HSV já eram amplamente utilizadas, e a maioria permaneceu praticamente inalterada desde então: hoje, quase todo seletor de cores de computador utiliza HSL ou HSV, pelo menos como uma opção. Algumas variantes mais sofisticadas são projetadas para escolher conjuntos inteiros de cores, baseando suas sugestões de cores compatíveis nas relações HSL ou HSV entre elas.[L]

05

Uso em análise de imagens

HSL, HSV, HSI ou modelos relacionados são frequentemente usados em visão computacional e análise de imagem para detecção de características ou segmentação de imagem. As aplicações dessas ferramentas incluem detecção de objetos, por exemplo em visão robótica; reconhecimento de objetos, por exemplo de rostos, texto ou placas de veículos; recuperação de imagens baseada em conteúdo; e análise de imagens médicas. Na maior parte dos casos, algoritmos de visão computacional usados em imagens coloridas são extensões diretas de algoritmos projetados para imagens em escala de cinza, como k-means ou agrupamento difuso das cores dos pixels, ou detecção de bordas de Canny. No caso mais simples, cada componente de cor é processado separadamente pelo mesmo algoritmo. Portanto, é importante que as características de interesse possam ser distinguidas nas dimensões de cor empregadas. Como os componentes R, G e B da cor de um objeto em uma imagem digital são todos correlacionados com a quantidade de luz que incide sobre o objeto e, portanto, entre si, descrições de imagens em termos desses componentes dificultam a discriminação de objetos. Descrições em termos de matiz/luminosidade/croma ou matiz/luminosidade/saturação costumam ser mais relevantes.

06

Desvantagens

Embora HSL, HSV e espaços relacionados sejam suficientemente adequados, por exemplo, para escolher uma única cor, eles ignoram grande parte da complexidade da aparência das cores. Essencialmente, trocam relevância perceptual por velocidade de cálculo, refletindo um período da história da computação — estações gráficas avançadas da década de 1970 ou computadores pessoais de meados da década de 1990 — em que modelos mais sofisticados teriam custo computacional elevado demais.[S] HSL e HSV são transformações simples do RGB que preservam simetrias do cubo RGB sem relação com a percepção humana, de modo que seus vértices R, G e B são equidistantes do eixo neutro e igualmente espaçados ao redor dele. Se representarmos a gama RGB em um espaço de maior uniformidade perceptual, como CIELAB (ver abaixo), torna-se imediatamente claro que as primárias vermelha, verde e azul não têm a mesma luminosidade ou o mesmo croma, nem matizes uniformemente espaçados. Além disso, diferentes monitores RGB usam primárias diferentes e, por isso, têm gamas diferentes. Como HSL e HSV são definidos exclusivamente em referência a algum espaço RGB, eles não são espaços de cores absolutos: para especificar uma cor com precisão, é necessário informar não apenas os valores HSL ou HSV, mas também as características do espaço RGB em que se baseiam, incluindo a correção gama utilizada.

07

Outros modelos de cores em coordenadas cilíndricas

Os criadores do HSL e do HSV estavam longe de ser os primeiros a imaginar cores dispostas em formas cônicas ou esféricas, com os neutros indo do preto ao branco em um eixo central e os matizes correspondendo a ângulos em torno desse eixo. Arranjos semelhantes remontam ao século XVIII e continuam a ser desenvolvidos nos modelos científicos mais modernos.

08

Fórmulas de conversão de cores

Para converter de HSL ou HSV para RGB, essencialmente invertemos as etapas listadas acima (como antes, R, G, B ∈ [0, 1]). Primeiro, calculamos o croma multiplicando a saturação pelo croma máximo para determinada luminosidade ou valor. Em seguida, encontramos o ponto em uma das três faces inferiores do cubo RGB que possui o mesmo matiz e croma que nossa cor (e, portanto, projeta-se sobre o mesmo ponto no plano de cromaticidade). Por fim, adicionamos quantidades iguais de R, G e B para atingir a luminosidade ou o valor adequados.[G]

Para RGB

Dada uma cor com matiz H ∈ [0°, 360°), saturação SL ∈ [0, 1] e luminosidade L ∈ [0, 1], primeiro encontramos o croma: Em seguida, podemos encontrar um ponto (R1, G1, B1) ao longo das três faces inferiores do cubo RGB, com o mesmo matiz e croma de nossa cor (usando o valor intermediário X para o segundo maior componente dessa cor): Na equação acima, a notação H′mod2 refere-se ao resto da divisão euclidiana de H′ por 2. H′ não é necessariamente um número inteiro. Quando H′ é um número inteiro, a fórmula «vizinha» produziria o mesmo resultado, pois X=0 ou X=C, conforme apropriado. Por fim, podemos encontrar R, G e B adicionando a mesma quantidade a cada componente, para corresponder à luminosidade:

Interconversão

Dada uma cor com matiz HV∈[0∘,360∘), saturação SV∈[0,1] e valor V∈[0,1], Dada uma cor com matiz HL∈[0∘,360∘), saturação SL∈[0,1] e luminosidade L∈[0,1],

A partir de RGB

Esta é uma reapresentação da conversão anterior. Os valores devem estar no intervalo R,G,B∈[0,1]. e o ponto médio do intervalo (isto é, luminosidade)

09

Amostras de cores

Passe o cursor sobre as amostras abaixo para ver os valores R, G e B de cada amostra em uma dica de ferramenta.

Vídeos recomendados

Fontes consultadas

Continue pesquisando