Resultado
Todos os cálculos são feitos localmente no seu navegador: análise, gráfico, exportação. Se você desconectar a rede, a página continua funcionando.
Fatos e limites do método
| Faixa do matiz | De 0° a 360° |
|---|---|
| Faixa de saturação e valor | De 0% a 100% |
| Fórmula do valor | V = máx(R, G, B) / 255 |
| Fórmula da saturação | S = (máx − mín) / máx, com máx = 0 → S = 0 |
Quando induz ao erro
- HSV não é o único modelo cilíndrico — não o confunda com o modelo semelhante, mas distinto, HSL (o matiz é definido da mesma forma em ambos, mas saturação e luminosidade/valor são calculados de maneira diferente).
- Em cores muito escuras (valor próximo de 0%) o matiz e a saturação perdem relevância — matizes visualmente diferentes podem parecer a mesma cor quase preta.
- Com saturação zero (tons de cinza, incluindo preto e branco) o matiz não é matematicamente definido — o conversor mostra 0° nesse caso.
- O resultado é apenas outro sistema de coordenadas para a mesma cor, não um espaço de cor diferente — não carrega informação de perfil de cor da tela.
Como é calculado
Os valores R, G e B são normalizados dividindo por 255, dando números de 0 a 1.
O valor (V) é o máximo dos valores normalizados R, G, B.
A saturação (S) é calculada como a razão entre a diferença do canal máximo e mínimo e o máximo (com máximo igual a zero, a saturação é considerada zero).
O matiz (H) é calculado com base em qual de R, G ou B é o máximo, usando uma fórmula por partes que resulta em um valor de 0° a 360°.
Perguntas e respostas
Qual a diferença entre HSV e HSL?
O matiz é definido da mesma forma nos dois modelos, mas saturação e luminosidade/valor usam fórmulas diferentes, então porcentagens idênticas de S e L (ou V) em HSL e HSV produzem cores diferentes.
Por que aparece matiz 0° quando S=0% e a cor é cinza?
O matiz não é matematicamente definido para tons de cinza, então por convenção usa-se 0° — isso não afeta como a cor cinza é percebida.
Posso usar HSV diretamente no CSS?
O CSS moderno não suporta uma função hsv() diretamente — para uso em estilos é mais prático converter o resultado para HSL ou HEX/RGB com outro conversor.
Meus dados são enviados para algum lugar?
Não, todo o cálculo roda no seu navegador.