Convertidor de HWB a HSL
El matiz 210 con 20 % de blancura y 10 % de negrura se convierte en hsl(210 77.78% 55%), conservando el matiz tal como lo escribió. Pase sus colores de diseño de HWB a HSL sin adivinar. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Hue
- 210
- Blancura
- 20
- Negrura
- 10
- H
- 210
- S
- 77,7778
- L
- 55
- Saturación
- 77,7778
El convertidor de HWB a HSL transforma un ángulo de matiz y porcentajes de blancura y negrura en matiz, saturación y luminosidad sin depender del analizador de color del navegador ni de servicios externos. Conserva el ángulo normalizado, valida cada componente y aplica la regla estándar de normalización de HWB cuando blancura y negrura superan juntas el cien por cien. El resultado incluye campos HSL numéricos, un objeto anidado y una cadena CSS lista para usar.
Introduzca un color HWB completo y comprenda la validación
El matiz se mide en grados y admite cualquier ángulo finito, positivo o negativo: el convertidor lo ajusta al intervalo habitual desde cero inclusive hasta trescientos sesenta exclusivo; así, menos treinta se convierte en trescientos treinta y cuatrocientos veinte en sesenta. Blancura y negrura son porcentajes y cada uno debe estar entre cero y cien inclusive. Se admiten cadenas numéricas que solo contengan notación decimal o exponencial válida, lo que facilita los clientes basados en formularios sin debilitar la validación.
Este límite estricto resulta útil en canalizaciones porque detiene los datos incorrectos antes de que parezcan colores plausibles. La respuesta repite los porcentajes de origen validados para facilitar la auditoría de registros y pruebas junto con los valores HSL derivados.
Cómo se convierten la blancura y la negrura en HSL
HWB describe un color como un matiz puro mezclado con blanco y negro. Tras convertir ambos porcentajes en fracciones, el convertidor comprueba su suma. Si el total no supera uno, la fracción restante es el croma: uno menos la blancura menos la negrura.
La luminosidad HSL es uno más la blancura menos la negrura, dividido entre dos. La saturación es el croma dividido entre uno menos el valor absoluto de dos veces esa luminosidad menos uno, salvo en los límites negro, blanco o acromático, donde vale cero. Si blancura y negrura superan juntas el cien por cien, las reglas de color CSS normalizan ambas proporciones por su suma.
El matiz devuelto conserva el ángulo de entrada ajustado incluso con saturación cero. Así se mantienen estables las conversiones de ida y vuelta, los metadatos de paleta y las comparaciones deterministas, aunque el gris visible no tenga matiz perceptible. Todos los resultados numéricos publicados se redondean a cuatro decimales para evitar ruido de coma flotante en las instantáneas.
Utilice la salida en CSS, sistemas de diseño y pruebas automatizadas
Una respuesta correcta expone h, s y l, con matiz en grados y saturación y luminosidad en porcentajes. Use el ejecutor gratuito del navegador para paletas puntuales, ejemplos de documentación y ejercicios. Como la implementación solo contiene aritmética acotada, una entrada idéntica siempre produce la misma salida: no intervienen red, azar, reloj del sistema, analizadores dependientes de la configuración regional ni perfiles ocultos de color.
Este convertidor solo procesa HWB a HSL.
Qué puede hacer con ella
Migre tokens de color CSS
Convierta tokens de diseño HWB en componentes HSL numéricos y una cadena CSS, conservando el matiz y la mezcla originales para revisarlos.
Normalice paletas generadas
Procese totales programáticos de blancura y negrura superiores al cien por cien con valores efectivos explícitos, sin sorpresas dependientes del navegador.
Preguntas frecuentes
¿Qué unidades acepta el convertidor?
El matiz es un ángulo en grados. Blancura y negrura son porcentajes de 0 a 100 inclusive, no fracciones de 0 a 1.
¿Qué ocurre si blancura más negrura supera el 100 %?
Ambos valores se normalizan proporcionalmente por su suma, según las reglas HWB. La salida es acromática, normalized es true y se devuelven los porcentajes efectivos.
¿Se conserva el matiz en un resultado gris?
Sí. El matiz de entrada se ajusta al intervalo 0–360 y se devuelve incluso cuando la saturación es cero, para conservar los metadatos de forma determinista.
¿Puede usar los campos h, w y b?
Los nombres canónicos largos prevalecen si se proporcionan ambas formas.
¿Cómo convierto el matiz 210 con 20 % de blancura y 10 % de negrura a HSL?
El resultado es hsl(210 77.78% 55%). Lo que queda tras restar blancura y negrura es el color puro, y la luminosidad es uno más la blancura menos la negrura, dividido entre dos: 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/hwb-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"hue":210,"whiteness":20,"blackness":10}'const res = await fetch("https://api.kit.forhosting.com/color/hwb-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"hue": 210,
"whiteness": 20,
"blackness": 10
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hwb-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"hue": 210,
"whiteness": 20,
"blackness": 10
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hwb-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"hue":210,"whiteness":20,"blackness":10}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"hue":210,"whiteness":20,"blackness":10}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hwb-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
{
"hue": 210,
"whiteness": 20,
"blackness": 10
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hwb_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
La herramienta web es gratuita; la conversión automatizada mediante API cuesta $0.002 por elemento correcto.
Introduzca un color HWB completo y comprenda la validación
Indique hue, whiteness y blackness como números finitos. También se aceptan los alias breves h, w y b para clientes que ya almacenan registros HWB compactos. Los valores ausentes, el texto no numérico, los infinitos y los porcentajes fuera del intervalo generan invalid_input, sin estimaciones ni recortes silenciosos.
Cómo se convierten la blancura y la negrura en HSL
No queda componente cromático y el resultado es gris; effective_whiteness y effective_blackness muestran la mezcla normalizada, y normalized es true.
Utilice la salida en CSS, sistemas de diseño y pruebas automatizadas
También incluye los nombres largos hue, saturation y lightness, un objeto hsl anidado y hsl_css para usarlo directamente en una hoja de estilos o propiedad personalizada. Los porcentajes originales de blancura y negrura siguen visibles, mientras effective_whiteness y effective_blackness identifican una mezcla HWB sobredimensionada que exigió normalización. Use la API por $0.002 por elemento correcto cuando un compilador de tokens, generador de temas, script de migración o tarea de integración continua necesite el mismo contrato JSON estable. Para descubrir entradas arbitrarias HEX, RGB, LAB o CMYK conviene un convertidor multiformato, pero este endpoint específico ofrece validación precisa y normalización transparente para flujos HWB.
Casos de integración
Cree fixtures de color estables
Use la salida HSL redondeada y determinista en pruebas unitarias, herramientas educativas y verificaciones de conformidad entre lenguajes.
Preguntas técnicas
¿Cuánto cuesta la conversión mediante API?
Cada elemento correcto mediante API cuesta $0.002. El ejecutor del navegador es gratuito y los fallos de validación se devuelven como invalid_input.