Conversor HSL↔HSV
Pase un color del HSL de los diseñadores al HSV de los editores de imagen: hsl(210, 80%, 45%) conserva el tono 210 y queda con un valor del 81 %, con la saturación recalculada para el nuevo modelo. Funciona en ambos sentidos. Gratis en su navegador.
- Gratis
- Funciona en su navegador
- Sin registro
- Sus datos no salen de su equipo
Ejecutar — gratis
Ejemplo resuelto
- Dirección de conversión
- hsl_to_hsv
- H
- 210
- S
- 80
- L
- 45
- S de entrada
- 80
- S
- 88,8888888889
- Voltaje (V)
- 81
HSL y HSV son dos modelos de color cilíndricos que comparten el mismo ángulo de matiz en la rueda, pero tratan de forma distinta el segundo y el tercer eje: HSL usa saturación y luminosidad, mientras que HSV usa saturación y valor (brillo). Los diseñadores suelen elegir colores en HSL porque la luminosidad se acerca al negro y al blanco de forma simétrica; en cambio, los motores de juego, editores de imagen y muchas cadenas de vídeo hablan en HSV porque el valor se corresponde de modo más directo con el brillo máximo del canal. Este conversor recibe una dirección —HSL a HSV o HSV a HSL—, el matiz en grados de 0 a 360, la saturación como porcentaje y la luminosidad o el valor como porcentaje de 0 a 100, y devuelve el triplete convertido con ambos objetos de modelo rellenados.
Cómo se relacionan HSL y HSV en el mismo matiz
El matiz es compartido: 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 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 el color plenamente cromático en el matiz elegido.
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. Como las geometrías difieren, la saturación numérica en HSL no es el mismo número que la saturación numérica en HSV 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: para HSL a HSV, el valor es igual a la luminosidad más la saturación HSL por el mínimo entre luminosidad y uno menos luminosidad, y la saturación HSV es 0 cuando el valor es 0; en caso contrario, dos veces uno menos luminosidad sobre el valor.
Para HSV a HSL, 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, la luminosidad y el valor deben situarse cada uno entre 0 y 100 por ciento inclusive.
Dónde aparece la conversión HSL a HSV en el trabajo real
Los sistemas de diseño suelen redactar 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; sin embargo, los temas nativos móviles, los selectores de materiales de Unity y Unreal, y muchas bibliotecas gráficas esperan HSV o HSB para controles de brillo orientados al artista.
Las herramientas de visualización de datos y arte generativo que exponen una rueda de matiz con deslizador de valor necesitan una inversa fiable al exportar tokens guardados como propiedades personalizadas HSL. 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 ajustan la luminosidad percibida en HSL y luego entregan a un editor basado en HSV aún necesitan un mapeo exacto de canales sin APIs exclusivas del navegador. Si más adelante necesita HSL 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 HSL a HSV.
Qué puede hacer con ella
Tokens de diseño entre herramientas HSL y HSV
Convierta rampas de marca HSL en tripletes HSV para temas móviles, selectores de materiales de juego y editores de imagen que exponen valor en lugar de luminosidad.
Tablas de parámetros de motor y sombreadores
Mapee muestras HSV de artistas de vuelta a HSL para sistemas de diseño CSS y tablas de documentación que deben permanecer bit-stable entre pipelines.
Preguntas frecuentes
¿Qué rangos aceptan el matiz, la saturación, la luminosidad y el valor?
El matiz h debe estar entre 0 y 360 grados inclusive. La saturación s, la luminosidad l y el valor v son porcentajes de 0 a 100.
¿La saturación HSL es el mismo número que la saturación HSV?
No. Los modelos definen la saturación de forma distinta. Este conversor aplica las identidades de forma cerrada para que el color resultante coincida, aunque los valores numéricos de S suelen diferir.
¿Cambia el matiz entre HSL y HSV?
No. El matiz es compartido por ambos modelos y se copia sin cambios. Solo se recalculan la saturación y el eje de luminosidad o valor.
¿Cuánto cuesta?
La herramienta del navegador es gratuita y se ejecuta en local.
¿Qué da hsl(210, 80%, 45%) en HSV?
El tono sigue en 210 y el valor pasa a ser del 81 %. La saturación sube por encima del 80 % original, porque HSV mide la viveza del color de otra manera que HSL.
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-hsv \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"direction":"hsl_to_hsv","h":210,"s":80}'const res = await fetch("https://api.kit.forhosting.com/color/hsl-hsv", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"direction": "hsl_to_hsv",
"h": 210,
"s": 80
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/color/hsl-hsv",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"direction": "hsl_to_hsv",
"h": 210,
"s": 80
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/color/hsl-hsv", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"direction":"hsl_to_hsv","h":210,"s":80}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"direction":"hsl_to_hsv","h":210,"s":80}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/color/hsl-hsv", 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
{
"direction": "hsl_to_hsv",
"h": 210,
"s": 80
}Ejemplo de respuesta
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "color.hsl_hsv",
"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 relacionan HSL y HSV en 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
Las comprobaciones clásicas incluyen el rojo medio puro en HSL con matiz 0, saturación 100 y luminosidad 50, que mapea a valor HSV 100 con saturación plena; el negro como luminosidad 0 o valor 0 colapsando a negro acromático; y grises con saturación 0 que mapean a saturación 0 en el otro modelo, con valor o luminosidad siguiendo el eje de brillo 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 tokens de diseño o materiales de motor. Envíe una cadena de dirección hsl_to_hsv o hsv_to_hsl, un matiz finito h en grados y una saturación finita s como porcentaje en el modelo de origen. Cuando la dirección es hsl_to_hsv debe enviar también la luminosidad l como porcentaje de 0 a 100; cuando la dirección es hsv_to_hsl debe enviar el valor v como porcentaje en la misma banda. 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 de HSL a HSV la respuesta repite la dirección limpia, h, la saturación de origen como s_in, la luminosidad de entrada l, la saturación HSV de salida s y el valor v, objetos anidados hsl y hsv, y una nota breve de fórmula. En el éxito de HSV a HSL la respuesta repite dirección, h, s_in, el valor de entrada v, la saturación HSL de salida s y la luminosidad l, objetos anidados hsv y hsl, y la nota de fórmula inversa. 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 HSL a HSV 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 de tokens y currículo
Programe conversión bidireccional para fixtures de regresión, claves de tareas y exportaciones de paleta con una API determinista a $0.002 por elemento.
Preguntas técnicas
¿Qué hace el campo de dirección?
Use hsl_to_hsv cuando la entrada es HSL (envíe h, s y l). Use hsv_to_hsl cuando la entrada es HSV (envíe h, s y v). Otras cadenas de dirección se rechazan.