Convierte HSL a valores RGB
Escribe valores HSL y los canales RGB aparecen mientras escribes: hsl(217.2, 91.2%, 59.8%) es rgb(59, 130, 246). El resultado siempre está en la escala de 0 a 255, y la opacidad de hsla se mantiene en rgba. Con la notación de Office introduces números del 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 RGB?
Calcula cada canal por separado con una sola fórmula de la especificación CSS. En esa fórmula el rojo tiene el número n igual a 0, el verde 8 y el azul 4[1]. La saturación y la luminosidad entran como fracciones de 0 a 1.
Fórmula: k = (n + H ÷ 30) mod 12, a = S × mín(L, 1 − L), canal = L − a × máx(−1, mín(k − 3, 9 − k, 1)).
Toma hsl(0, 84.2%, 60.2%). Una luminosidad de 0,602 y una saturación de 0,842 dan a igual a 0,335. Para el rojo k vale 0, así que el paréntesis da −1 y el canal es 0,602 + 0,335, o sea, 0,937.
Para el verde y el azul el paréntesis da 1. Los dos canales valen por tanto 0,602 − 0,335, es decir, 0,267. Multiplicados por 255 y redondeados, dan rgb(239, 68, 68). Chromium 151, donde lo probamos, da el mismo resultado.
El convertidor de HSL a HEX da el código HEX de este color. El convertidor de RGB a HSL vuelve de RGB a HSL.
¿Cómo se traduce HSL a canales RGB?
El tono decide el color en el círculo cromático, es decir, qué canales RGB son fuertes y cuáles débiles. En 0° el canal más fuerte es el rojo, en 120° el verde y en 240° el azul[1].
La saturación indica cuánto se separan los canales entre sí. Al 0% los tres son iguales y el color es gris. La luminosidad fija el nivel de todos los canales a la vez: al 0% cada uno vale 0, al 100% cada uno vale 255, y al 50% el color tiene su forma normal[1].
CSS tiene dos sintaxis para esta notación. En la antigua los valores se separan con comas, y la saturación y la luminosidad necesitan el signo de porcentaje. En la moderna los separan espacios, la opacidad va tras una barra, y la saturación y la luminosidad pueden escribirse sin signo de porcentaje[1]. El convertidor lee las dos, así que hsl(217.2 91.2 59.8) da el mismo resultado que hsl(217.2, 91.2%, 59.8%).
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 cambia la saturación los valores RGB?
hsl(217.2, 91.2%, 59.8%) baja en pasos de 10 puntos, del 100% al 0%. El tono y la luminosidad no cambian, así que ves cómo se reduce la distancia entre los canales.| Saturación | HSL | Valores RGB |
|---|---|---|
| 100% | hsl(217.2, 100%, 59.8%) | 50, 128, 255 |
| 90% | hsl(217.2, 90%, 59.8%) | 60, 130, 245 |
| 80% | hsl(217.2, 80%, 59.8%) | 70, 133, 234 |
| 70% | hsl(217.2, 70%, 59.8%) | 81, 135, 224 |
| 60% | hsl(217.2, 60%, 59.8%) | 91, 138, 214 |
| 50% | hsl(217.2, 50%, 59.8%) | 101, 140, 204 |
| 40% | hsl(217.2, 40%, 59.8%) | 111, 143, 193 |
| 30% | hsl(217.2, 30%, 59.8%) | 122, 145, 183 |
| 20% | hsl(217.2, 20%, 59.8%) | 132, 148, 173 |
| 10% | hsl(217.2, 10%, 59.8%) | 142, 150, 163 |
| 0% | hsl(217.2, 0%, 59.8%) | 152, 152, 152 |
¿Cómo se escribe el tono en grados, gradianes, radianes y vueltas?
| Notación CSS | Ángulo en grados | Valores RGB |
|---|---|---|
| hsl(90deg, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(90, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(100grad, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(0.25turn, 100%, 50%) | 90° | 128, 255, 0 |
| hsl(1.5708rad, 100%, 50%) | 90,0002° | 127, 255, 0 |
| hsl(1.570796rad, 100%, 50%) | 89,99998° | 128, 255, 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%) | rgb(59, 130, 246) | La notación CSS con comas la aceptamos sin cambios |
| H 217.2 S 91.2 L 59.8 | rgb(59, 130, 246) | Las letras de los canales y la falta de porcentajes no molestan, leemos los números por su orden |
| hsla(217,2, 91,2%, 59,8%, 0,5) | rgba(59, 130, 246, 0.5) | La coma decimal funciona también en la opacidad, no hace falta cambiarla por un punto |
| hsl(0.25turn, 100%, 50%) | rgb(128, 255, 0) | Un tono indicado en vueltas lo pasamos a grados: 0.25turn son 90° |
| hsl(-120, 100%, 50%) | rgb(0, 0, 255) | Un tono negativo lo contamos desde el final del círculo cromático, igual que el navegador |
| hsl(0, 150%, 50%) | rgb(255, 0, 0) | La saturación por encima del 100% la ajustamos al 100%, igual que el navegador |
| color: hsl(217, 91%, 60%); | rgb(60, 131, 246) | Pega la línea entera de la hoja de estilos, el color lo sacamos nosotros |
| 154, 233, 153 | rgb(60, 131, 246) | 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 |
¿Dónde introduces el resultado RGB?
Los documentos de Google y el cuadro de Office aceptan los valores RGB tal como salen del convertidor, mientras que el código suele necesitar el resultado en fracciones.
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, y en Personalizado haz clic en Añadir un color personalizado. En la ventana que se abre puedes introducir el código hexadecimal o los valores RGB[3].Cuadro Colores de Office
En la pestaña Personalizado deja el modelo de color en RGB y escribe los tres números en los campos Rojo, Verde y Azul[4]. En nuestra prueba en Office 2016 estos campos aceptaron valores de 0 a 255.Python
colorsys.hls_to_rgb(h, l, s)recibe la luminosidad antes que la saturación y los tres valores como fracciones de 0 a 1[5]. El resultado también sale en fracciones, así que multiplica cada canal por 255 para que coincida con el convertidor.JavaScript
La especificación CSS incluye una función lista,hslToRgb(hue, sat, light), que recibe el tono en grados y la saturación y la luminosidad de 0 a 100[1]. Devuelve canales de 0 a 1, y el convertidor usa la misma fórmula.
Convertir otras unidades a RGB
Convertir HSL a otras unidades
Fuentes
- CSS Color Module Level 4 — Converting HSL Colors to sRGB — W3C
- CSS Values and Units Module Level 4 — Angle Units — W3C
- Cambiar el color del texto, los objetos y los fondos — Ayuda de Editores de Documentos de Google
- Elegir colores en el cuadro de diálogo Colores — Soporte técnico de Microsoft
- colorsys — Conversions between color systems — Python Software Foundation
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 RGB
¿Por qué el resultado RGB convertido de vuelta da un valor HSL algo distinto?
Los canales RGB solo admiten números enteros, así que varios valores HSL dan el mismo color. hsl(217, 91%, 60%) da rgb(60, 131, 246), y ese color convertido de vuelta es hsl(217.1, 91.2%, 60%). Los dos describen exactamente el mismo color en pantalla.
¿Cómo convierto a RGB los números del cuadro Colores de Office?
Elige la notación Microsoft Office (0–255) y escribe los tres números del cuadro. Los valores 154, 233 y 153 dan rgb(60, 131, 246), porque el cuadro calcula HSL en una escala de 0 a 255[4] y pierde algo de precisión. Escribe los números después de cambiar la notación, porque el selector reescribe el color que ya está en el campo como el mismo color en la nueva notación.
¿Puedo escribir la saturación y la luminosidad sin signo de porcentaje?
Sí. El convertidor lee números sin más, igual que la sintaxis moderna de CSS, así que 217.2 91.2 59.8 da rgb(59, 130, 246)[1].
¿Cómo obtengo los canales RGB como fracciones de 0 a 1?
Convierte el valor HSL en código con el convertidor de HSL a HEX y luego escribe ese código en el convertidor de HEX a RGB con el selector en 0–1. Para hsl(217.2, 91.2%, 59.8%) obtienes 0,2314, 0,5098 y 0,9647.
¿El navegador muestra el mismo color que el convertidor?
Sí. Lo probamos en Chromium 151 con los 16 777 216 colores: los valores HSL que dan nuestros convertidores produjeron en el navegador exactamente los canales RGB de partida.
¿Cómo defino en RGB un color con transparencia?
Añade la opacidad al valor HSL, por ejemplo hsla(217.2, 91.2%, 59.8%, 0.5). El convertidor da rgba(59, 130, 246, 0.5), y el cuarto número no cambia.
Ayúdanos a mejorar nuestras herramientas
¿Tienes una idea, has encontrado un error o quieres proponer una herramienta? Escríbenos.