ForHosting KIT · Utilidades de desarrollo

HSL a cadena CSS

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.

● BetaGratis · en su navegador

Ejecutar — gratis Cómo funciona y API

Úselo desde WebAPIEmailTelegramApp pronto

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

Envíe matiz, saturación y luminosidad como números JSON, no como una expresión CSS parcialmente formateada. 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. 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.

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%). Puede usarlo en una declaración de estilo, una propiedad DOM, un token de diseño o una prueba golden. 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. Cada solicitud automatizada cuesta $0.002. 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

¿Cuánto cuesta una solicitud?

El precio base de la API es $0.002 por solicitud.

¿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.

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

POSThttps://api.kit.forhosting.com/color/hsl-to-css

¿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

Por solicitud$0.002

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.

Ver la documentación completa del KIT →