Convertidor HEX a HSL

¿Qué es un convertidor HEX a HSL?

// Convert a hex color string to {h, s, l, alpha} per CSS Color 4 §6.4
// h in 0-360, s and l in 0-1, alpha in 0-1.
function hexToHsl(input) {
  let h = input.trim().replace(/^#/, '');
  if (h.length === 3 || h.length === 4) h = h.split('').map(c => c + c).join('');
  const r = parseInt(h.slice(0, 2), 16) / 255;
  const g = parseInt(h.slice(2, 4), 16) / 255;
  const b = parseInt(h.slice(4, 6), 16) / 255;
  const alpha = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
  const L = (max + min) / 2;
  const S = delta === 0 ? 0 : delta / (1 - Math.abs(2 * L - 1));
  let H = 0;
  if (delta !== 0) {
    if (max === r) H = ((g - b) / delta) % 6;
    else if (max === g) H = (b - r) / delta + 2;
    else H = (r - g) / delta + 4;
    H = (H * 60 + 360) % 360;
  }
  return { h: H, s: S, l: L, alpha };
}

console.log(hexToHsl('#3b82f6')); // { h: 217, s: 0.91, l: 0.60, alpha: 1 }

Características principales

Alternativas al convertidor HEX a HSL

Ejemplos de HEX a HSL

#3b82f6

#FF5733

#3b82f6

#FF573380

Conversiones HEX → HSL comunes

Tabla de referencia de los 10 códigos hex más convertidos y sus equivalentes HSL — primarios puros, secundarios puros, y dos colores de marca reales de la paleta de Tailwind.

Cómo usar el convertidor HEX a HSL

1. 1

   Pegue un código hex en el campo HEX

   Suelte cualquier valor hex en la entrada HEX — con o sin el `#` inicial, en abreviación de 3 dígitos (`#F73`), forma completa de 6 dígitos (`#3b82f6`), abreviación alfa de 4 dígitos (`#F738`), o forma completa alfa de 8 dígitos (`#FF573380`). La herramienta normaliza las cinco formas de entrada al mismo color canónico internamente. La capitalización no importa (`#3b82f6` y `#3B82F6` se analizan de forma idéntica). Caracteres inválidos o conteos de dígitos incorrectos producen un error discreto en línea; un hex válido actualiza cada otro campo de formato en tiempo real, incluido HSL.

2. 2

   Lea el triple HSL del campo HSL

   El campo HSL debajo del campo HEX muestra el valor `hsl()` correspondiente en la sintaxis moderna con espacios de CSS Color 4: `hsl(217 91% 60%)` para un color opaco, `hsl(217 91% 60% / 0.5)` para uno con alfa. El matiz es un grado entero de 0 a 360; la saturación y la luminosidad son porcentajes enteros de 0 a 100. Los valores se redondean para legibilidad en pantalla — la fuente de verdad interna OKLCH de la herramienta significa que la precisión subyacente es flotante, así que los viajes de ida y vuelta de regreso a hex permanecen estables.

3. 3

   Haga clic en Copiar para tomar la cadena HSL

   Cada tarjeta de formato tiene un botón Copiar a la derecha. Un clic y el valor aterriza en su portapapeles — la etiqueta del botón cambia brevemente a "¡Copiado!" para que lo sepa. La cadena copiada es la sintaxis canónica de CSS Color 4 (`hsl(217 91% 60%)`); si su objetivo necesita la forma heredada con comas (`hsl(217, 91%, 60%)`), la conversión es mecánica. Para salida específica de plataforma (Tailwind v4, SwiftUI, Compose, Flutter), use la sección Copiar como código debajo del selector — esos fragmentos emiten el formato que cada plataforma espera de forma nativa.

4. 4

   También visibles: RGB, OKLCH, OKLAB, HSV, HWB, CMYK, color con nombre

   El mismo hex que pega también ilumina los otros campos de formato — RGB para llamadas de canvas y hardware, OKLCH y OKLAB para sistemas de diseño perceptualmente uniformes, HSV y HWB para flujos de selector de color de diseñadores, CMYK para estimaciones de imprenta, y el color CSS con nombre más cercano para prosa de documentación. Nunca está atrapado en hex → HSL solamente. Si también necesita el triple OKLCH para un bloque `@theme` de Tailwind v4 (donde la luminosidad perceptual importa más que la L de HSL afectada por gamma), está justo ahí en el campo OKLCH con su propio botón Copiar.

5. 5

   Use el selector para barrer la luminosidad visualmente

   Debajo de la cuadrícula de formato hay un cuadrado SL + deslizador de matiz + deslizador de alfa para exploración visual. El cuadrado SL se asigna directamente al plano Saturación × Luminosidad de HSL: arrastre verticalmente para recorrer L del 0% al 100% mientras observa el campo HSL actualizarse en tiempo real. Útil para generar un tinte claro o matiz oscuro visualmente antes de fijar el porcentaje exacto. En navegadores basados en Chromium (Chrome, Edge, Brave) el botón EyeDropper activa la API nativa `EyeDropper` para muestrear cualquier píxel en pantalla, incluso fuera del navegador.

Errores comunes de HEX / HSL

Barrer L de HSL para una paleta de 9 pasos:
hsl(120 100% 50%) y hsl(240 100% 50%) al mismo L
Se ven visiblemente diferentes en brillo — la paleta se siente desigual.

Barrer L de OKLCH en su lugar:
oklch(0.7 0.2 130) y oklch(0.7 0.2 250)
Se ven igual de brillantes; la paleta se lee coherente en todos los matices.

Interpolación lineal de H=350 a H=10:
(350 + 10) / 2 = 180° (punto medio cian)
Incorrecto — va por el camino largo alrededor de la rueda.

Interpolación de matiz por camino corto:
punto medio = ((350 + 10 + 360) / 2) % 360 = 0° (punto medio rojo)
Va por el rojo, el camino corto alrededor de la rueda.

Pegar valores HSV de Photoshop en una regla CSS hsl():
HSB de Photoshop 0, 100, 100 (rojo puro)
CSS hsl(0 100% 100%) se renderiza como blanco — color completamente equivocado.

Convertir HSV → HSL antes de pegar en CSS:
HSV 0, 100, 100 → HSL 0, 100%, 50%
CSS hsl(0 100% 50%) se renderiza como rojo puro — correcto.

Emitir HSL sin signos de porcentaje:
hsl(217 91 60)
Error de análisis CSS — cada navegador ignora la regla entera.

Emitir HSL con signos de porcentaje en S y L:
hsl(217 91% 60%)
CSS válido — funciona en todos los navegadores evergreen e IE 9+.

Quién usa HEX a HSL

Desarrolladores frontend definiendo variables CSS HSL

Defina `--primary: hsl(217 91% 60%)` una vez desde el hex de Figma, luego componga `--primary-hover: hsl(217 91% 70%)`, `--primary-active: hsl(217 91% 50%)`, `--primary-bg: hsl(217 91% 95%)` ajustando solo el número L. Pegue el hex una vez, lea el triple HSL, suéltelo en el bloque de propiedades personalizadas CSS. El patrón que los sistemas de diseño heredados usaban para mantener los tintes claros y matices oscuros tonalmente coherentes antes de que las rampas basadas en OKLCH tomaran el relevo.

Diseñadores traduciendo hex al selector HSL

Los diseñadores criados con selectores de matiz + saturación + valor (Adobe, Sketch, el modo HSB de Figma) a menudo quieren el triple HSL incluso cuando el archivo fuente entrega hex. Pegar el hex una vez produce el HSL correspondiente, listo para leer en la posición mental de rueda cromática del diseñador sin una conjetura manual. Útil cuando se revisa una especificación de color de marca y se quiere saber dónde se sitúa en la rueda de matices relativa a otros colores de marca de la familia.

Autores de sistemas de temas computando tokens de modo oscuro

La tematización de modo oscuro a menudo invierte L manteniendo H y S — un `hsl(217 91% 60%)` primario de modo claro se asigna a un `hsl(217 91% 40%)` (o similar) de modo oscuro. Pegue el hex de modo claro, lea el HSL, compute la L del modo oscuro, escriba el nuevo HSL de vuelta en el token del tema oscuro. El patrón es mecánico cuando tiene el triple HSL; es mucho más laborioso hacerlo con canales RGB en crudo.

Autores de sistemas de diseño generando rampas de tintes claros y matices oscuros

Genere una rampa de tintes claros/matices oscuros de 9 pasos barriendo L: `hsl(217 91% 95%)` (más claro), 85%, 75%, 65%, 55%, 45%, 35%, 25%, `hsl(217 91% 15%)` (más oscuro). Pegue el hex base, lea el HSL, barra L en pasos del 10% mentalmente o en código. (Para rampas perceptualmente uniformes donde cada paso se ve igual de brillante, cambie al campo OKLCH al lado — las rampas HSL se ven desiguales entre matices porque L no es perceptualmente uniforme.)

Autores CSS usando matemáticas hsl(from ...) en tiempo de ejecución

El CSS moderno soporta la sintaxis `color-function-from`: `hsl(from var(--primary) h s calc(l + 10%))` deriva una variante más clara de `--primary` en tiempo de renderizado, sin precomputar cada paso. Pegue el hex de marca, confirme el triple HSL, suelte la base en una variable CSS, y use las matemáticas en tiempo de ejecución para tokens derivados. Viene en Chrome 119+, Safari 17.2+, Firefox 128+.

Desarrolladores frontend construyendo conjuntos de tokens HSL de Tailwind v3

Tailwind v3 almacenaba los colores del tema como triples HSL separados por espacios en variables CSS (`--primary: 217 91% 60%`), compuestos vía `hsl(var(--primary))` en `tailwind.config.js`. Pegue el hex de marca, lea el HSL, suelte los tres números (sin el envoltorio `hsl(...)`) en la definición de variable. Tailwind v4 desde entonces ha pivotado a OKLCH-primero, pero los bases de código v3 todavía usan el patrón HSL y lo harán durante años.

Autores de UI de selector de color asignando hex a controles HSL

Construir un selector de color que expone matiz / saturación / luminosidad como tres deslizadores separados (la UI clásica al estilo de Adobe) significa asignar un hex entrante a los tres controles del selector. Pegue el hex aquí, lea el triple HSL, posicione los tres deslizadores programáticamente. La conversión es la misma que su selector ejecutaría internamente; esta herramienta expone los valores intermedios para depuración.

Ingenieros de accesibilidad ajustando la luminosidad del color de marca para contraste

Cuando un color de marca falla el contraste WCAG contra un fondo, la solución barata es subir L hasta que la proporción pase — sin cambiar H o S, el color sigue leyéndose como la misma identidad de marca. Pegue el hex de marca, observe las insignias de contraste, ajuste L mentalmente (o use el eje L del selector) hasta que tanto WCAG como APCA pasen. El campo HSL expone el nuevo porcentaje L para el documento de especificación; el campo hex expone el código correspondiente para la hoja de estilos.

Matemáticas y análisis de HEX a HSL

HEX → RGB → HSL es una canalización de dos pasos

La conversión pasa por RGB como intermedio. Paso uno: analice hex a enteros RGB vía `parseInt(hex.slice(1, 3), 16)` por canal. Paso dos: normalice RGB a 0-1, compute `max`/`min`/`delta`, aplique la trigonometría a trozos de CSS Color 4 §6.4: `L = (max + min) / 2`, `S = delta / (1 - |2L - 1|)`, `H = a trozos * 60`. La estructura de dos pasos es por qué la herramienta también expone la tupla RGB intermedia — es gratis de mostrar y útil para depuración.

CSS Color 4 §6.4 define el algoritmo de referencia

La especificación W3C CSS Color 4 §6.4 (algoritmo `rgb()` a `hsl()`) define las matemáticas canónicas a trozos: luminosidad como el punto medio de max y min, saturación como `delta / (1 - |2L - 1|)` (con S = 0 cuando delta = 0, para evitar división por cero en grises), matiz como una trigonometría de 60-grados-por-paso según qué canal sea el máximo. La especificación también maneja casos extremos: el negro puro (`#000`) produce `hsl(0 0% 0%)` con un matiz arbitrario de 0°; el blanco puro (`#FFF`) produce `hsl(0 0% 100%)` similarmente; el gris puro produce `hsl(0 0% 50%)`.

El matiz envuelve a 360°, S y L son porcentajes

Los tres ejes de HSL tienen unidades diferentes. El matiz es un grado angular de 0 a 360 con envoltura — `hsl(370 ...)` se interpreta como `hsl(10 ...)` porque las posiciones angulares envuelven. La saturación y la luminosidad son porcentajes del 0% al 100%, sin envoltura; los valores fuera de rango se recortan. CSS Color 4 también acepta matiz en vueltas (`hsl(0.6turn ...)`) o radianes (`hsl(3.787rad ...)`); la salida de la herramienta usa grados porque esa es la forma más común en las UIs de herramientas de diseño y los documentos de especificación de marca.

La luminosidad HSL NO es perceptualmente uniforme

Un verde a `hsl(120 100% 50%)` se ve visiblemente más brillante que un azul a `hsl(240 100% 50%)`, aunque ambos tengan la misma Luminosidad nominal — porque HSL hereda las peculiaridades de gamma de sRGB y usa la misma escala L en cada matiz. Por eso las rampas de tintes claros basadas en HSL se ven desiguales (el extremo claro de la rampa verde sube más rápido que el extremo claro de la rampa azul) y por qué los sistemas de diseño han migrado en gran parte a OKLCH para generación de rampas. La herramienta expone tanto HSL como OKLCH para que la elección esté a un vistazo de distancia.

Fuente de verdad interna OKLCH para estabilidad de ida y vuelta

Aunque este radio apunta a HEX → HSL específicamente, el convertidor subyacente compartido mantiene el color canónico como un triple OKLCH internamente. HEX → HSL → RGB → OKLAB → HEX hace ida y vuelta manteniéndose bit-estable; los convertidores heredados con pivote HSL acumulan error de redondeo y pueden desviar el matiz varios grados a lo largo de unas pocas conversiones. El pivote OKLCH también preserva el matiz como un eje estable, así que arrastrar el deslizador de matiz no cruza accidentalmente por gris. Según el artículo de OKLAB de Björn Ottosson de 2020.

Codificación de canal: 8 bits sin signo, sRGB codificado en gamma

Los códigos hex codifican canales RGB sin signo de 8 bits (0-255) en el espacio de color sRGB definido por IEC 61966-2-1 (1996). Los valores están *codificados en gamma* — la relación entre el valor de canal y el brillo percibido es no lineal, siguiendo la función de transferencia sRGB a trozos (aproximadamente un exponente 2.4 con un pequeño segmento lineal cerca de cero). HSL se deriva directamente de estos valores RGB codificados en gamma sin ningún paso de linealización, que es la causa raíz del problema de uniformidad perceptual de HSL. OKLCH lineariza primero y luego re-asigna a un espacio perceptualmente uniforme; HSL no.

Buenas prácticas para flujos HEX / HSL

Use la sintaxis HSL moderna con espacios en código nuevo

`hsl(217 91% 60%)` (con espacios) y `hsl(217 91% 60% / 0.5)` (barra para alfa) de CSS Color 4 son las sintaxis canónicas para código enviado en 2025 y posteriores. Las formas heredadas con comas `hsl(217, 91%, 60%)` y `hsla(217, 91%, 60%, 0.5)` siguen soportadas en todas partes pero están estilísticamente desaconsejadas en CSS Color 4. Use la sintaxis moderna en hojas de estilo nuevas; mantenga `hsla()` solo para contextos de fallback de IE 9-11 donde genuinamente necesite soporte heredado.

Genere rampas en OKLCH, no en HSL

El eje de Luminosidad de HSL no es perceptualmente uniforme — un barrido L de 9 pasos produce una rampa donde los pasos verdes se ven más brillantes que los pasos azules en cada valor L. Para rampas donde cada paso debería verse igual de brillante (la petición por defecto de un sistema de diseño), genere en OKLCH en su lugar: `oklch(0.7 0.15 217)`, `oklch(0.6 0.15 217)`, etc. La herramienta expone tanto HSL como OKLCH para el mismo hex, así que cambiar entre los dos está a un clic de Copiar de distancia.

Fije el matiz y la saturación, barra la luminosidad

Al usar HSL para trabajo de tintes claros/matices oscuros, cambie solo el número L — mantenga H y S idénticos en toda la rampa. La deriva del matiz (incluso por 5°) hace que una rampa se vea desordenada. La deriva de saturación hace que el extremo claro se vea desvaído y el extremo oscuro se vea turbio. La disciplina de un-eje-a-la-vez es lo que da a HSL su reputación amigable para el diseño; abandonarla le da lo peor de ambos mundos.

Prefiera hex para tokens fuente de verdad, HSL para variantes computadas

Cuando escriba una especificación de tokens de diseño, prefiera hex (u OKLCH) como forma canónica — son más escuetos y caben limpiamente en JSON o YAML. HSL es más útil para tokens *derivados* en tiempo de ejecución (`hsl(from var(--primary) h s calc(l + 10%))`) que como formato de fuente de verdad. Los dos formatos describen el mismo color; la elección es sobre qué papel juega el token en el sistema.

Documente las variantes HSL con el hex base

Cuando envíe una variable CSS como `--primary-light: hsl(217 91% 70%)`, incluya un comentario apuntando de vuelta al hex base: `/* base: #3b82f6 → hsl(217 91% 60%), variante clara +10% L */`. Seis meses después, cuando alguien quiera derivar `--primary-lighter`, necesita el color base para computar desde — y HSL por sí solo no expone eso. El hex + HSL juntos preservan la procedencia completa.

Use el hash de URL para compartir decisiones de color en vivo

Cada cambio de color actualiza el hash de URL como `#hex=3b82f6` automáticamente. Copie la URL en un hilo de Slack o issue de GitHub y cualquiera que la abra aterrizará en el mismo color con el mismo triple HSL. Esto es más fiable que pegar una cadena HSL en chat — los destinatarios a veces escriben mal el grado o se saltan un signo de porcentaje al introducir el valor manualmente — y permite a un hilo de revisión de diseño hacer referencia a un color exacto en lugar de "el azul que discutimos el martes". El hash nunca se transmite al servidor.

Preguntas frecuentes