Convierte HSL a un código HEX
Escribe valores HSL y el código HEX aparece mientras escribes: hsl(217.2, 91.2%, 59.8%) es #3B82F6. El campo acepta comas, espacios y la opacidad tras una barra. Con la notación de Office puedes introducir los tres números 0–255 que lees en el cuadro Colores.
Escribe el tono en grados y la saturación y la luminosidad en porcentaje. Separa los valores con comas o espacios.
¿Cómo se convierte HSL a HEX?
Pasa la saturación y la luminosidad a fracciones de 0 a 1, calcula los tres canales RGB y escribe cada canal como dos dígitos hexadecimales. La base es el croma, la diferencia entre el canal más fuerte y el más débil[1]. Si los números vienen de Office, elige antes la notación Microsoft Office (0–255). Si el campo ya tiene un color, el selector lo reescribe como el mismo color en la nueva notación.
Fórmula: C = (1 − |2L − 1|) × S, el canal más fuerte es L + C ÷ 2 y el más débil L − C ÷ 2.
Toma hsl(217.2, 91.2%, 59.8%). El croma vale 0,733. El canal más fuerte tiene 0,965 y el más débil 0,231. El tono de 217,2° está entre el cian y el azul, así que el azul es el canal más fuerte, el rojo el más débil y el verde queda en 0,510[1].
Multiplicados por 255, los canales dan 59, 130 y 246. En hexadecimal son 3B, 82 y F6, así que el código es #3B82F6. Cada mitad tiene su herramienta: el convertidor de HSL a RGB y el convertidor de RGB a HEX.
¿Qué significan tono, saturación y luminosidad en HSL?
El primer valor es el tono, dado como ángulo en el círculo cromático. Los colores primarios de la pantalla están separados 120 grados: el rojo en 0°, el verde en 120° y el azul en 240°, y 360° vuelve a ser rojo[2].
El segundo valor es la saturación. Al 100% el color está saturado del todo, y al 0% se convierte en un gris en el que el tono ya no influye en el resultado. El tercer valor es la luminosidad. Da negro al 0%, blanco al 100% y el color pleno de un tono al 50%[2].
CSS también acepta el tono en otras unidades de ángulo. Una vuelta completa son 360 grados, 400 gradianes, 2π radianes o una vuelta escrita como 1turn[3]. El convertidor las lee todas, así que 0.25turn da el mismo color que 90°.
El modelo HSL se describió en 1978, y en 1979 Tektronix presentó terminales gráficos en los que los colores se ajustaban en HSL[1].
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.
¿Cómo se sacan tonos más claros y más oscuros de un color en HSL?
hsl(217.2, 91.2%, 59.8%) y los códigos HEX que dan.| Luminosidad | HSL | Código HEX |
|---|---|---|
| 10% | hsl(217.2, 91.2%, 10%) | #021431 |
| 20% | hsl(217.2, 91.2%, 20%) | #042862 |
| 30% | hsl(217.2, 91.2%, 30%) | #073C92 |
| 40% | hsl(217.2, 91.2%, 40%) | #0950C3 |
| 50% | hsl(217.2, 91.2%, 50%) | #0B64F4 |
| 60% | hsl(217.2, 91.2%, 60%) | #3C83F6 |
| 70% | hsl(217.2, 91.2%, 70%) | #6DA2F8 |
| 80% | hsl(217.2, 91.2%, 80%) | #9DC1FB |
| 90% | hsl(217.2, 91.2%, 90%) | #CEE0FD |
¿Qué códigos HEX tienen los tonos separados 30 grados?
| Tono | Tonos en la especificación CSS | HSL | Código HEX |
|---|---|---|---|
| 0° | rojos | hsl(0, 100%, 50%) | #FF0000 |
| 30° | rojo-amarillos, es decir, naranjas | hsl(30, 100%, 50%) | #FF8000 |
| 60° | amarillos | hsl(60, 100%, 50%) | #FFFF00 |
| 90° | amarillo-verdes | hsl(90, 100%, 50%) | #80FF00 |
| 120° | verdes | hsl(120, 100%, 50%) | #00FF00 |
| 150° | verde-cianes | hsl(150, 100%, 50%) | #00FF80 |
| 180° | cianes | hsl(180, 100%, 50%) | #00FFFF |
| 210° | cian-azules | hsl(210, 100%, 50%) | #0080FF |
| 240° | azules | hsl(240, 100%, 50%) | #0000FF |
| 270° | azul-magentas | hsl(270, 100%, 50%) | #8000FF |
| 300° | magentas | hsl(300, 100%, 50%) | #FF00FF |
| 330° | magenta-rojos | hsl(330, 100%, 50%) | #FF0080 |
¿Qué código HEX dan los números del cuadro Colores de Office?
| Valores en Office | Código HEX | El mismo color en CSS |
|---|---|---|
| 0, 255, 128 | #FF0101 | hsl(0, 100%, 50.2%) |
| 42, 255, 128 | #FFFF01 | hsl(60, 100%, 50.2%) |
| 85, 255, 128 | #01FF01 | hsl(120, 100%, 50.2%) |
| 127, 255, 128 | #01FFFF | hsl(180, 100%, 50.2%) |
| 170, 255, 128 | #0101FF | hsl(240, 100%, 50.2%) |
| 213, 255, 128 | #FF01FF | hsl(300, 100%, 50.2%) |
| 154, 233, 153 | #3C83F6 | hsl(217.1, 91.2%, 60%) |
| 170, 0, 128 | #808080 | hsl(0, 0%, 50.2%) |
| 0, 0, 255 | #FFFFFF | hsl(0, 0%, 100%) |
| 0, 0, 0 | #000000 | hsl(0, 0%, 0%) |
¿Qué formas de escribir el color en HSL admite este convertidor?
| Lo que escribes | Resultado del convertidor | Cómo lo leemos |
|---|---|---|
| hsl(217.2, 91.2%, 59.8%) | #3B82F6 | La sintaxis CSS antigua con comas la leemos igual que la nueva |
| hsl(217.2 91.2% 59.8%) | #3B82F6 | La sintaxis CSS moderna con espacios la aceptamos sin ningún cambio |
| 217,2 91,2 59,8 | #3B82F6 | Solo números con coma decimal, sin paréntesis y sin porcentajes: los reconocemos por su orden |
| H: 217.2 S: 91.2% L: 59.8% | #3B82F6 | Las letras de los canales con dos puntos, tal como las escribe un manual de marca, las omitimos y tomamos los números |
| hsl(217.2 91.2% 59.8% / 50%) | #3B82F680 | La opacidad indicada tras la barra la añadimos al resultado como los dos últimos caracteres del código |
| 180°, 100%, 50% | #00FFFF | El signo de grado junto al tono no molesta, leemos solo el número |
| color: hsl(217, 91%, 60%); | #3C83F6 | Pega la línea entera de la hoja de estilos, el color lo sacamos nosotros |
| 154, 233, 153 | #3C83F6 | Tres números en la escala 0–255, la notación Microsoft Office del cuadro Colores de Word y Excel: con el selector Notación así, los leemos igual que porcentajes |
¿De dónde sacas los valores HSL y dónde pegas el código HEX?
Los dos primeros sitios te dan valores HSL para convertir, y los dos siguientes reciben el código HEX ya listo.
Cuadro Colores de Office
Haz clic en Relleno de forma y elige Más colores de relleno[5]. En la pestaña Personalizado cambia el modelo de color a HSL y copia los números de los campos Tono, Sat y Lum. En el convertidor elige la notación Microsoft Office (0–255).Hoja de estilos CSS
Busca en el archivohsl(ohsla(y copia el valor completo, con los paréntesis. El convertidor lo acepta con comas, con espacios y con la opacidad tras una barra.Documentos, Hojas de cálculo y Presentaciones de Google
En la barra de herramientas haz clic en Color del texto o en otra herramienta con opciones de color. En Personalizado haz clic en Añadir un color personalizado, pega el código HEX y haz clic en Aceptar[6].Figma
Haz clic en la muestra del relleno en la barra lateral derecha. En la lista de modelos de color bajo los controles elige Hex[7] y pega el código en el campo de al lado.
Convertir otras unidades a HEX
Convertir HSL a otras unidades
Fuentes
- HSL and HSV — Wikipedia (en inglés)
- CSS Color Module Level 4 — HSL Colors: hsl() and hsla() functions — W3C
- CSS Values and Units Module Level 4 — Angle Units — W3C
- 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
- Cambiar el color del texto, los objetos y los fondos — Ayuda de Editores de Documentos de Google
- Update fills using the color picker — Figma Help Center
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 HSL a HEX
¿Por qué hsl(217, 91%, 60%) da un código distinto de #3B82F6?
El HSL redondeado a números enteros describe el color con menos precisión. hsl(217, 91%, 60%) da #3C83F6, mientras que #3B82F6 es hsl(217.2, 91.2%, 59.8%). Cuántos colores cambian con ese redondeo lo muestra una tabla del convertidor de HEX a HSL.
¿Cómo introduzco un color HSL con transparencia?
Añade la opacidad tras una barra, por ejemplo hsl(217.2 91.2% 59.8% / 50%), o dala como cuarto valor de hsla()[2]. El convertidor da entonces el código de ocho caracteres #3B82F680, cuyos dos últimos dígitos guardan la opacidad.
¿Qué pasa si escribo una saturación fuera de 0–100%?
El convertidor la ajusta al límite del rango, así que 150% cuenta como 100%. Un valor negativo cuenta como 0%, tal como exige la especificación CSS[2]. Con la luminosidad pasa lo mismo.
¿Un tono de 360° es el mismo color que 0°?
Sí. El tono es un ángulo, así que 360° es el mismo rojo que 0°[2]. Por la misma razón 480° da el mismo verde que 120°, y −120° el mismo azul que 240°.
¿Cómo convierto HSL a valores RGB?
Escribe el valor en el convertidor de HSL a RGB, que da tres canales de 0 a 255. Para hsl(217.2, 91.2%, 59.8%) el resultado es rgb(59, 130, 246).
¿Cómo paso un color del cuadro de Office a una hoja de estilos?
Elige la notación Microsoft Office (0–255) y escribe los tres números del cuadro Colores. El código HEX del campo de resultado se pega directamente en CSS, y el convertidor de HEX a HSL da el mismo color en grados y porcentajes.
Ayúdanos a mejorar nuestras herramientas
¿Tienes una idea, has encontrado un error o quieres proponer una herramienta? Escríbenos.