Convertir HSL a RGB
Obtenga números sencillos de rojo, verde y azul a partir de un color HSL: tono 210, saturación 80 % y luminosidad 45 % salen como rojo 23, verde 115 y azul 207. Los valores fuera de rango se señalan, nunca se reajustan en silencio. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Hue
- 210
- Saturación
- 80
- Luminosidad
- 45
- Red
- 23
- Verde
- 115
- Azul
- 207
Convierta un color HSL en los canales rojo, verde y azul que requieren numerosas herramientas gráficas, formatos de imagen e interfaces de software. Introduzca el matiz en grados y la saturación y la luminosidad como porcentajes; recibirá tres enteros de 0 a 255. El conversor valida cada componente antes de calcular, por lo que un valor fuera de rango genera un error de entrada claro en vez de un color ajustado o envuelto inesperadamente. El cálculo es puro y determinista, idóneo para comprobaciones interactivas, ejemplos de documentación, flujos de tokens de diseño y transformaciones automatizadas reproducibles.
Cómo interpretar los valores HSL
HSL describe un color mediante tres conceptos que suelen resultar más sencillos de ajustar que los canales rojo, verde y azul por separado. El matiz es un ángulo en una rueda cromática. 0 grados representa el rojo, 120 grados el verde, 240 grados el azul y 360 grados vuelve a la misma posición roja que 0. La saturación determina la intensidad cromática del resultado.
Con 0 %, el matiz no produce ningún efecto visible y la salida es un tono de gris. Con 100 %, el color alcanza el máximo croma disponible para el matiz y la luminosidad elegidos. La luminosidad sitúa el resultado entre negro y blanco: 0 % siempre es negro, 50 % ofrece la expresión más intensa de un matiz totalmente saturado y 100 % siempre es blanco.
Indique el matiz como número finito entre 0 y 360, y la saturación y la luminosidad como porcentajes finitos entre 0 y 100. Se admiten los límites. Los valores externos se rechazan en lugar de normalizarse silenciosamente, lo que permite detectar tokens de diseño incorrectos y evita que un matiz negativo o un porcentaje superior a 100 genere un color verosímil pero no deseado.
Cómo se obtienen los canales RGB
El cálculo primero lleva el matiz a un círculo unitario y convierte los porcentajes de saturación y luminosidad en fracciones. Cuando la saturación es 0, el color es acromático y los tres canales RGB reciben el mismo valor derivado de la luminosidad. En los demás casos, el algoritmo calcula dos límites intermedios a partir de la saturación y la luminosidad.
Después toma tres posiciones de la rueda, separadas por un tercio de vuelta: una para rojo, otra para verde y otra para azul. Una interpolación por tramos proyecta cada posición entre los límites intermedios. Por último, cada fracción de canal se multiplica por 255 y se redondea al entero más próximo.
La respuesta contiene los campos rojo, verde y azul; todos quedan garantizados como enteros entre 0 y 255. Es aritmética determinista: no emplea red, azar, reloj, configuración regional ni estado almacenado. El matiz 360 se trata como el extremo de la rueda equivalente a 0, pero se respeta el intervalo cerrado documentado.
Ninguna entrada se recorta al rango, de modo que los errores de validación permanecen visibles.
Cómo utilizar el resultado con fiabilidad
Utilice los canales devueltos donde un sistema solicite valores RGB de ocho bits. Una hoja de estilo puede insertarlos en una expresión rgb(), una rutina de imagen puede escribirlos en un píxel o registro de paleta y una compilación de tokens de diseño puede serializarlos para plataformas que no consumen HSL directamente. Para una comprobación manual, introduzca un color conocido: matiz 0, saturación 100 y luminosidad 50 producen rojo 255, verde 0 y azul 0.
En automatizaciones, trate los fallos por separado de las respuestas correctas: un campo ausente, un número no finito o cualquier componente fuera de su intervalo constituye una entrada no válida y debe corregirse, no repetirse sin cambios. Conserve los valores HSL de origen si el equipo de diseño necesitará hacer ajustes perceptivos posteriormente, ya que esta capacidad solo realiza la conversión directa y no reconstruye el HSL original desde RGB.
Como la salida usa enteros, está lista para consumidores RGB convencionales sin añadir otra política de redondeo que pueda causar diferencias de una unidad entre aplicaciones.
Qué puede hacer con ella
Compilar tokens de diseño
Convierta tokens HSL de marca y temas en canales RGB enteros para aplicaciones y compilaciones que requieren componentes de color de ocho bits.
Preguntas frecuentes
¿Qué rangos se aceptan?
El matiz debe estar entre 0 y 360. La saturación y la luminosidad deben estar entre 0 y 100. Todos los límites son inclusivos.
¿Qué ocurre si un valor queda fuera de rango?
Los valores no se envuelven ni se recortan.
¿Por qué los valores RGB son enteros?
Los resultados normalizados de los canales se multiplican por 255 y se redondean para utilizarlos directamente en interfaces RGB comunes de ocho bits.
¿Son equivalentes los matices 0 y 360?
Sí. Ambos describen el extremo rojo de la rueda cromática y son válidos dentro del intervalo cerrado de 0 a 360.
¿Qué números RGB corresponden a tono 210, saturación 80 % y luminosidad 45 %?
Rojo 23, verde 115 y azul 207. Cada canal es un número entero entre 0 y 255, así que puede escribirlo directamente en un programa de diseño o en un ajuste de imagen.
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-to-rgb \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":210,"saturation":80,"lightness":45}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-to-rgb", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 210,
"saturation": 80,
"lightness": 45
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-to-rgb",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 210,
"saturation": 80,
"lightness": 45
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-to-rgb", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":210,"saturation":80,"lightness":45}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":210,"saturation":80,"lightness":45}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-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
{
"hue": 210,
"saturation": 80,
"lightness": 45
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_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
Cómo se obtienen los canales RGB
Por ello, una entrada idéntica produce el mismo JSON en el navegador, en las pruebas o en una integración API.
Cómo utilizar el resultado con fiabilidad
El cálculo en navegador sirve para comprobaciones rápidas; una solicitud API cuesta $0.002 cuando la transformación forma parte de un flujo reproducible.
Casos de integración
Preparar valores gráficos
Transforme una selección HSL en valores rojo, verde y azul para canvas, herramientas de imagen, gráficos, paletas y API de renderizado.
Comprobar cálculos de color
Genere valores de referencia deterministas para documentación, pruebas unitarias, scripts de migración y comparaciones entre implementaciones cromáticas.
Preguntas técnicas
¿Cuánto cuesta la conversión mediante API?
Cada solicitud API correcta utiliza el precio base publicado de $0.002. La herramienta del navegador ejecuta localmente el mismo cálculo determinista.