Convierte un código HEX a HSL
Escribe un código HEX y los valores HSL aparecen mientras escribes: #3B82F6 es hsl(217.2, 91.2%, 59.8%). El resultado tiene un decimal, así que al volver a escribirlo obtienes el mismo color. El selector te da la notación CSS o los números 0–255 del cuadro Colores de Office.
¿Cómo se convierte HEX a HSL?
Separa el código en sus tres canales RGB y divide cada uno entre 255. Los canales extremos dan la luminosidad y la saturación, y el más alto fija el tono[1].
Fórmula: L = (máx + mín) ÷ 2, S = (máx − L) ÷ mín(L, 1 − L), y H es un ángulo contado desde el canal más alto.
Toma #3B82F6. Los canales valen 59, 130 y 246. Divididos entre 255 dan 0,231, 0,510 y 0,965. La media del canal más alto y el más bajo es 0,598, así que la luminosidad es del 59,8%. La fórmula de la saturación da 91,2%.
El canal más fuerte es el azul, por eso el cálculo del tono empieza en 240 grados. El rojo es más débil que el verde, así que se restan 22,8 grados y el tono queda en 217,2°. El color completo en CSS es hsl(217.2, 91.2%, 59.8%).
El primer paso lo hace el convertidor de HEX a RGB, y el convertidor de RGB a HSL parte de valores RGB.
¿Qué es el modelo de color HSL?
HSL describe un color con tres valores. El tono (en inglés hue) es un ángulo en el círculo cromático, donde 0° es rojo, 120° es verde y 240° es azul. La saturación indica cuánto color hay: 0% da un gris y 100% el color pleno. La luminosidad (lightness) vale 0% para el negro y 100% para el blanco, y un color normal está en el 50%[1].
La especificación CSS explica para qué sirve esta notación. Con números RGB cuesta adivinar cómo obtener una versión más clara del mismo color, mientras que en HSL cambias un solo valor[1].
George Joblove y Donald Greenberg describieron el modelo en el número de agosto de 1978 de la revista Computer Graphics, junto al modelo HSV de Alvy Ray Smith[2]. Llegó a CSS con CSS Color Module Level 3, que se convirtió en recomendación del W3C el 7 de junio de 2011[3].
Si tienes el color en otro formato, como OKLCH, Lab o código de Android, el convertidor de colores lo muestra a la vez en todos los formatos.
Colores CSS con nombre: código HEX y HSL
| Nombre en CSS | Código HEX | HSL en CSS | HSL en Office (0–255) |
|---|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) | 170, 0, 0 |
| white | #FFFFFF | hsl(0, 0%, 100%) | 170, 0, 255 |
| red | #FF0000 | hsl(0, 100%, 50%) | 0, 255, 128 |
| lime | #00FF00 | hsl(120, 100%, 50%) | 85, 255, 128 |
| blue | #0000FF | hsl(240, 100%, 50%) | 170, 255, 128 |
| yellow | #FFFF00 | hsl(60, 100%, 50%) | 42, 255, 128 |
| aqua | #00FFFF | hsl(180, 100%, 50%) | 127, 255, 128 |
| fuchsia | #FF00FF | hsl(300, 100%, 50%) | 213, 255, 128 |
| silver | #C0C0C0 | hsl(0, 0%, 75.3%) | 170, 0, 192 |
| gray | #808080 | hsl(0, 0%, 50.2%) | 170, 0, 128 |
| maroon | #800000 | hsl(0, 100%, 25.1%) | 0, 255, 64 |
| olive | #808000 | hsl(60, 100%, 25.1%) | 42, 255, 64 |
| green | #008000 | hsl(120, 100%, 25.1%) | 85, 255, 64 |
| purple | #800080 | hsl(300, 100%, 25.1%) | 213, 255, 64 |
| teal | #008080 | hsl(180, 100%, 25.1%) | 127, 255, 64 |
| navy | #000080 | hsl(240, 100%, 25.1%) | 170, 255, 64 |
| orange | #FFA500 | hsl(38.8, 100%, 50%) | 27, 255, 128 |
| rebeccapurple | #663399 | hsl(270, 50%, 40%) | 191, 128, 102 |
¿En qué se diferencia HSL de HSB y de la escala de Office?
| Código HEX | HSL en CSS | HSB | HSL en Office (0–255) |
|---|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | 217,2°; 76%; 96,5% | 154, 233, 153 |
| #EF4444 | hsl(0, 84.2%, 60.2%) | 0°; 71,5%; 93,7% | 0, 215, 154 |
| #22C55E | hsl(142.1, 70.6%, 45.3%) | 142,1°; 82,7%; 77,3% | 100, 180, 116 |
| #F59E0B | hsl(37.7, 92.1%, 50.2%) | 37,7°; 95,5%; 96,1% | 26, 235, 128 |
| #8B5CF6 | hsl(258.3, 89.5%, 66.3%) | 258,3°; 62,6%; 96,5% | 183, 228, 169 |
| #1E293B | hsl(217.2, 32.6%, 17.5%) | 217,2°; 49,2%; 23,1% | 154, 83, 45 |
| #FAFAFA | hsl(0, 0%, 98%) | 0°; 0%; 98% | 170, 0, 250 |
| #333333 | hsl(0, 0%, 20%) | 0°; 0%; 20% | 170, 0, 51 |
¿Cuántos decimales necesita HSL?
| Código HEX | Resultado del convertidor | Los mismos valores redondeados | Color de los valores redondeados |
|---|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | hsl(217, 91%, 60%) | #3C83F6 |
| #EF4444 | hsl(0, 84.2%, 60.2%) | hsl(0, 84%, 60%) | #EF4343 |
| #22C55E | hsl(142.1, 70.6%, 45.3%) | hsl(142, 71%, 45%) | #21C45D |
| #F59E0B | hsl(37.7, 92.1%, 50.2%) | hsl(38, 92%, 50%) | #F59F0A |
| #8B5CF6 | hsl(258.3, 89.5%, 66.3%) | hsl(258, 90%, 66%) | #895AF6 |
| #1E293B | hsl(217.2, 32.6%, 17.5%) | hsl(217, 33%, 18%) | #1F2A3D |
style.color y lo leímos con getComputedStyle.¿Qué formas de escribir el código HEX admite este convertidor?
| Lo que escribes | Resultado del convertidor | Cómo lo leemos |
|---|---|---|
| #3B82F6 | hsl(217.2, 91.2%, 59.8%) | Un código con almohadilla, tal cual aparece en la hoja de estilos |
| 3b82f6 | hsl(217.2, 91.2%, 59.8%) | La almohadilla no hace falta, y las minúsculas las leemos igual que las mayúsculas |
| #38F | hsl(215, 100%, 60%) | La forma abreviada de tres caracteres la ampliamos nosotros: #38F lo leemos como #3388FF |
| #3B82F680 | hsla(217.2, 91.2%, 59.8%, 0.5) | Los dos últimos caracteres son la opacidad: nos la llevamos y damos el resultado en hsla |
| color: #3B82F6; | hsl(217.2, 91.2%, 59.8%) | Pega la línea entera de la hoja de estilos o de las herramientas del navegador, el código lo sacamos nosotros |
| "#3B82F6" | hsl(217.2, 91.2%, 59.8%) | Las comillas de un archivo JSON o de JavaScript las omitimos y leemos solo el código |
| ##3B82F6 | hsl(217.2, 91.2%, 59.8%) | La doble almohadilla que sale al pegar junto a una ya escrita no estropea nada |
| #EF4444 | 0, 215, 154 | Con el selector Notación en Microsoft Office el resultado sale en la escala 0–255, la del cuadro Colores de Word y Excel |
¿Dónde vas a usar el resultado HSL?
Las hojas de estilo y los navegadores trabajan con la notación CSS, y los programas de Office con la escala 0–255, así que elige la notación correcta en el selector antes de copiar el resultado.
Hoja de estilos CSS
Pega el resultado como valor de una propiedad, por ejemplocolor: hsl(217.2, 91.2%, 59.8%);. CSS también acepta la forma con espacios y la opacidad tras una barra:hsl(217.2 91.2% 59.8% / 50%)[1].Figma
Selecciona la capa y haz clic en la muestra del relleno en la barra lateral derecha. Bajo los controles de tono y opacidad abre la lista de modelos de color y elige HSL[4].PowerPoint, Word y Excel
Selecciona una forma, haz clic en Relleno de forma y elige Más colores de relleno[6]. En la pestaña Personalizado cambia el modelo de color a HSL y escribe los tres números de Office en los campos Tono, Sat y Lum.Chrome
Haz clic derecho en el elemento y elige Inspeccionar. En el panel de estilos mantén pulsada la tecla Mayúsculas, haz clic en la muestra de color y eligehsl(X X X / X)en la lista que se abre[7]. El valor del panel pasa entonces a HSL.
Convertir otras unidades a HSL
Convertir HEX a otras unidades
Fuentes
- CSS Color Module Level 4 — HSL Colors: hsl() and hsla() functions — W3C
- HSL and HSV — Wikipedia (en inglés)
- CSS Color Module Level 3 — HSL color values — W3C
- Update fills using the color picker — Figma Help Center
- Elegir colores en el cuadro de diálogo Colores — Soporte técnico de Microsoft
- Cambiar los colores de un cuadro de texto o una forma — Soporte técnico de Microsoft
- Inspecciona y depura colores HD y no HD con el selector de color — Chrome for Developers
Todos los valores de las tablas se calcularon a partir de las definiciones de las unidades y se comprobaron aritméticamente antes de publicarlos. Los datos históricos y los nombres de las unidades locales proceden de las fuentes indicadas arriba.
Última revisión del contenido: · redactado y verificado por el equipo de Arteon
Preguntas frecuentes sobre convertir HEX a HSL
¿Qué notación HSL elijo en el convertidor?
Elige CSS para hojas de estilo y para las herramientas para desarrolladores del navegador. Elige Microsoft Office (0–255) cuando copies el color al cuadro Colores de Word, Excel o PowerPoint, porque allí cada uno de los tres valores va de 0 a 255[5].
¿Por qué un color escrito en Office vuelve con otro código HEX?
El cuadro Colores calcula HSL con números enteros en una escala de 0 a 255, y en ese cálculo se pierde algo de precisión. Lo comprobamos en Office 2016: #3B82F6 aparece como 154, 233 y 153, y esos tres números escritos de nuevo dan #3C83F6. El convertidor usa el mismo algoritmo, así que te muestra exactamente el color que verás en el programa. Para introducir números leídos en el cuadro, usa el convertidor de HSL a HEX con la notación de Office.
¿Cómo escribo un color HSL con transparencia?
Introduce un código de ocho caracteres, por ejemplo #3B82F680. El convertidor da entonces hsla(217.2, 91.2%, 59.8%, 0.5), donde el cuarto número es la opacidad de 0 a 1[1]. La notación de Office da solo los tres números de tono, saturación y luminosidad.
¿Por qué el amarillo y el azul tienen la misma luminosidad en HSL?
La luminosidad de HSL es la media del canal más fuerte y el más débil, así que no coincide con lo claro que el ojo percibe un color. La especificación CSS usa justo este ejemplo: hsl(60 100% 50%) y hsl(240 100% 50%) tienen ambos 50%, pero el amarillo se ve mucho más claro[1].
¿Cómo saco un tono más claro de un color en HSL?
Deja el tono y la saturación como están y sube solo la luminosidad. hsl(217.2, 91.2%, 59.8%) con luminosidad del 70% da #6DA2F8. Una escala de luminosidad lista y la conversión de cualquier valor HSL a código están en el convertidor de HSL a HEX.
¿Un color en HSL tiene el mismo contraste que en HEX?
Sí, porque las dos notaciones describen el mismo color y el contraste depende del color. Pega el resultado en el comprobador de contraste de colores, que acepta HSL igual que un código HEX.
Ayúdanos a mejorar nuestras herramientas
¿Tienes una idea, has encontrado un error o quieres proponer una herramienta? Escríbenos.