Analizar cadena HSL a RGB
Lea como números un color CSS pegado: hsl(210, 80%, 45%) pasa a rojo 23, verde 115 y azul 207, o #1773cf, tanto si usa comas como espacios o unidades como deg y turn. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Hsl
- hsl(210, 80%, 45%)
- H
- 210
- S
- 80
- L
- 45
- Resistencia (Ω)
- 23
Diseñadores e ingenieros pegan literales CSS hsl() y hsla() desde hojas de estilo, tokens de Figma y las DevTools del navegador, y después necesitan un triple rojo-verde-azul estable para lienzos, aplicaciones nativas y búferes de imagen. Este analizador acepta una sola cadena de color CSS, tolera espacios de más, unidades opcionales de matiz como deg, turn, rad y grad, y signos de porcentaje opcionales en saturación y luminosidad; a continuación convierte el matiz, la saturación y la luminosidad analizados por la misma ruta del CSS Color Module que usan los navegadores al pintar hsl(). El matiz se envuelve como CSS envuelve los ángulos; saturación y luminosidad fuera de cero a cien por ciento se rechazan para que un error de tipeo no se convierta en blanco en silencio.
Cómo una cadena CSS hsl() se convierte en un triple RGB
Un color CSS hsl() nombra un punto en coordenadas cilíndricas: el matiz es el ángulo alrededor de la rueda, la saturación es lo lejos que el color queda del gris y la luminosidad es lo cerca que queda del negro o del blanco. Esta capacidad analiza primero el token de función. Acepta la forma histórica con comas hsl(h, s, l) y la forma moderna separada por espacios hsl(h s l), con o sin la a de hsla, y con un alfa opcional tras una cuarta coma o tras una barra.
El matiz puede ser un número desnudo de grados o llevar una unidad explícita: deg, turn, rad o grad. Saturación y luminosidad pueden incluir el signo de porcentaje u omitirlo; ambas se leen como porcentajes de cero a cien.
Cuando el token ya se comprende, la conversión sigue el CSS Color Module y la ruta W3C hue2rgb: se escalan saturación y luminosidad al intervalo unitario, se calculan los límites intermedios p y q, se muestrean tres posiciones desplazadas en el círculo unitario, se multiplica por doscientos cincuenta y cinco y se redondea a enteros. Si la saturación es cero, los tres canales colapsan al mismo gris. El recorrido es aritmética pura, sin relojes y sin red, de modo que la misma cadena produce siempre el mismo triple.
Contrato de entrada, unidades, espacios y errores
El valor debe ser una función CSS hsl() o hsla(), incluidos los paréntesis; un triple suelto de números se rechaza para que el contrato siga siendo un analizador de cadenas y no una segunda forma HSL numérica. El espacio extra dentro de los paréntesis se ignora. Saturación y luminosidad fuera de cero a cien por ciento también fallan en lugar de recortarse, de modo que un error como quinientos por ciento no puede volverse blanco en silencio.
El matiz se envuelve módulo trescientos sesenta tras convertir la unidad, igual que CSS, así que cuatrocientos ochenta grados y ciento veinte grados pintan el mismo verde. Si hay éxito, el cuerpo devuelve la cadena de entrada recortada, los h, s y l numéricos analizados (matiz en grados tras el envoltorio, saturación y luminosidad como porcentajes), canales enteros r, g y b, un arreglo triple rgb, una cadena rgb() imprimible, un código hex en minúsculas y una nota breve de fórmula.
Cuando la cadena de origen incluía un componente alfa, la respuesta también incluye a en el intervalo unitario y una cadena rgba(); si el alfa está ausente, esas claves se omiten en lugar de ponerse a null. Ejemplo: hsl(210, 80%, 45%) produce los mismos canales azul profundo que devolvería un conversor HSL numérico para matiz doscientos diez, saturación ochenta y luminosidad cuarenta y cinco.
Dónde merece la pena analizar una cadena hsl()
Las canalizaciones de tokens de diseño guardan rampas de marca como funciones CSS para que sigan siendo legibles junto a las hojas de estilo, y después emiten canales enteros para UIColor de iOS, Android Color y hex de correo. Las herramientas de regresión visual comparan píxeles renderizados; un análisis determinista de la misma cadena hsl() usada en CSS es el único modo de conocer el triple de ocho bits esperado sin abrir un navegador.
Los generadores de documentación imprimen una tabla de muestras a partir de los tokens de un repositorio y no deben inventar un verde distinto del que el sitio publica. El material didáctico que muestra funciones de color CSS junto a RGB y hex necesita un oráculo que señale la sintaxis malformada en lugar de recuperarse de un signo de porcentaje ausente adivinando.
Si usted ya tiene tres números en lugar de una cadena CSS, use un conversor HSL a RGB numérico; esta página posee la intención de búsqueda de analizar una cadena hsl() y obtener un triple RGB.
Qué puede hacer con ella
De tokens de hoja de estilo a RGB de lienzo y nativo
Pegue literales hsl() de un archivo de tema o de DevTools y obtenga r, g, b enteros más hex para rellenos de lienzo, UIColor y Android Color.
Canalizaciones de tokens de diseño y documentación
Recorra tokens de función CSS en un repositorio de sistema de diseño y emita una tabla estable de triples RGB que coincida con la pintura hsl() del navegador.
Preguntas frecuentes
¿Qué formas CSS hsl() acepta el analizador?
La forma con comas hsl(h, s, l) y la forma moderna con espacios hsl(h s l), más hsla() y alfa opcional (cuarta coma o barra). Se ignoran espacios de más. El matiz puede usar deg, turn, rad o grad.
¿Cómo se convierte hsl() en un triple RGB?
Tras analizar la cadena, la conversión sigue la ruta hue2rgb del CSS Color Module en el círculo unitario. Los canales se redondean a enteros 0–255. La misma cadena produce siempre los mismos r, g y b.
¿Qué ocurre si la cadena hsl() está malformada?
Nombres de función incorrectos, paréntesis ausentes, el número incorrecto de componentes, sintaxis mixta de comas y barra, y tokens no numéricos se rechazan y no se facturan.
¿Las unidades de matiz se envuelven y se recortan saturación y luminosidad?
El matiz se envuelve módulo 360 tras convertir la unidad, como CSS. Saturación y luminosidad deben estar entre 0 y 100 por ciento; los valores fuera de rango fallan en lugar de recortarse a blanco o negro.
¿Puedo pegar un color tal cual desde una hoja de estilos o DevTools?
Sí. Pegue el texto completo de hsl() o hsla(), con los paréntesis, por ejemplo hsl(210, 80%, 45%). Los espacios de más se ignoran, pero tres números sueltos sin hsl() se rechazan.
Herramientas relacionadas
Para desarrolladores — acceso por API
Todo lo de esta página está disponible por programación. Esta sección es para equipos que quieren integrarlo en sus sistemas; el resto puede usar la herramienta de arriba sin más.
Endpoint de API
¿Prefiere automatizarlo? Un POST autenticado crea la tarea; el resultado llega por webhook o enlace firmado. La misma capacidad también se ejecuta aquí en la web, por email y desde Telegram — y pronto también desde nuestra app.
Llámela desde su stack
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)Ejemplo de solicitud
{
"hsl": "hsl(210, 80%, 45%)"
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_string_to_rgb",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}La API es asíncrona: la llamada devuelve un task_id al instante y el resultado llega por webhook. El polling está limitado a 1 req/s por tarea.
Precio
Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.
Errores
| HTTP | Código | Significado |
|---|---|---|
401 | unauthorized | API key ausente o inválida. |
402 | insufficient_balance | El saldo no cubre el precio de la tarea. |
404 | unknown_type | El tipo de tarea no existe. |
429 | rate_limited | Demasiadas peticiones. Use el webhook en vez de sondear. |
Notas técnicas
La sintaxis malformada —paréntesis ausentes, un nombre de función equivocado, pocos componentes o tokens no numéricos— falla con invalid_input en lugar de adivinar un color cercano.
Cómo una cadena CSS hsl() se convierte en un triple RGB
Los autores escriben ese punto como un token de función, no como tres campos de formulario sueltos, de modo que un conversor que solo acepta h, s y l numéricos deja un hueco siempre que la fuente de verdad sea una hoja de estilo, un JSON de tokens de diseño o una copia de DevTools.
Contrato de entrada, unidades, espacios y errores
Envíe por POST un cuerpo JSON con un único campo de cadena obligatorio llamado hsl. Los alias text, value, color e input se aceptan y significan lo mismo. Un hsl ausente, una cadena vacía, una cadena de más de doscientos cincuenta y seis caracteres, un nombre de función distinto de hsl o hsla, paréntesis desequilibrados, el número incorrecto de componentes, sintaxis mixta de comas y barra, y tokens que no son números finitos fallan con invalid_input y no se facturan.
Dónde merece la pena analizar una cadena hsl()
Como esta capacidad es un motor de parseo puro, la herramienta del navegador es gratuita y una llamada API exitosa cuesta el $0.002 publicado por elemento; los fallos de validación no consumen saldo prepago.
Casos de integración
Fixtures de regresión visual
Convierta las mismas cadenas hsl() que publica su CSS en fixtures RGB de 8 bits para que las pruebas de captura comparen el color que el navegador pintará de verdad.
Preguntas técnicas
¿Cuánto cuesta analizar una cadena hsl() a RGB?
La herramienta del navegador es gratuita. Las peticiones API usan saldo prepago KIT a $0.002 por llamada exitosa; la entrada inválida no se factura.