Conversor HSL a RGB
Convierta tres números HSL en los canales que usa una pantalla: tono 210, saturación 80 % y luminosidad 45 % dan rgb(23, 115, 207), es decir, #1773cf en hex, con el mismo método que aplican los navegadores a hsl(). Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- H
- 210
- S
- 80
- L
- 45
- Resistencia (Ω)
- 23
- G
- 115
- B
- 207
- RVA
- rgb(23, 115, 207)
HSL describe un color por el matiz en la rueda, la saturación como lo vívido del color y la luminosidad como lo cerca que está del negro o del blanco. Este conversor toma tres números —matiz en grados de cero a trescientos sesenta, saturación y luminosidad como porcentajes de cero a cien— y devuelve canales RGB enteros, una cadena CSS rgb() y un código hex en minúsculas, usando el mismo recorrido de forma cerrada que los navegadores aplican a hsl() en CSS. Un matiz fuera del intervalo cerrado de cero a trescientos sesenta se rechaza con un error de validación claro para que los tokens erróneos no se envuelvan en silencio.
Cómo se proyecta HSL sobre rojo, verde y azul
El matiz es un ángulo en la rueda de color: cero grados es rojo puro, ciento veinte es verde puro, doscientos cuarenta es azul puro y trescientos sesenta cierra el círculo de nuevo en rojo. La saturación estira un gris de la luminosidad elegida hacia el color plenamente cromático en ese matiz; cero por ciento de saturación es siempre un gris, negro o blanco acromático que depende solo de la luminosidad.
La luminosidad va del negro al cero por ciento, pasando por el tono medio puro cerca del cincuenta por ciento, hasta el blanco al cien por ciento. El algoritmo de conversión usado aquí sigue el módulo de color CSS y la formulación W3C: se escalan saturación y luminosidad al intervalo unitario, se calculan los límites intermedios de croma p y q a partir de luminosidad y saturación, y se muestrean tres posiciones desplazadas en el círculo unitario con el clásico auxiliar hue2rgb para los canales rojo, verde y azul.
Cuando la saturación es cero, los tres canales colapsan al mismo gris derivado de la luminosidad, lo cual es a la vez un atajo de rendimiento y una ganancia de estabilidad numérica. Cada canal del intervalo unitario se multiplica por doscientos cincuenta y cinco y se redondea al entero más cercano para que el resultado coincida con las expectativas de framebuffers de ocho bits y de CSS rgb().
Saturación y luminosidad deben estar cada una entre cero y cien por ciento inclusive, igual que los porcentajes que los diseñadores escriben en las hojas de estilo.
Qué envía usted y qué recibe a cambio
Envíe tres números finitos en los campos h, s y l. El campo h es el matiz en grados y es obligatorio; debe situarse entre cero y trescientos sesenta inclusive. Los campos s y l son saturación y luminosidad como porcentajes de cero a cien.
Cuando el matiz está fuera de la banda legal, la respuesta explica que h debe estar entre cero y trescientos sesenta grados para que el cliente pueda acotar o corregir el token antes de reintentar.
En caso de éxito, la respuesta devuelve los valores h, s y l limpios, canales enteros r, g y b cada uno de cero a doscientos cincuenta y cinco, una cadena rgb imprimible de la forma rgb(R, G, B), una cadena hex en minúsculas de la forma #rrggbb y una nota breve de fórmula que nombra la ruta CSS y W3C.
Comprobaciones clásicas incluyen el rojo puro con matiz cero, saturación cien y luminosidad cincuenta, que da doscientos cincuenta y cinco, cero, cero; el gris medio con cualquier matiz, saturación cero y luminosidad cincuenta, que da ciento veintiocho en cada canal; y verdes profundos cerca del matiz ciento veinte con alta saturación y luminosidad moderada.
Dónde aparece la conversión HSL a RGB en el trabajo real
Los sistemas de diseño guardan rampas de marca y tokens semánticos en HSL para que los equipos de producto puedan girar el matiz en los temas manteniendo pasos de luminosidad amigables con el contraste; al publicar en propiedades personalizadas CSS, colores nativos móviles y estilos de relleno de canvas sigue haciendo falta RGB y hex fiables. Las bibliotecas de visualización de datos generan paletas categóricas avanzando el matiz a saturación y luminosidad fijas, y luego convierten cada paso a RGB para motores SVG, WebGL y de gráficos.
Las plantillas de correo y los generadores PDF suelen aceptar solo hex o rgb(), de modo que las canalizaciones de automatización de marketing convierten una vez las especificaciones HSL de marca y almacenan en caché el triple de canales. Los flujos de accesibilidad calculan ratios de contraste sobre RGB o luminancia relativa; partir de HSL para ajustes perceptuales de luminosidad termina igualmente en los valores de canal que este conversor proporciona.
El currículo y las lecciones de bootcamp enseñan modelos de color en paralelo y necesitan un único oráculo de confianza que coincida con el renderizado CSS para las claves de los deberes. Si más adelante necesita conversión multi-formato entre HEX, LAB y CMYK, la inversa de RGB a HSL o comprobaciones de contraste WCAG, trátelos como intenciones de búsqueda y aterrizajes separados en lugar de sobrecargar esta página dedicada al conversor HSL a RGB.
Qué puede hacer con ella
Tokens de diseño a CSS y hex
Convierta rampas de marca HSL en canales RGB enteros y códigos #rrggbb para hojas de estilo, tokens de diseño y tablas de documentación que deben coincidir con el renderizado hsl() del navegador.
Generadores de paletas y gráficos
Avance el matiz a saturación y luminosidad fijas para paletas categóricas y obtenga RGB 0–255 estable para bibliotecas SVG, canvas y de visualización de datos.
Preguntas frecuentes
¿Qué rangos aceptan matiz, saturación y luminosidad?
El matiz h debe estar entre 0 y 360 grados inclusive. La saturación s y la luminosidad l son porcentajes de 0 a 100.
¿Qué ocurre si el matiz está fuera de 0–360?
Este conversor no envuelve el matiz módulo 360; corrija o acote el ángulo antes de reintentar.
¿Qué algoritmo convierte HSL a RGB?
La ruta del módulo de color CSS / W3C: saturación y luminosidad en intervalo unitario, intermedios p y q, muestras hue2rgb para rojo, verde y azul, luego Math.round a enteros 0–255.
¿La respuesta incluye hex además de RGB?
Sí. Las respuestas exitosas incluyen enteros r, g, b, una cadena css rgb() y un código hex #rrggbb en minúsculas para pegarlo en hojas de estilo o herramientas de diseño.
¿Cuánto cuesta?
La herramienta del navegador es gratuita y se ejecuta en local.
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-rgb \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"h":210,"s":80,"l":45}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-rgb", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"h": 210,
"s": 80,
"l": 45
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-rgb",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"h": 210,
"s": 80,
"l": 45
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-rgb", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"h":210,"s":80,"l":45}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"h":210,"s":80,"l":45}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-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
{
"h": 210,
"s": 80,
"l": 45
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_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
Diseñadores e ingenieros front-end suelen elegir colores en HSL porque al girar el matiz se mantienen estables la saturación y la luminosidad; sin embargo, los navegadores, los lienzos, los búferes de imagen y la mayoría de las API gráficas necesitan en última instancia canales rojo, verde y azul en una escala de cero a doscientos cincuenta y cinco.
Cómo se proyecta HSL sobre rojo, verde y azul
El pipeline es aritmética de punto flotante pura, sin semillas aleatorias, sin marcas de tiempo de reloj y sin llamadas de red, de modo que entradas HSL idénticas siempre producen el mismo JSON. El matiz debe estar en el intervalo cerrado de cero a trescientos sesenta; valores como menos uno o cuatrocientos fallan con invalid_input en lugar de un envoltorio modular.
Qué envía usted y qué recibe a cambio
Campos ausentes, cadenas no numéricas, NaN e Infinity fallan con invalid_input y no se cobran. El precio de las llamadas API exitosas es la base publicada de $0.002 por elemento; los fallos de validación no consumen saldo prepago.
Dónde aparece la conversión HSL a RGB en el trabajo real
Las herramientas de juegos y los editores de niveles exponen ruedas de matiz a los artistas y deben volcar RGB entero en definiciones de material y tintes de textura sin API exclusivas del navegador. Como esta capacidad es un motor de parseo puro, el precio de la API es la base publicada de $0.002 por elemento exitoso y la validación fallida no consume saldo.
Casos de integración
Canalizaciones masivas de tokens
Programe especificaciones HSL del sistema de diseño en fixtures RGB y hex para temas móviles, plantillas de correo y pruebas de regresión con una API determinista.