Conversor HSV a HSL
Pase un color de HSV a HSL sin adivinar: tono 210, saturación 70 % y valor 80 % quedan en una luminosidad del 52 % con el mismo tono, y la saturación se recalcula para HSL. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- H
- 210
- S
- 70
- Voltaje (V)
- 80
- S in
- 70
- S
- 58,3333333333
- L
- 52
HSV y HSL son dos modelos de color cilíndricos que comparten el mismo ángulo de matiz en la rueda, pero almacenan el brillo y la viveza en ejes distintos. Los motores de juego, las herramientas de vídeo y muchos selectores nativos hablan en HSV, donde el valor es el brillo máximo del canal, mientras que las propiedades personalizadas CSS, los sistemas de diseño y las rampas de accesibilidad suelen preferir HSL porque la luminosidad se acerca al negro y al blanco de forma simétrica. Este conversor de HSV a HSL acepta el matiz en grados de 0 a 360, la saturación como porcentaje y el valor como porcentaje de 0 a 100, y reasigna saturación y valor a saturación y luminosidad HSL copiando el matiz sin cambios.
Cómo se mapea HSV a HSL con el mismo matiz
El matiz es compartido por ambos modelos: 0 grados es rojo puro, 120 es verde puro, 240 es azul puro y 360 cierra el círculo de nuevo en rojo. Los modelos divergen en cómo se almacenan la viveza y el brillo. En HSV, el valor es el máximo de los canales RGB subyacentes en escala unitaria, de modo que el valor al 100 por ciento es el color más brillante de ese matiz y saturación, y el valor al 0 por ciento es siempre negro con independencia de la saturación.
La saturación HSV estira un gris de ese valor hacia el color plenamente cromático en el matiz elegido. En HSL, la luminosidad va del negro al 0 por ciento pasando por un tono medio puro cerca del 50 por ciento hasta el blanco al 100 por ciento, y la saturación HSL estira un gris de esa luminosidad hacia la croma plena.
Como las geometrías difieren, la saturación numérica en HSV no es el mismo número que la saturación numérica en HSL para la mayoría de los colores, aunque el color percibido coincida tras la conversión. La vía de forma cerrada usada aquí opera en el intervalo unitario: la luminosidad es el valor por uno menos la mitad de la saturación HSV, y la saturación HSL es 0 en negro o blanco; en caso contrario, la diferencia entre valor y luminosidad dividida por el mínimo entre luminosidad y uno menos luminosidad.
El matiz se copia sin cambios. El matiz debe situarse en el intervalo cerrado de 0 a 360; la saturación y el valor deben situarse cada uno entre 0 y 100 por ciento inclusive.
Dónde aparece la conversión HSV a HSL en el trabajo real
Los temas nativos móviles, los selectores de materiales de Unity y Unreal, y muchas bibliotecas gráficas exponen controles de brillo basados en valor; sin embargo, los sistemas de diseño suelen documentar rampas de marca en HSL para que los equipos de producto puedan escalar la luminosidad con contraste accesible manteniendo estables el matiz y una banda de saturación perceptual. Las herramientas de visualización de datos y arte generativo que guardan muestras de artista como HSV necesitan una vía fiable al exportar tokens como propiedades personalizadas HSL para la web.
Las cadenas de vídeo y retransmisión que documentan colores en HSV para la corrección de cámara siguen necesitando HSL al alimentar CSS y documentación de diseño. Los planes de estudio y bootcamps enseñan modelos cilíndricos en paralelo y requieren un oráculo de confianza único para claves de tareas que coincidan con las identidades de los manuales. Los flujos de accesibilidad que reciben HSV de un editor de imagen y luego ajustan la luminosidad percibida en HSL aún necesitan un mapeo exacto de canales sin APIs exclusivas del navegador.
Si más adelante necesita la vía inversa HSL a HSV, HSV a RGB, conversión multi-formato HEX LAB CMYK o comprobaciones de contraste WCAG, trátelos como intenciones de búsqueda y aterrizajes separados en lugar de sobrecargar esta página dedicada al conversor HSV a HSL.
Qué puede hacer con ella
Muestras de motor a tokens HSL en CSS
Convierta tripletes HSV de artistas desde motores de juego y selectores nativos a HSL para sistemas de diseño, propiedades personalizadas CSS y tablas de documentación.
Temas móviles y entrega de diseño
Mapee colores de marca basados en valor desde editores de temas móviles a rampas HSL que los equipos de producto puedan aclarar para un contraste accesible.
Preguntas frecuentes
¿Qué rangos aceptan el matiz, la saturación y el valor?
El matiz h debe estar entre 0 y 360 grados inclusive. La saturación s y el valor v son porcentajes de 0 a 100.
¿Cambia el matiz al convertir de HSV a HSL?
No. El matiz es compartido por ambos modelos y se copia sin cambios. Solo se recalculan la saturación y el eje valor-luminosidad.
¿Es la saturación HSV el mismo número que la saturación HSL?
No. Los modelos definen la saturación de forma distinta. Este conversor aplica la identidad de forma cerrada para que el color resultante coincida aunque los valores numéricos de S suelen diferir.
¿Qué ocurre en negro o en blanco pleno?
Cuando el valor es 0, la luminosidad es 0 y la saturación HSL es 0 (negro). Cerca de los extremos de luminosidad de blanco o negro puros, la saturación HSL se colapsa a 0 por la fórmula del intervalo unitario.
¿Cuánto cuesta el conversor HSV a HSL?
La herramienta del navegador es gratuita y se ejecuta en local.
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/hsv-hsl \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"h":210,"s":70,"v":80}'const res = await fetch("https://api.kit.forhosting.com/color/hsv-hsl", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"h": 210,
"s": 70,
"v": 80
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsv-hsl",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"h": 210,
"s": 70,
"v": 80
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsv-hsl", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"h":210,"s":70,"v":80}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"h":210,"s":70,"v":80}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsv-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
{
"h": 210,
"s": 70,
"v": 80
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsv_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
Los canales fuera de los rangos legales fallan con un error claro invalid_input, de modo que los tokens incorrectos no se envuelven ni se recortan en silencio.
Cómo se mapea HSV a HSL con el mismo matiz
El pipeline es aritmética de punto flotante pura, sin semillas aleatorias, sin marcas de tiempo de reloj y sin llamadas de red, de modo que entradas idénticas siempre producen el mismo JSON.
Qué se envía y qué se recibe a cambio
Envíe tres números finitos: el matiz h en grados de 0 a 360, la saturación HSV s como porcentaje de 0 a 100 y el valor v como porcentaje en la misma banda. Las comprobaciones clásicas incluyen el rojo medio puro en HSV con matiz 0, saturación 100 y valor 100, que mapea a luminosidad HSL 50 con saturación plena; el negro como valor 0 colapsando a negro acromático con luminosidad 0; y grises con saturación 0 que mapean a saturación HSL 0 con luminosidad igual a la mitad del valor de origen. Use el formulario gratuito del navegador para explorar paletas y revisiones de diseño, y luego invoque el contrato idéntico desde scripts cuando necesite conversión masiva de materiales de motor o tokens de temas móviles a HSL en CSS. Cada campo puede llegar como número JSON o como cadena numérica; se aceptan los alias hue, saturation, value y brightness por comodidad. Los campos ausentes, las cadenas no numéricas, NaN, Infinity y los canales fuera de rango fallan con invalid_input y no se cobran. En el éxito la respuesta repite h limpio, la saturación de origen como s_in, el valor de entrada v, la saturación HSL de salida s y la luminosidad l, objetos anidados hsv y hsl con los tripletes completos, y una nota breve de fórmula que reafirma la identidad del intervalo unitario. El precio de las llamadas API correctas es la base publicada de $0.002 por elemento; los fallos de validación no consumen saldo prepago.
Dónde aparece la conversión HSV a HSL en el trabajo real
Como esta capacidad es un motor de parse puro, el precio de la API es la base publicada de $0.002 por elemento exitoso y la validación fallida no consume saldo.
Casos de integración
Fixtures masivos y claves de currículo
Programe conversión determinista de HSV a HSL para fixtures de regresión, oráculos de tareas y exportaciones de paleta a $0.002 por elemento.