Analisar string HSL para RGB
Leia como números uma cor CSS colada: hsl(210, 80%, 45%) vira vermelho 23, verde 115 e azul 207, ou #1773cf, com vírgulas, espaços ou unidades como deg e turn. 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
- Hsl
- hsl(210, 80%, 45%)
- H
- 210
- S
- 80
- L
- 45
- Resistência (Ω)
- 23
Designers e engenheiros colam literais CSS hsl() e hsla() de folhas de estilo, tokens do Figma e DevTools do navegador, e depois precisam de um triplo vermelho-verde-azul estável para canvas, aplicativos nativos e buffers de imagem. Este analisador aceita uma única string de cor CSS, tolera espaços extras, unidades opcionais de matiz como deg, turn, rad e grad, e sinais de porcentagem opcionais em saturação e luminosidade; em seguida converte o matiz, a saturação e a luminosidade analisados pelo mesmo caminho do CSS Color Module que os navegadores usam ao pintar hsl(). O matiz envolve como o CSS envolve ângulos; saturação e luminosidade fora de zero a cem por cento são rejeitadas para que um erro de digitação não vire branco em silêncio.
Como uma string CSS hsl() vira um triplo RGB
Uma cor CSS hsl() nomeia um ponto em coordenadas cilíndricas: o matiz é o ângulo em volta da roda, a saturação é o quão longe a cor fica do cinza e a luminosidade é o quão perto ela fica do preto ou do branco. Esta capacidade analisa primeiro o token de função.
Aceita a forma histórica com vírgulas hsl(h, s, l) e a forma moderna separada por espaços hsl(h s l), com ou sem o a de hsla, e com um alfa opcional depois de uma quarta vírgula ou depois de uma barra. O matiz pode ser um número nu de graus ou trazer uma unidade explícita: deg, turn, rad ou grad. Saturação e luminosidade podem incluir o sinal de porcentagem ou omiti-lo; ambas são lidas como porcentagens de zero a cem.
Depois que o token é compreendido, a conversão segue o CSS Color Module e o caminho W3C hue2rgb: escala saturação e luminosidade para o intervalo unitário, calcula os limites intermediários p e q, amostra três posições deslocadas no círculo unitário, multiplica por duzentos e cinquenta e cinco e arredonda para inteiros. Quando a saturação é zero, os três canais colapsam no mesmo cinza. O percurso é aritmética pura, sem relógios e sem rede, então a mesma string sempre produz o mesmo triplo.
Contrato de entrada, unidades, espaços e erros
O valor deve ser uma função CSS hsl() ou hsla(), inclusive os parênteses; um triplo solto de números é rejeitado para que o contrato continue sendo um analisador de strings e não uma segunda forma HSL numérica. Saturação e luminosidade fora de zero a cem por cento também falham em vez de serem recortadas, então um erro como quinhentos por cento não pode virar branco em silêncio.
O matiz envolve módulo trezentos e sessenta depois da conversão da unidade, como o CSS, de modo que quatrocentos e oitenta graus e cento e vinte graus pintam o mesmo verde. Em caso de sucesso, o corpo devolve a string de entrada aparada, os h, s e l numéricos analisados (matiz em graus após o envelopamento, saturação e luminosidade como porcentagens), canais inteiros r, g e b, um array triplo rgb, uma string rgb() imprimível, um código hex em minúsculas e uma nota curta de fórmula.
Quando a string de origem incluía um componente alfa, a resposta também inclui a no intervalo unitário e uma string rgba(); se o alfa estiver ausente, essas chaves são omitidas em vez de ir para null. Exemplo: hsl(210, 80%, 45%) produz os mesmos canais azul-escuros que um conversor HSL numérico devolveria para matiz duzentos e dez, saturação oitenta e luminosidade quarenta e cinco.
Onde vale a pena analisar uma string hsl()
Pipelines de tokens de design guardam rampas de marca como funções CSS para permanecerem legíveis ao lado das folhas de estilo e depois emitem canais inteiros para UIColor do iOS, Android Color e hex de e-mail. Ferramentas de regressão visual comparam pixels renderizados; uma análise determinística da mesma string hsl() usada no CSS é o único jeito de saber o triplo de oito bits esperado sem abrir um navegador.
Geradores de documentação imprimem uma tabela de amostras a partir dos tokens de um repositório e não devem inventar um verde diferente do que o site publica. Material didático que mostra funções de cor CSS ao lado de RGB e hex precisa de um oráculo que aponte sintaxe malformada em vez de se recuperar de um sinal de porcentagem ausente adivinhando.
Se você já tem três números em vez de uma string CSS, use um conversor HSL para RGB numérico; esta página possui a intenção de busca de analisar uma string hsl() e obter um triplo RGB.
Casos de uso
De tokens de folha de estilo a RGB de canvas e nativo
Cole literais hsl() de um arquivo de tema ou das DevTools e obtenha r, g, b inteiros mais hex para preenchimentos de canvas, UIColor e Android Color.
Pipelines de tokens de design e documentação
Percorra tokens de função CSS em um repositório de design system e emita uma tabela estável de triplos RGB que combine com a pintura hsl() do navegador.
Perguntas frequentes
Quais formas CSS hsl() o analisador aceita?
A forma com vírgulas hsl(h, s, l) e a forma moderna com espaços hsl(h s l), mais hsla() e alfa opcional (quarta vírgula ou barra). Espaços extras são ignorados. O matiz pode usar deg, turn, rad ou grad.
Como hsl() é convertido em um triplo RGB?
Depois que a string é analisada, a conversão segue o caminho hue2rgb do CSS Color Module no círculo unitário. Os canais são arredondados para inteiros 0–255. A mesma string sempre produz os mesmos r, g e b.
O que acontece se a string hsl() estiver malformada?
Nomes de função errados, parênteses ausentes, número errado de componentes, sintaxe mista de vírgulas e barra, e tokens não numéricos são rejeitados e não cobrados.
Unidades de matiz envolvem, e saturação e luminosidade são recortadas?
O matiz envolve módulo 360 após a conversão da unidade, como o CSS. Saturação e luminosidade devem ficar entre 0 e 100 por cento; valores fora da faixa falham em vez de recortar para branco ou preto.
Posso colar uma cor direto de uma folha de estilos ou do DevTools?
Sim. Cole o texto inteiro de hsl() ou hsla(), com os parênteses, por exemplo hsl(210, 80%, 45%). Espaços extras são ignorados, mas três números soltos sem o hsl() são recusados.
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-string-to-rgb \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hsl":"hsl(210, 80%, 45%)"}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-string-to-rgb", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hsl": "hsl(210, 80%, 45%)"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-string-to-rgb",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hsl": "hsl(210, 80%, 45%)"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-string-to-rgb", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hsl":"hsl(210, 80%, 45%)"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hsl":"hsl(210, 80%, 45%)"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-string-to-rgb", 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
{
"hsl": "hsl(210, 80%, 45%)"
}Exemplo de resposta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_string_to_rgb",
"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
Sintaxe malformada —parênteses ausentes, nome de função errado, poucos componentes ou tokens não numéricos— falha com invalid_input em vez de adivinhar uma cor próxima.
Como uma string CSS hsl() vira um triplo RGB
Autores escrevem esse ponto como um token de função, não como três campos de formulário separados, então um conversor que só aceita h, s e l numéricos deixa uma lacuna sempre que a fonte da verdade é uma folha de estilo, um JSON de tokens de design ou uma cópia das DevTools.
Contrato de entrada, unidades, espaços e erros
Envie por POST um corpo JSON com um único campo de string obrigatório chamado hsl. Os aliases text, value, color e input são aceitos e significam a mesma coisa. Espaço extra dentro dos parênteses é ignorado. hsl ausente, string vazia, string com mais de duzentos e cinquenta e seis caracteres, nome de função diferente de hsl ou hsla, parênteses desequilibrados, número errado de componentes, sintaxe mista de vírgulas e barra, e tokens que não são números finitos falham com invalid_input e não são cobrados.
Onde vale a pena analisar uma string hsl()
Como esta capacidade é um motor de parse puro, a ferramenta do navegador é gratuita e uma chamada API bem-sucedida custa o US$ 0,002 publicado por item; falhas de validação não consomem saldo pré-pago.
Casos de integração
Fixtures de regressão visual
Transforme as mesmas strings hsl() que o seu CSS publica em fixtures RGB de 8 bits para que testes de captura comparem a cor que o navegador vai pintar de verdade.
Perguntas técnicas
Quanto custa analisar uma string hsl() para RGB?
A ferramenta do navegador é gratuita. Requisições API usam saldo pré-pago KIT a US$ 0,002 por chamada bem-sucedida; entrada inválida não é cobrada.