Convertidor RGB a HSL
Vea cualquier color RGB como tono, saturación y luminosidad: 255, 128, 64 pasa a 20.1°, 100 % y 62.55 %. Así puede ajustar el tono o crear temas claros y oscuros sin adivinar. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Resistencia (Ω)
- 255
- G
- 128
- B
- 64
- H
- 20,1047
- S
- 100
- L
- 62,549
- Matiz
- 20,1047
Diseñadores, desarrolladores front-end y autores de pipelines suelen manejar colores como enteros de rojo, verde y azul entre cero y doscientos cincuenta y cinco, pero necesitan matiz, saturación y luminosidad para ajustar el tono sin desplazar el brillo, construir variables CSS o alimentar herramientas sensibles al color. Este convertidor RGB a HSL acepta tres canales en ese rango de byte estándar, ejecuta una conversión determinista al estilo sRGB y devuelve el matiz en grados más saturación y luminosidad en porcentajes, junto con cadenas hsl CSS modernas y clásicas que puede pegar en hojas de estilo. Los canales fuera de cero a doscientos cincuenta y cinco fallan con un error claro de entrada inválida, de modo que los datos erróneos nunca se recortan en silencio.
Introducir canales RGB y qué calcula la conversión
Proporcione tres números llamados r, g y b para rojo, verde y azul. El motor normaliza primero cada canal dividiendo por doscientos cincuenta y cinco para que los valores queden en el intervalo unitario. Luego halla el máximo y el mínimo de esos tres componentes normalizados y la croma como su diferencia.
La luminosidad es la mitad de la suma del máximo y el mínimo. Cuando la croma es cero el color es acromático: el matiz es cero y la saturación es cero, dejando solo la luminosidad para describir grises desde el negro al blanco pasando por el gris medio. Cuando la croma es positiva, la saturación es la croma dividida por uno menos el valor absoluto de dos veces la luminosidad menos uno, que es la fórmula estándar de saturación HSL usada en CSS y en pilas gráficas.
El matiz se construye desde el sector de la rueda de color donde se asienta el canal máximo: dominante en rojo, verde o azul, escalado a grados en el rango semiabierto de cero hasta trescientos sesenta.
Qué puede hacer con ella
CSS y tokens de diseño
Convierta muestras RGB de herramientas de diseño a HSL para que los temas ajusten matiz o luminosidad manteniendo políticas de saturación coherentes en modos claro y oscuro.
Pipelines de paleta y marca
La automatización que parte de colores de marca RGB obtiene componentes HSL para generar tintes, sombras y variantes de acento sin recortar en silencio canales fuera de rango.
Preguntas frecuentes
¿Cómo convierto RGB a HSL con esta herramienta?
La respuesta incluye h, s, l, cadenas CSS y un objeto hsl anidado.
¿Qué ocurre si un canal está fuera de 0–255?
Cada uno de r, g y b debe estar entre 0 y 255 inclusive; los valores fuera de rango se rechazan y no se cobran.
¿El matiz, la saturación y la luminosidad son porcentajes o fracciones 0–1?
El matiz va en grados de 0 hasta 360. Saturación y luminosidad son porcentajes de 0 a 100, alineados con el uso habitual de hsl() en CSS.
¿El convertidor RGB a HSL es gratuito?
La herramienta del navegador es gratuita y se ejecuta en su dispositivo.
¿Cómo se calcula la luminosidad HSL?
Cada canal se divide entre 255 y la luminosidad es la mitad de la suma del valor mayor y el menor. Para 255, 128, 64 el resultado es 62.55 %.
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/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)Ejemplo de solicitud
{
"r": 255,
"g": 128,
"b": 64
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.rgb_hsl",
"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
Introducir canales RGB y qué calcula la conversión
Cada canal debe ser un número finito entre cero y doscientos cincuenta y cinco inclusive; se aceptan cadenas enteras como "128", y los alias red, green y blue se mapean a los mismos campos si prefiere nombres largos. Entradas idénticas siempre producen JSON idéntico porque la ruta es aritmética pura, sin red, sin semilla aleatoria y sin reloj de pared.
Leer matiz, saturación, luminosidad y cadenas CSS
En caso de éxito la respuesta repite los canales de entrada r, g y b, y luego expone h, s y l para matiz en grados, saturación en porcentaje y luminosidad en porcentaje. El rojo puro doscientos cincuenta y cinco cero cero produce matiz cero con saturación plena y luminosidad media; el verde puro y el azul puro caen cerca de ciento veinte y doscientos cuarenta grados respectivamente; canales iguales producen grises con saturación cero. Los mismos tres números aparecen de nuevo bajo los nombres largos hue, saturation y lightness, y anidados dentro de un objeto hsl, de modo que el código de IU, las demos de SDK y los evaluadores pueden elegir la forma que convenga sin mapeo extra. Se incluyen dos cadenas listas para pegar: hsl_css usa la forma moderna de CSS Color Module separada por espacios, como hsl(30 100% 50%), y hsl_legacy usa la forma clásica con comas y paréntesis que aún esperan analizadores antiguos. El campo method es siempre rgb_to_hsl para que los enrutadores posteriores puedan ramificar sin oler formas. Falta de cualquier canal requerido, valores no numéricos y cualquier canal fuera de cero a doscientos cincuenta y cinco fallan con invalid_input y no se cobran tras el rechazo del motor.
Uso de la API, precios, flujos de diseño y límites prácticos
Llame al convertidor RGB a HSL gratuito en el navegador para ajustes de paleta, demostraciones de clase y comprobaciones rápidas sin instalar una biblioteca de color. Prefiera este extremo cuando la intención de búsqueda y el encuadre del producto sean específicamente RGB a HSL con límites estrictos de canal; para conversión multiformato entre HEX, RGB, HSL, LAB y CMYK en una sola llamada, use el convertidor de color más amplio del catálogo. Combine salidas HSL con verificadores de contraste al construir temas accesibles, o alimente desplazamientos de matiz en pipelines de tokens de marca que mantienen fija la luminosidad al rotar acentos. Envíe un cuerpo JSON con los números obligatorios r, g y b en el rango publicado. Use la API prepaga cuando un sistema de diseño, generador de temas, pipeline de accesibilidad o herramienta de color de comercio electrónico necesite un contrato estable bajo saldo KIT a $0.002 por elemento exitoso; los fallos de validación nunca consumen saldo tras el rechazo del motor. Los autores que envían SDK pueden mapear h, s y l directamente a controles de formulario o propiedades personalizadas CSS sin reimplementar la conversión en cada lenguaje.
Casos de integración
Enseñanza y evaluación del cálculo de color
Cursos y pruebas de programación contrastan respuestas RGB→HSL del alumnado con JSON determinista, con invalid_input claro cuando un canal cae fuera de 0–255.
Preguntas técnicas
¿Puedo usar los alias red, green y blue?
Sí. Los campos red, green y blue se aceptan como alias de r, g y b para que los clientes usen nombres de canal cortos o largos.