ForHosting KIT · Imágenes

Convertidor hex a HSL

Pase un código hex a valores que se ajustan a ojo: #FF8040 equivale a tono 20,1°, saturación 100 % y luminosidad 62,55 %, listo para pegar como hsl(20.1 100% 62.55%). Gratis en su navegador.

  • Gratis
  • Funciona en su navegador
  • Sin registro
  • Sus datos no salen de su equipo
Úselo desde WebAPIEmailTelegramApp pronto
Si escribe
Hexa
#FF8040
Obtiene
Dígitos hex
FF8040
Resistencia (Ω)
255
G
128
B
64

Diseñadores, desarrolladores front-end y sistemas de marca suelen guardar colores como códigos hex como #FF8040 o la forma corta #f80, pero necesitan tono, saturación y luminosidad para ajustar el matiz sin alterar el brillo, construir variables CSS o alimentar tokens de diseño sensibles al color. Este convertidor hex a HSL acepta un código hexadecimal de tres o seis dígitos con o sin numeral inicial, expande las formas abreviadas como lo hace CSS, ejecuta una conversión determinista estilo sRGB y devuelve el tono en grados más saturación y luminosidad en porcentajes, junto con cadenas CSS hsl modernas y clásicas que puede pegar en hojas de estilo. Los códigos hex no válidos—longitud incorrecta, caracteres no hex o un campo ausente—fallan con un error claro de entrada no válida para que los datos malos nunca se conviertan en un clamp silencioso.

Cómo introducir un código hex y qué calcula la conversión

Proporcione un campo de cadena llamado hex con un código de color hexadecimal de tres o seis dígitos. El numeral inicial es opcional, así que se aceptan #FF8040 y FF8040, al igual que formas cortas como #f80 y f80. Se ignora mayúsculas y minúsculas: dígitos en minúscula, mayúscula o mixtos se normalizan al mismo resultado.

Los códigos de tres dígitos se expanden duplicando cada dígito—f80 se convierte en FF8800—siguiendo la regla de abreviatura de color CSS de los navegadores. Tras la expansión el motor analiza dos dígitos hex por canal en enteros rojo, verde y azul de cero a 255, luego normaliza cada canal dividiendo entre 255 para que los valores queden en el intervalo unitario. Encuentra el máximo y el mínimo de esos tres componentes normalizados y el croma como su diferencia.

La luminosidad es la mitad de la suma de máximo y mínimo. Cuando el croma es cero el color es acromático: el tono es cero y la saturación es cero, dejando solo la luminosidad para describir grises desde negro hasta blanco pasando por gris medio. Cuando el croma es positivo, la saturación es el croma dividido entre uno menos el valor absoluto de dos veces la luminosidad menos uno, la fórmula estándar de saturación HSL usada en CSS y pilas gráficas.

El tono se construye desde el sector de la rueda de color donde se sitúa el canal máximo: dominante en rojo, verde o azul, escalado a grados en el rango semiabierto de cero hasta 360.

Tokens CSS y de diseño desde colores hex de marca

Convierta muestras hex de herramientas de diseño a HSL para que los temas ajusten tono o luminosidad manteniendo políticas de saturación coherentes en modos claro y oscuro.

Pipelines de paleta y marca

La automatización que parte de colores hex de marca obtiene componentes HSL para generar tintas, sombras y variantes de acento sin aceptar códigos mal formados en silencio.

¿Cómo convierto un color hex a HSL con esta herramienta?

La respuesta incluye h, s, l, canales RGB, cadenas CSS y un objeto hsl anidado.

¿Qué ocurre si el código hex no es válido?

