HSL a cadena CSS
Obtenga un valor hsl() listo para el navegador sin escribir a mano comas ni signos de porcentaje: tono 210,456, saturación 64,444 y luminosidad 42,225 quedan como hsl(210.46, 64.44%, 42.23%) con los dos decimales por defecto. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Hue
- 210,456
- Saturación
- 64,444
- Luminosidad
- 42,225
- Css
- hsl(210.46, 64.44%, 42.23%)
Convierta valores separados de matiz, saturación y luminosidad en una cadena CSS hsl() limpia, sin crear a mano signos, redondeos incoherentes ni porcentajes olvidados. El formateador valida cada componente, normaliza el matiz en el círculo cromático, redondea según la precisión elegida y devuelve un resultado predecible. Resulta útil cuando datos de color estructurados deben convertirse en CSS listo para el navegador, desde sistemas de tokens y temas hasta pruebas automatizadas, plantillas y utilidades de desarrollo.
Proporcione componentes HSL numéricos
El matiz es un ángulo en grados y puede ser positivo, negativo o superior a una vuelta completa. La herramienta lo ajusta al intervalo canónico que empieza en cero y termina antes de 360: -30 equivale a 330 y 390 se convierte en 30. Saturación y luminosidad son porcentajes, pero se introducen sin el signo: use 65 para sesenta y cinco por ciento.
Ambas deben estar entre 0 y 100.
Controle un redondeo determinista
Use precision para elegir el máximo de decimales conservados en los tres componentes. El valor predeterminado es dos y se aceptan enteros de cero a seis. Cero produce componentes enteros; valores mayores preservan más detalle.
El redondeo se aplica después de normalizar el matiz. Además se eliminan ceros finales innecesarios y el cero negativo se representa como cero. Las reglas no dependen de la configuración regional: el separador decimal siempre es un punto, los argumentos llevan coma y espacio, y saturación y luminosidad reciben siempre el signo de porcentaje.
Por ello, una misma entrada válida devuelve exactamente la misma cadena en cualquier entorno.
Use el CSS devuelto con seguridad
El resultado incluye un campo css con la notación hsl(h, s%, l%). La capacidad solo formatea: no convierte RGB o hexadecimal, no añade transparencia alfa, no calcula contraste ni decide si el color sirve para texto. Al generar temas, valide los registros de origen y formatee cada color por separado para localizar cualquier fallo.
Si la precisión forma parte de una convención pública, indíquela expresamente. Inserte el resultado únicamente donde se espere un valor de color CSS, no en selectores ni marcado ajeno.
Qué puede hacer con ella
Generar tokens de diseño
Convierta registros HSL calculados en valores CSS uniformes antes de escribir variables de tema o archivos de tokens.
Normalizar formularios
Valide números de un selector de color y produzca una cadena estable para vistas previas, almacenamiento o estilos.
Crear pruebas estables
Aplique redondeo y espacios fijos para evitar cambios de snapshots por formatos distintos de números equivalentes.
Preguntas frecuentes
¿La entrada incluye signos de porcentaje?
No. Envíe valores numéricos de 0 a 100; el formateador añade los signos necesarios.
¿Qué ocurre con un matiz fuera de 0 a 360?
Se ajusta alrededor del círculo cromático al intervalo desde 0 hasta antes de 360.
¿Cuántos decimales puedo conservar?
Defina precision como entero de 0 a 6. El valor predeterminado es 2 y se eliminan ceros finales.
¿Admite transparencia alfa?
No. Produce una cadena hsl() opaca de tres componentes y no acepta un componente alfa.
¿Cambia el resultado según mi idioma o mi región?
No. Las reglas son fijas y no dependen de la configuración regional: el separador decimal es siempre un punto, así que los mismos números dan siempre hsl(210.46, 64.44%, 42.23%), válido en cualquier navegador.
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-css \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":210.456,"saturation":64.444,"lightness":42.225}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-to-css", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 210.456,
"saturation": 64.444,
"lightness": 42.225
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-to-css",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 210.456,
"saturation": 64.444,
"lightness": 42.225
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-to-css", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":210.456,"saturation":64.444,"lightness":42.225}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":210.456,"saturation":64.444,"lightness":42.225}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-to-css", 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.456,
"saturation": 64.444,
"lightness": 42.225
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_to_css",
"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
Proporcione componentes HSL numéricos
Envíe matiz, saturación y luminosidad como números JSON, no como una expresión CSS parcialmente formateada. Todos los valores obligatorios deben ser números finitos; se rechazan cadenas como «50», campos ausentes, null, Infinity y NaN para detectar errores de datos y mantener resultados idénticos en API, navegador y pruebas.
Use el CSS devuelto con seguridad
Cada solicitud automatizada cuesta $0.002.
Preguntas técnicas
¿Cuánto cuesta una solicitud?
El precio base de la API es $0.002 por solicitud.