Conversor RGB para HSL
Veja qualquer cor RGB como matiz, saturação e luminosidade: 255, 128, 64 vira 20.1°, 100 % e 62.55 %. Assim você ajusta o tom ou monta temas claros e escuros sem chutar valores. 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
- Resistência (Ω)
- 255
- G
- 128
- B
- 64
- H
- 20,1047
- S
- 100
- L
- 62,549
- Matiz
- 20,1047
Designers, desenvolvedores front-end e autores de pipelines costumam guardar cores como inteiros de vermelho, verde e azul de zero a duzentos e cinquenta e cinco, mas precisam de matiz, saturação e luminosidade para ajustar o tom sem deslocar o brilho, montar variáveis CSS ou alimentar ferramentas sensíveis à cor. Este conversor RGB para HSL aceita três canais nesse intervalo de byte padrão, executa uma conversão determinística no estilo sRGB e devolve matiz em graus mais saturação e luminosidade em porcentagens, junto com strings hsl CSS modernas e clássicas que você pode colar em folhas de estilo. Canais fora de zero a duzentos e cinquenta e cinco falham com um erro claro de entrada inválida, de modo que dados ruins nunca sofrem clamp silencioso.
Informar canais RGB e o que a conversão calcula
Informe três números chamados r, g e b para vermelho, verde e azul. O motor primeiro normaliza cada canal dividindo por duzentos e cinquenta e cinco para que os valores fiquem no intervalo unitário. Em seguida encontra o máximo e o mínimo desses três componentes normalizados e a croma como a diferença entre eles.
A luminosidade é a metade da soma do máximo e do mínimo. Quando a croma é zero a cor é acromática: o matiz é zero e a saturação é zero, restando só a luminosidade para descrever cinzas do preto ao branco passando pelo cinza médio. Quando a croma é positiva, a saturação é a croma dividida por um menos o valor absoluto de duas vezes a luminosidade menos um, que é a fórmula padrão de saturação HSL usada em CSS e em pilhas gráficas.
O matiz se constrói a partir do setor da roda de cores onde o canal máximo se situa: dominante em vermelho, verde ou azul, escalado a graus no intervalo semiaberto de zero até trezentos e sessenta.
Casos de uso
CSS e tokens de design
Converta amostras RGB de ferramentas de design em HSL para que temas ajustem matiz ou luminosidade mantendo políticas de saturação coerentes em modos claro e escuro.
Pipelines de paleta e marca
Automação que parte de cores de marca RGB deriva componentes HSL para gerar tintas, sombras e variantes de destaque sem clampar em silêncio canais fora de faixa.
Perguntas frequentes
Como converto RGB para HSL com esta ferramenta?
A resposta inclui h, s, l, strings CSS e um objeto hsl aninhado.
O que acontece se um canal estiver fora de 0–255?
Cada um de r, g e b deve estar entre 0 e 255 inclusive; valores fora de faixa são rejeitados e não cobrados.
Matiz, saturação e luminosidade são porcentagens ou frações 0–1?
O matiz está em graus de 0 até 360. Saturação e luminosidade são porcentagens de 0 a 100, alinhadas ao uso comum de hsl() em CSS.
O conversor RGB para HSL é gratuito?
A ferramenta do navegador roda grátis no seu dispositivo.
Como é calculada a luminosidade HSL?
Cada canal é dividido por 255, e a luminosidade é a metade da soma do maior e do menor valor. Para 255, 128, 64 o resultado é 62.55 %.
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/rgb-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"r":255,"g":128,"b":64}'const res = await fetch("https://api.kit.forhosting.com/color/rgb-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"r": 255,
"g": 128,
"b": 64
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/rgb-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"r": 255,
"g": 128,
"b": 64
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/rgb-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"r":255,"g":128,"b":64}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"r":255,"g":128,"b":64}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/rgb-hsl", 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
{
"r": 255,
"g": 128,
"b": 64
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.rgb_hsl",
"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
Informar canais RGB e o que a conversão calcula
Cada canal deve ser um número finito entre zero e duzentos e cinquenta e cinco inclusive; strings inteiras como "128" são aceitas, e os aliases red, green e blue mapeiam para os mesmos campos se preferir nomes longos. Entradas idênticas sempre produzem JSON idêntico porque o caminho é aritmética pura, sem rede, sem semente aleatória e sem relógio de parede.
Ler matiz, saturação, luminosidade e strings CSS
Em caso de sucesso a resposta ecoa os canais de entrada r, g e b e, em seguida, expõe h, s e l para matiz em graus, saturação em porcentagem e luminosidade em porcentagem. O vermelho puro duzentos e cinquenta e cinco zero zero produz matiz zero com saturação plena e luminosidade média; o verde puro e o azul puro caem perto de cento e vinte e duzentos e quarenta graus respectivamente; canais iguais produzem cinzas com saturação zero. Os mesmos três números reaparecem sob os nomes longos hue, saturation e lightness, e aninhados dentro de um objeto hsl, de modo que código de IU, demos de SDK e avaliadores podem escolher a forma que couber sem mapeamento extra. Duas strings prontas para colar estão incluídas: hsl_css usa a forma moderna do CSS Color Module separada por espaços, como hsl(30 100% 50%), e hsl_legacy usa a forma clássica com vírgulas e parênteses que analisadores antigos ainda esperam. O campo method é sempre rgb_to_hsl para que roteadores posteriores possam ramificar sem cheirar formas. Falta de qualquer canal obrigatório, valores não numéricos e qualquer canal fora de zero a duzentos e cinquenta e cinco falham com invalid_input e não são cobrados após a rejeição do motor.
Uso da API, preços, fluxos de design e limites práticos
Chame o conversor RGB para HSL gratuito no navegador para ajustes de paleta, demos de aula e verificações rápidas sem instalar uma biblioteca de cor. Combine saídas HSL com verificadores de contraste ao construir temas acessíveis, ou alimente deslocamentos de matiz em pipelines de tokens de marca que mantêm a luminosidade fixa ao rotacionar acentos. Autores que publicam SDKs podem mapear h, s e l diretamente em controles de formulário ou propriedades personalizadas CSS sem reimplementar a conversão em cada linguagem. Envie um corpo JSON com os números obrigatórios r, g e b no intervalo publicado. Use a API pré-paga quando um sistema de design, gerador de temas, pipeline de acessibilidade ou ferramenta de cor de e-commerce precisar de um contrato estável sob saldo KIT a US$ 0,002 por item bem-sucedido; falhas de validação nunca consomem saldo após a rejeição do motor. Prefira este endpoint quando a intenção de busca e o enquadramento do produto forem especificamente RGB para HSL com limites rígidos de canal; para conversão multiformato entre HEX, RGB, HSL, LAB e CMYK em uma só chamada, use o conversor de cor mais amplo do catálogo.
Casos de integração
Ensino e avaliação da matemática da cor
Cursos e avaliações de programação conferem respostas RGB→HSL dos alunos com JSON determinístico, com invalid_input claro quando algum canal cai fora de 0–255.
Perguntas técnicas
Posso usar os aliases red, green e blue?
Sim. Os campos red, green e blue são aceitos como aliases de r, g e b para que clientes usem nomes de canal curtos ou longos.