Solo se aceptan 3 o 6 dígitos hexadecimales (# inicial opcional). Longitud incorrecta o caracteres no hex se rechazan y no se cobran.

¿Son el tono, la saturación y la luminosidad porcentajes o fracciones 0–1?

El tono está en grados de 0 hasta 360. Saturación y luminosidad son porcentajes de 0 a 100, alineados con el uso habitual de hsl() en CSS.

¿Es gratuito el convertidor hex a HSL?

La herramienta del navegador se ejecuta gratis en su dispositivo.

¿Puedo usar códigos hex cortos de tres dígitos?

Sí. Códigos como #f80 se expanden a #FF8800 duplicando cada dígito, siguiendo las reglas de abreviatura CSS, y luego se convierten a HSL.

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.

POSThttps://api.kit.forhosting.com/color/hex-hsl

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

curl -X POST https://api.kit.forhosting.com/color/hex-hsl \
  -H "Authorization: Bearer $KIT_KEY" \
  -H "Content-Type: application/json" \
  -d '{"hex":"#FF8040"}'
{
  "hex": "#FF8040"
}
{
  "task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
  "type": "color.hex_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.

Por solicitud$0.002

Precio publicado — sin tokens ni créditos inventados. Una tarea fallida no se cobra.

HTTPCódigoSignificado
401unauthorizedAPI key ausente o inválida.
402insufficient_balanceEl saldo no cubre el precio de la tarea.
404unknown_typeEl tipo de tarea no existe.
429rate_limitedDemasiadas peticiones. Use el webhook en vez de sondear.

Cómo introducir un código hex y qué calcula la conversión

Los alias color, colour, value y hex_code mapean al mismo campo cuando los clientes prefieren esos nombres. Entradas idénticas siempre producen JSON idéntico porque la ruta es aritmética pura sin red, sin semilla aleatoria y sin reloj de pared.

Lectura de tono, saturación, luminosidad, eco RGB y cadenas CSS

Luego expone h, s y l para tono en grados, saturación en por ciento y luminosidad en por ciento. El rojo puro #FF0000 produce tono cero con saturación plena y luminosidad media; el verde puro #00FF00 y el azul puro #0000FF caen cerca de 120 y 240 grados respectivamente; canales iguales como #808080 producen grises con saturación cero. En éxito la respuesta incluye la cadena hex normalizada con numeral inicial y seis dígitos en mayúsculas, el campo hex_digits sin el numeral, y los canales r, g y b expandidos para verificar el parseo o encadenar con herramientas solo RGB. Los mismos tres números reaparecen bajo los nombres largos hue, saturation y lightness, y anidados dentro de un objeto hsl, de modo que el código de UI, demos de SDK y evaluadores puedan elegir la forma que encaje sin mapeo extra. Se incluyen dos cadenas listas para pegar: hsl_css usa la forma moderna CSS Color Module separada por espacios como hsl(20.1 100% 62.55%), y hsl_legacy usa la forma clásica con comas y paréntesis que aún esperan los analizadores antiguos. El campo method es siempre hex_to_hsl para que los enrutadores posteriores puedan ramificar sin husmear formas. Hex ausente, cadenas vacías, caracteres no hex y longitudes distintas de tres o seis dígitos fallan con invalid_input y no se cobran tras el rechazo del motor.

Uso de la API, precios, flujos de diseño y límites prácticos

Use el convertidor hex a HSL gratuito en el navegador para ajustes de paleta, demos de clase y comprobaciones rápidas sin instalar una biblioteca de color. Combine salidas HSL con comprobadores de contraste al construir temas accesibles, o alimente cambios de tono en pipelines de tokens de marca que mantienen fija la luminosidad mientras rotan colores de acento derivados de una muestra hex de marca. Envíe un cuerpo JSON con la cadena requerida hex fijada a un código de color de tres o seis dígitos. Use la API prepago cuando un sistema de diseño, generador de temas, pipeline de accesibilidad o herramienta de color de comercio electrónico necesite un contrato estable bajo saldo KIT a $0.002 por ítem exitoso; los fallos de validación nunca consumen saldo tras el rechazo del motor. Prefiera este endpoint cuando la intención de búsqueda y el marco del producto sean específicamente hex a HSL con validación estricta de código; para triples de canal RGB use el convertidor RGB a HSL dedicado, y para conversión multi-formato entre HEX, RGB, HSL, LAB y CMYK en una sola llamada use el convertidor de color más amplio del catálogo. Autores que publican SDK pueden mapear h, s y l directamente a controles de formulario o propiedades personalizadas CSS sin reimplementar el parseo hex y la conversión en cada lenguaje.

Enseñanza y evaluación de matemáticas del color

Cursos y evaluaciones de código comprueban respuestas hex→HSL de estudiantes frente a JSON determinista, con invalid_input claro cuando el código hex está mal formado.

Ver la documentación completa del KIT →