Conversor de HEX a HSL — Obtén Valores HSL desde Cualquier Color Hexadecimal

Los códigos hexadecimales son la forma de escribir los colores, pero HSL es la forma en que los diseñadores piensan de verdad en ellos: un tono que puedes girar, una saturación que puedes calmar y una luminosidad que puedes subir y bajar para construir estados hover y sombras. Este conversor de HEX a HSL une ambos mundos. Escribe o elige cualquier color hexadecimal — la forma completa de 6 dígitos como #0f766e o la abreviada de 3 — y obtendrás el triplete HSL (tono en grados, saturación y luminosidad como porcentajes), los valores RGB y una línea hsl() lista para CSS, todo con una muestra en vivo para que los números nunca sean una adivinanza. Todo funciona en tu navegador con aritmética de color sencilla: cada par hexadecimal es un canal RGB, y HSL es el mismo color descrito sobre un cilindro en vez de un cubo. Sin subidas, sin registro, nada sale de la página.

Cómo un código hexadecimal se convierte en HSL

Empieza por los canales. En #0f766e los pares se leen 0f = 15 de rojo, 76 = 118 de verde y 6e = 110 de azul. HSL hace después tres preguntas distintas sobre ese color. El tono es el ángulo en la rueda de color: como el verde es el canal más fuerte y el azul le sigue de cerca, el ángulo cae cerca de 175°, la zona verde azulada de la rueda. La luminosidad es el punto medio entre el canal más fuerte y el más débil, (118 + 15) / 2 en la escala de 0 a 255, lo que da cerca de un 26 %. La saturación mide lo lejos que está el color del gris a esa luminosidad: aquí la distancia entre el canal mayor y el menor es grande, así que la saturación es un vivo 77 %. Eso es exactamente lo que muestra la herramienta para el color por defecto — h 175, s 77 %, l 26 % — y puedes comprobar la misma matemática con el rojo puro #ff0000, que da la respuesta de manual hsl(0, 100 %, 50 %).

¿Para qué convertir de HEX a HSL?

Porque el hexadecimal es un formato de almacenamiento, no de pensamiento. Nadie mira #0f766e y sabe cómo debería ser su versión más clara, pero en HSL el trabajo es trivial: mantén h 175 y s 77, sube l del 26 % al 40 %, y tienes un tono claro que es sin duda de la misma familia. Las paletas de interfaces, las series de gráficos y los colores de estado (hover, activo, deshabilitado) se construyen así: un tono, luminosidad por pasos. HSL también ayuda en accesibilidad: oscurecer un color de texto hasta que pase un objetivo de contraste significa bajar la luminosidad en pasos pequeños y honestos en vez de adivinar nuevos valores hexadecimales. Y en el CSS moderno, hsl() es ciudadano de primera, así que el valor convertido se pega directamente en tu hoja de estilos sin más traducción.

Casos límite que conviene conocer

Los grises son la excepción honesta: cuando los tres canales son iguales, el tono y la saturación son matemáticamente indefinidos, y este conversor informa h 0, s 0 % — solo la luminosidad tiene significado. El negro es l 0 % y el blanco l 100 %. La forma corta de 3 dígitos duplica cada dígito, así que #0f8 se expande a #00ff88 antes de convertir; una cadena hexadecimal con cualquier otra longitud se rechaza en vez de adivinarse. El canal alfa queda fuera de alcance aquí: un hex de 8 dígitos con transparencia necesita una herramienta que entienda HSLA, y recortar el par alfa en silencio informaría mal del color, así que la respuesta honesta para esos casos es otro conversor.

Preguntas frecuentes

¿Qué HSL es #0f766e?

hsl(175, 77 %, 26 %): un verde azulado profundo. El conversor viene precargado con él para que veas el ejemplo completo en cuanto se abre la página.

¿HSL es lo mismo que HSV (HSB)?

No. Comparten el ángulo del tono, pero la luminosidad (HSL) y el valor/brillo (HSV) son escalas distintas: el mismo color tiene números diferentes en cada una. Esta herramienta convierte a HSL específicamente.

¿Puedo escribir el hex sin el símbolo #?

Sí, el # es opcional, y funcionan tanto la forma de 6 dígitos como la de 3. Las mayúsculas y minúsculas se tratan igual.

¿La herramienta guarda o sube mis colores?

No. La conversión es aritmética hecha con JavaScript en tu navegador; no se envía nada a ningún sitio, y al cerrar la pestaña se olvida todo.

Herramientas relacionadas

English version: Hex to HSL Converter — Get HSL Values from Any Hex Colour. También te puede interesar: Conversor de RGB a HSL — Convierte Colores RGB a HSL al Instante · Conversor de HSL a RGB — Convierte Colores HSL en RGB y Hexadecimal.

