Conversor HSL↔HSV
Leve uma cor do HSL dos designers para o HSV dos editores de imagem: hsl(210, 80%, 45%) mantém o matiz 210 e fica com valor de 81%, com a saturação recalculada para o novo modelo. Funciona nos dois sentidos. Grátis no seu navegador.
- Grátis
- Funciona no seu navegador
- Sem cadastro
- Seus dados não saem do seu aparelho
Executar grátis
Exemplo resolvido
- Direção da conversão
- hsl_to_hsv
- H
- 210
- S
- 80
- L
- 45
- S de entrada
- 80
- S
- 88,8888888889
- Tensão (V)
- 81
HSL e HSV são dois modelos de cor cilíndricos que compartilham o mesmo ângulo de matiz na roda, mas tratam de forma diferente o segundo e o terceiro eixos: HSL usa saturação e luminosidade, enquanto HSV usa saturação e valor (brilho). Designers costumam escolher cores em HSL porque a luminosidade se aproxima do preto e do branco de forma simétrica; já motores de jogo, editores de imagem e muitos pipelines de vídeo falam em HSV porque o valor mapeia de modo mais direto o brilho máximo do canal. Este conversor recebe uma direção —HSL para HSV ou HSV para HSL—, o matiz em graus de 0 a 360, a saturação como porcentagem e a luminosidade ou o valor como porcentagem de 0 a 100, e devolve o tripleto convertido com ambos os objetos de modelo preenchidos.
Como HSL e HSV se relacionam no mesmo matiz
O matiz é compartilhado: 0 graus é vermelho puro, 120 é verde puro, 240 é azul puro e 360 fecha o círculo de volta ao vermelho. Os modelos divergem em como a vividez e o brilho são armazenados. Em HSL, a luminosidade vai do preto a 0 por cento passando por um tom médio puro perto de 50 por cento até o branco a 100 por cento, e a saturação HSL estica um cinza dessa luminosidade em direção à cor plenamente cromática no matiz escolhido.
Em HSV, o valor é o máximo dos canais RGB subjacentes em escala unitária, de modo que valor a 100 por cento é a cor mais brilhante daquele matiz e saturação, e valor a 0 por cento é sempre preto independentemente da saturação. Como as geometrias diferem, a saturação numérica em HSL não é o mesmo número que a saturação numérica em HSV para a maioria das cores, mesmo quando a cor percebida coincide após a conversão.
O caminho de forma fechada usado aqui opera no intervalo unitário: para HSL para HSV, o valor é igual à luminosidade mais a saturação HSL vezes o mínimo entre luminosidade e um menos luminosidade, e a saturação HSV é 0 quando o valor é 0; caso contrário, duas vezes um menos luminosidade sobre o valor.
Para HSV para HSL, a luminosidade é o valor vezes um menos metade da saturação HSV, e a saturação HSL é 0 em preto ou branco; caso contrário, a diferença entre valor e luminosidade dividida pelo mínimo entre luminosidade e um menos luminosidade. O matiz é copiado sem alteração. O matiz deve estar no intervalo fechado de 0 a 360; saturação, luminosidade e valor devem cada um situar-se entre 0 e 100 por cento inclusive.
Onde a conversão HSL para HSV aparece no trabalho real
Sistemas de design costumam autorar rampas de marca em HSL para que equipes de produto possam escalonar a luminosidade com contraste acessível mantendo estáveis o matiz e uma faixa de saturação perceptual; no entanto, temas nativos móveis, seletores de materiais do Unity e Unreal e muitas bibliotecas gráficas esperam HSV ou HSB para controles de brilho voltados ao artista.
Ferramentas de visualização de dados e arte generativa que expõem uma roda de matiz com controle deslizante de valor precisam de uma inversa confiável ao exportar tokens armazenados como propriedades personalizadas HSL. Pipelines de vídeo e broadcast que documentam cores em HSV para correção de câmera ainda precisam de HSL ao alimentar CSS e documentação de design. Currículos e bootcamps ensinam modelos cilíndricos lado a lado e precisam de um oráculo confiável único para chaves de exercícios que coincidam com as identidades dos manuais.
Fluxos de acessibilidade que ajustam a luminosidade percebida em HSL e depois entregam a um editor baseado em HSV ainda precisam de mapeamento exato de canais sem APIs exclusivas do navegador. Se mais adiante você precisar de HSL para RGB, conversão multi-formato HEX LAB CMYK ou verificações de contraste WCAG, trate-os como intenções de busca e páginas de destino separadas em vez de sobrecarregar esta página dedicada ao conversor HSL para HSV.
Casos de uso
Tokens de design entre ferramentas HSL e HSV
Converta rampas de marca HSL em tripletos HSV para temas móveis, seletores de materiais de jogo e editores de imagem que expõem valor em vez de luminosidade.
Tabelas de parâmetros de motor e shaders
Mapeie amostras HSV de artistas de volta para HSL em sistemas de design CSS e tabelas de documentação que devem permanecer bit-stable entre pipelines.
Perguntas frequentes
Quais intervalos o matiz, a saturação, a luminosidade e o valor aceitam?
O matiz h deve estar entre 0 e 360 graus inclusive. Saturação s, luminosidade l e valor v são porcentagens de 0 a 100.
A saturação HSL é o mesmo número que a saturação HSV?
Não. Os modelos definem a saturação de forma diferente. Este conversor aplica as identidades de forma fechada para que a cor resultante coincida, embora os valores numéricos de S em geral diferem.
O matiz muda entre HSL e HSV?
Não. O matiz é compartilhado por ambos os modelos e é copiado sem alteração. Apenas a saturação e o eixo de luminosidade ou valor são recalculados.
Quanto custa?
A ferramenta do navegador é gratuita e roda localmente.
O que hsl(210, 80%, 45%) vira em HSV?
O matiz continua em 210 e o valor passa a 81%. A saturação sobe acima dos 80% originais, porque o HSV mede a vivacidade da cor de outra forma que o HSL.
Ferramentas relacionadas
Para desenvolvedores — acesso via API
Tudo nesta página está disponível via API. Esta seção é para equipes que querem integrar a ferramenta aos próprios sistemas; quem não precisa disso pode simplesmente usar a ferramenta acima.
Endpoint
Autenticação por token Bearer. Um único POST coloca a tarefa na fila; o resultado chega por webhook ou link assinado.
Chame do seu código
curl -X POST https://api.kit.forhosting.com/color/hsl-hsv \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"direction":"hsl_to_hsv","h":210,"s":80}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-hsv", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"direction": "hsl_to_hsv",
"h": 210,
"s": 80
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-hsv",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"direction": "hsl_to_hsv",
"h": 210,
"s": 80
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-hsv", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"direction":"hsl_to_hsv","h":210,"s":80}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"direction":"hsl_to_hsv","h":210,"s":80}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-hsv", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemplo de requisição
{
"direction": "hsl_to_hsv",
"h": 210,
"s": 80
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_hsv",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}A API é assíncrona: cada chamada devolve um task_id na hora. Se preferir polling, consulte o status a até 1 requisição por segundo.
Preço
Preço publicado, sem tokens nem créditos escondidos. Tarefa que falha não é cobrada.
Erros
| HTTP | Código | O que significa |
|---|---|---|
401 | unauthorized | Token ausente ou inválido. Confira o header Authorization. |
402 | insufficient_balance | Saldo insuficiente para esta tarefa. Faça uma recarga e tente de novo. |
404 | unknown_type | Esse tipo de tarefa não existe. Confira o campo type no catálogo. |
429 | rate_limited | Muitas requisições em pouco tempo. Espere um instante e tente de novo. |
Notas técnicas
Canais fora dos intervalos legais falham com um erro claro invalid_input, de modo que tokens incorretos não são envelopados nem limitados em silêncio.
Como HSL e HSV se relacionam no mesmo matiz
O pipeline é aritmética de ponto flutuante pura, sem sementes aleatórias, sem carimbos de relógio e sem chamadas de rede, de modo que entradas idênticas sempre produzem o mesmo JSON.
O que você envia e o que recebe de volta
Verificações clássicas incluem o vermelho médio puro em HSL com matiz 0, saturação 100 e luminosidade 50 mapeando para valor HSV 100 com saturação plena; preto como luminosidade 0 ou valor 0 colapsando para preto acromático; e cinzas com saturação 0 mapeando para saturação 0 no outro modelo, com valor ou luminosidade seguindo o eixo de brilho de origem. Use o formulário gratuito do navegador para explorar paletas e revisões de design e, em seguida, chame o contrato idêntico a partir de scripts quando precisar de conversão em massa de tokens de design ou materiais de motor. Envie uma string de direção hsl_to_hsv ou hsv_to_hsl, um matiz finito h em graus e uma saturação finita s como porcentagem no modelo de origem. Quando a direção é hsl_to_hsv você também deve enviar a luminosidade l como porcentagem de 0 a 100; quando a direção é hsv_to_hsl você deve enviar o valor v como porcentagem na mesma faixa. Campos ausentes, strings não numéricas, NaN, Infinity e canais fora da faixa falham com invalid_input e não são cobrados. No sucesso de HSL para HSV a resposta ecoa a direção limpa, h, a saturação de origem como s_in, a luminosidade de entrada l, a saturação HSV de saída s e o valor v, objetos aninhados hsl e hsv, e uma nota breve de fórmula. No sucesso de HSV para HSL a resposta ecoa direção, h, s_in, o valor de entrada v, a saturação HSL de saída s e a luminosidade l, objetos aninhados hsv e hsl, e a nota da fórmula inversa. O preço de chamadas de API bem-sucedidas é a base publicada de US$ 0,002 por item; falhas de validação não consomem saldo pré-pago.
Onde a conversão HSL para HSV aparece no trabalho real
Como esta capacidade é um motor de parse puro, o preço da API é a base publicada de US$ 0,002 por item bem-sucedido e a validação falha não consome saldo.
Casos de integração
Fixtures em massa de tokens e currículo
Automatize conversão bidirecional para fixtures de regressão, chaves de exercícios e exportações de paleta com uma API determinística a US$ 0,002 por item.
Perguntas técnicas
O que o campo de direção faz?
Use hsl_to_hsv quando a entrada for HSL (envie h, s e l). Use hsv_to_hsl quando a entrada for HSV (envie h, s e v). Outras strings de direção são rejeitadas.