Inserta esta herramienta en tu web — gratis

Copia el código de abajo para añadir esta herramienta funcional a tu propia página. Solo pedimos que mantengas el pequeño enlace de crédito que la acompaña.

<iframe srcdoc="&lt;!DOCTYPE html&gt; &lt;html lang=&quot;es&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt; &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt; &lt;title&gt;Conversor de HEX a HSL — Obtén Valores HSL desde Cualquier Color Hexadecimal&lt;/title&gt; &lt;style&gt; body{font-family:Arial,sans-serif;background-color:#f4f4f9;padding:16px;margin:0} .container{background:#fff;padding:20px;border-radius:8px;box-shadow:0 0 10px rgba(0,0,0,.1);max-width:680px;margin:0 auto} h2{margin:0 0 6px;color:#0f3d3e;font-size:22px} p.sub{margin:0 0 14px;color:#555;font-size:14px} label{font-weight:600;font-size:14px;display:block;margin:10px 0 4px} input[type=text],input[type=number],select{width:100%;box-sizing:border-box;padding:11px;font-size:16px;border:1px solid #cbd5e1;border-radius:6px;background:#fff} .row{display:flex;gap:10px;flex-wrap:wrap} .row&gt;*{flex:1;min-width:140px} button{background:#0f766e;color:#fff;border:0;padding:11px 22px;font-size:16px;border-radius:6px;cursor:pointer;margin-top:12px} button:hover{background:#115e59} button:disabled{background:#94a3b8;cursor:wait} #status{font-size:13px;color:#666;margin-top:10px;min-height:16px} .err{color:#b91c1c} .card{border:1px solid #e2e8f0;border-radius:8px;padding:12px 14px;margin-top:12px;background:#f8fafc} .big{font-size:26px;font-weight:700;color:#0f3d3e} table{width:100%;border-collapse:collapse;margin-top:10px;font-size:14px} th,td{text-align:left;padding:7px 8px;border-bottom:1px solid #e2e8f0} th{color:#0f3d3e} .bar{height:10px;background:#e2e8f0;border-radius:5px;overflow:hidden} .bar&gt;i{display:block;height:100%;background:#0f766e} img.cover{max-width:120px;border-radius:6px} &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;div class=&quot;container&quot;&gt; &lt;h2&gt;Conversor de HEX a HSL&lt;/h2&gt; &lt;p class=&quot;sub&quot;&gt;Escribe cualquier color hexadecimal — #0f766e o la forma corta 0f8 — y obtén su HSL, su RGB y el CSS listo para pegar, con una muestra en vivo.&lt;/p&gt; &lt;div class=&quot;row&quot;&gt; &lt;div style=&quot;flex:2&quot;&gt;&lt;label for=&quot;hexin&quot;&gt;Color hexadecimal&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;hexin&quot; value=&quot;#0f766e&quot; spellcheck=&quot;false&quot; style=&quot;font-family:monospace;font-size:18px&quot;&gt;&lt;/div&gt; &lt;div&gt;&lt;label for=&quot;picker&quot;&gt;Elegir&lt;/label&gt;&lt;input type=&quot;color&quot; id=&quot;picker&quot; value=&quot;#0f766e&quot; style=&quot;width:100%;height:47px;padding:2px;border:1px solid #cbd5e1;border-radius:6px;background:#fff&quot;&gt;&lt;/div&gt; &lt;/div&gt; &lt;div id=&quot;swatch&quot; style=&quot;height:64px;border-radius:8px;margin:14px 0;border:1px solid #e2e8f0&quot;&gt;&lt;/div&gt; &lt;label&gt;HSL&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;hslout&quot; readonly style=&quot;font-family:monospace&quot;&gt;&lt;label&gt;RGB&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;rgbout&quot; readonly style=&quot;font-family:monospace&quot;&gt;&lt;label&gt;CSS&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;cssout&quot; readonly style=&quot;font-family:monospace&quot;&gt; &lt;p id=&quot;err&quot; class=&quot;err&quot; data-msg=&quot;Eso no es un color hexadecimal válido: usa 3 o 6 dígitos hexadecimales.&quot; style=&quot;font-size:14px;min-height:16px&quot;&gt;&lt;/p&gt; &lt;/div&gt; &lt;script&gt; function sendH(){ try { parent.postMessage({wpcId: 6273, wpcH: document.body.scrollHeight + 16}, &#x27;*&#x27;); } catch (e) {} } window.addEventListener(&#x27;load&#x27;, sendH); window.addEventListener(&#x27;resize&#x27;, sendH); //==CORE== function parseHex(hex){ if (typeof hex !== &#x27;string&#x27;) return null; var s = hex.trim().replace(/^#/, &#x27;&#x27;); if (/^[0-9a-fA-F]{3}$/.test(s)) s = s.split(&#x27;&#x27;).map(function(c){ return c + c; }).join(&#x27;&#x27;); if (!/^[0-9a-fA-F]{6}$/.test(s)) return null; return { r: parseInt(s.substring(0, 2), 16), g: parseInt(s.substring(2, 4), 16), b: parseInt(s.substring(4, 6), 16) }; } function rgbToHex(r, g, b){ function part(v){ v = Math.max(0, Math.min(255, Math.round(v))); return (&#x27;0&#x27; + v.toString(16)).slice(-2); } return &#x27;#&#x27; + part(r) + part(g) + part(b); } function rgbToHsl(r, g, b){ r /= 255; g /= 255; b /= 255; var max = Math.max(r, g, b), min = Math.min(r, g, b); var h = 0, s = 0, l = (max + min) / 2; if (max !== min){ var d = max - min; s = l &gt; 0.5 ? d / (2 - max - min) : d / (max + min); if (max === r) h = (g - b) / d + (g &lt; b ? 6 : 0); else if (max === g) h = (b - r) / d + 2; else h = (r - g) / d + 4; h *= 60; } return { h: Math.round(h), s: Math.round(s * 100), l: Math.round(l * 100) }; } function hslToRgb(h, s, l){ h = ((h % 360) + 360) % 360; s = Math.max(0, Math.min(100, s)) / 100; l = Math.max(0, Math.min(100, l)) / 100; var c = (1 - Math.abs(2 * l - 1)) * s; var x = c * (1 - Math.abs(((h / 60) % 2) - 1)); var m = l - c / 2, r = 0, g = 0, b = 0; if (h &lt; 60){ r = c; g = x; } else if (h &lt; 120){ r = x; g = c; } else if (h &lt; 180){ g = c; b = x; } else if (h &lt; 240){ g = x; b = c; } else if (h &lt; 300){ r = x; b = c; } else { r = c; b = x; } return { r: Math.round((r + m) * 255), g: Math.round((g + m) * 255), b: Math.round((b + m) * 255) }; } function rgbToCmyk(r, g, b){ var rp = r / 255, gp = g / 255, bp = b / 255; var k = 1 - Math.max(rp, gp, bp); if (k &gt;= 0.9999) return { c: 0, m: 0, y: 0, k: 100 }; var d = 1 - k; return { c: Math.round(((1 - rp - k) / d) * 100), m: Math.round(((1 - gp - k) / d) * 100), y: Math.round(((1 - bp - k) / d) * 100), k: Math.round(k * 100) }; } function cmykToRgb(c, m, y, k){ c /= 100; m /= 100; y /= 100; k /= 100; return { r: Math.round(255 * (1 - c) * (1 - k)), g: Math.round(255 * (1 - m) * (1 - k)), b: Math.round(255 * (1 - y) * (1 - k)) }; } //==/CORE== var hexIn = document.getElementById(&#x27;hexin&#x27;), picker = document.getElementById(&#x27;picker&#x27;), err = document.getElementById(&#x27;err&#x27;); function run(){ var c = parseHex(hexIn.value); if (!c){ err.textContent = err.getAttribute(&#x27;data-msg&#x27;); return; } err.textContent = &#x27;&#x27;; var hsl = rgbToHsl(c.r, c.g, c.b); document.getElementById(&#x27;hslout&#x27;).value = hsl.h + &#x27;, &#x27; + hsl.s + &#x27;%, &#x27; + hsl.l + &#x27;%&#x27;; document.getElementById(&#x27;rgbout&#x27;).value = c.r + &#x27;, &#x27; + c.g + &#x27;, &#x27; + c.b; document.getElementById(&#x27;cssout&#x27;).value = &#x27;hsl(&#x27; + hsl.h + &#x27;, &#x27; + hsl.s + &#x27;%, &#x27; + hsl.l + &#x27;%)&#x27;; document.getElementById(&#x27;swatch&#x27;).style.background = rgbToHex(c.r, c.g, c.b); picker.value = rgbToHex(c.r, c.g, c.b); if (window.sendH) sendH(); } hexIn.addEventListener(&#x27;input&#x27;, run); picker.addEventListener(&#x27;input&#x27;, function(){ hexIn.value = picker.value; run(); }); run(); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; " id="wpc-frame-6273" class="wpc-embed-frame" style="width:100%;border:0;display:block;overflow:hidden;" scrolling="no"></iframe> <p><a href="https://ilmhunt.com/conversor-de-hex-a-hsl/" target="_blank" rel="noopener">Conversor de HEX a HSL — Obtén Valores HSL desde Cualquier Color Hexadecimal</a> by <a href="https://ilmhunt.com/" target="_blank" rel="noopener">IlmHunt</a> — herramientas gratis en línea</p>