Convierte valores RGB a HSL

Última revisión del contenido:

Escribe tres canales RGB y los valores HSL aparecen mientras escribes: rgb(59, 130, 246) es hsl(217.2, 91.2%, 59.8%). El campo acepta números con o sin paréntesis y reconoce canales escritos como fracciones de 0 a 1. El selector te da la notación CSS o la escala de Office.

Notación HSL

La notación CSS corresponde a las hojas de estilo y a las herramientas de desarrollo del navegador. La notación 0–255 es la que muestra el cuadro Colores en Word, Excel y PowerPoint.

a

¿Cómo se convierte RGB a HSL?

Divide cada canal entre 255 y busca el mayor y el menor. La luminosidad es la media de esos dos valores. La saturación sale de su diferencia, y el tono, del canal más fuerte[1].


Fórmula: Δ = máx − mín, L = (máx + mín) ÷ 2, S = Δ ÷ (1 − |2L − 1|), y cuando el rojo es el canal más fuerte, H = 60° × ((G − B) ÷ Δ).


Toma rgb(239, 68, 68). Divididos entre 255, el rojo vale 0,937, y el verde y el azul 0,267 cada uno. Su media es 0,602, así que la luminosidad es del 60,2%. Su diferencia, 0,671, da una saturación del 84,2%.


El verde y el azul son iguales, así que el tono es 0°. El color completo es hsl(0, 84.2%, 60.2%). Cuando el verde es el canal más fuerte, el tono se cuenta desde 120°, por eso rgb(34, 197, 94) da hsl(142.1, 70.6%, 45.3%).


Los códigos HEX los da el convertidor de RGB a HEX, y desde un código parte el convertidor de HEX a HSL.

¿En qué se diferencia HSL de RGB?

RGB describe un color por las cantidades de luz roja, verde y azul que la pantalla combina en un píxel. HSL describe el mismo color por su tono, la cantidad de color y su luminosidad. La especificación CSS señala que con números RGB cuesta adivinar cómo aclarar un color sin perder su tono[1].


Las dos notaciones cubren el mismo espacio sRGB. Un color escrito en CSS como HSL lo convierte el navegador a sRGB[1], por eso todo color HSL se puede escribir como tres canales RGB y al revés.


Los autores del modelo, George Joblove y Donald Greenberg, llamaron a sus dimensiones de otra forma en 1978: hue, relative chroma e intensity[2]. La especificación CSS las llama hue, saturation y lightness, que en español son tono, saturación y luminosidad[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.

¿Qué valores HSL tienen los grises RGB?

Cuando los tres canales son iguales, el color es gris y su saturación es del 0%. Solo la luminosidad decide entonces lo claro u oscuro que es el gris, y el tono no influye en el resultado[1].
Valores RGBCódigo HEXHSL en CSSHSL en Office (0–255)
0, 0, 0#000000hsl(0, 0%, 0%)170, 0, 0
32, 32, 32#202020hsl(0, 0%, 12.5%)170, 0, 32
64, 64, 64#404040hsl(0, 0%, 25.1%)170, 0, 64
96, 96, 96#606060hsl(0, 0%, 37.6%)170, 0, 96
128, 128, 128#808080hsl(0, 0%, 50.2%)170, 0, 128
160, 160, 160#A0A0A0hsl(0, 0%, 62.7%)170, 0, 160
192, 192, 192#C0C0C0hsl(0, 0%, 75.3%)170, 0, 192
224, 224, 224#E0E0E0hsl(0, 0%, 87.8%)170, 0, 224
255, 255, 255#FFFFFFhsl(0, 0%, 100%)170, 0, 255
En CSS la luminosidad de un gris es el valor del canal dividido entre 255. El cuadro Colores de Office usa la misma escala que los canales RGB, así que en los grises su tercer número coincide con el valor del canal.

¿Cómo se escribe en HSL un color RGB con opacidad?

La opacidad tiene el mismo valor en las dos notaciones: el cuarto número de rgba() es el cuarto número de hsla(). La tabla muestra siete valores de opacidad para rgb(59, 130, 246) junto con el código HEX, donde la opacidad ocupa los dos últimos dígitos.
OpacidadrgbahslaCódigo HEX
100%rgba(59, 130, 246, 1)hsl(217.2, 91.2%, 59.8%)#3B82F6
90%rgba(59, 130, 246, 0.9)hsla(217.2, 91.2%, 59.8%, 0.9)#3B82F6E6
75%rgba(59, 130, 246, 0.75)hsla(217.2, 91.2%, 59.8%, 0.75)#3B82F6BF
50%rgba(59, 130, 246, 0.5)hsla(217.2, 91.2%, 59.8%, 0.5)#3B82F680
25%rgba(59, 130, 246, 0.25)hsla(217.2, 91.2%, 59.8%, 0.25)#3B82F640
10%rgba(59, 130, 246, 0.1)hsla(217.2, 91.2%, 59.8%, 0.1)#3B82F61A
0%rgba(59, 130, 246, 0)hsla(217.2, 91.2%, 59.8%, 0)#3B82F600
Con opacidad 1 el convertidor da un hsl() simple, porque la opacidad completa es el valor por defecto.

¿Cómo se convierten a HSL los canales escritos como fracciones de 0 a 1?

Algunas bibliotecas escriben los canales como fracciones: el módulo colorsys de Python, por ejemplo, da todos los valores en el rango de 0 a 1[3]. El convertidor reconoce esta notación cuando al menos uno de los tres números tiene decimales. Como en Python, los decimales van tras un punto.
Canales 0–1HSL en CSSHSL en Office (0–255)
0.2314, 0.5098, 0.9647hsl(217.2, 91.2%, 59.8%)154, 233, 153
0.1333, 0.7725, 0.3686hsl(142.1, 70.6%, 45.3%)100, 180, 116
0.5, 0.5, 0.5hsl(0, 0%, 50.2%)170, 0, 128
1.0, 0, 0hsl(0, 100%, 50%)0, 255, 128
El rojo escrito como 1, 0, 0 tiene solo números enteros, así que el convertidor lo lee en la escala 0–255. 1.0, 0, 0 indica fracciones y da el rojo pleno.

¿Qué formas de escribir los valores RGB admite este convertidor?

El campo acepta y convierte todas estas formas, así que no hace falta limpiar nada antes de pegar. La tabla muestra qué hace el convertidor con cada una, y los resultados los calculó él mismo.
Lo que escribesResultado del convertidorCómo lo leemos
rgb(59, 130, 246)hsl(217.2, 91.2%, 59.8%)La notación CSS con paréntesis la aceptamos sin cambios
59 130 246hsl(217.2, 91.2%, 59.8%)Tres números separados por espacios bastan, no hacen falta paréntesis ni comas
R: 59, G: 130, B: 246hsl(217.2, 91.2%, 59.8%)Las letras de los canales, tal como las escribe un manual de marca, las omitimos y tomamos solo los números
rgb(23.1%, 51%, 96.5%)hsl(217.2, 91.2%, 59.8%)Los canales en porcentaje los pasamos nosotros a la escala 0–255
rgba(59, 130, 246, 0,5)hsla(217.2, 91.2%, 59.8%, 0.5)La opacidad escrita con coma decimal la llevamos al resultado en hsla
0,2314 0,5098 0,9647hsl(217.2, 91.2%, 59.8%)Los canales escritos como fracciones de 0 a 1 los reconocemos por la coma y los pasamos a la escala 0–255
[59, 130, 246]hsl(217.2, 91.2%, 59.8%)Leemos el array de NumPy que imprime Python, con corchetes incluidos
background-color: rgb(59, 130, 246);hsl(217.2, 91.2%, 59.8%)Pega la línea entera de la hoja de estilos, el color lo sacamos nosotros
300, -20, 128hsl(329.9, 100%, 50%)Los valores fuera de rango los ajustamos igual que el navegador: 300 baja a 255 y −20 sube a 0

¿Cómo se convierte RGB a HSL en código, en CSS y en Office?

Python, CSS y Office convierten RGB a HSL por su cuenta. Cada uno escribe el resultado de otra forma, así que aquí tienes cómo leerlo en cada caso.

  1. Python

    colorsys.rgb_to_hls(r, g, b) recibe canales de 0 a 1 y devuelve tono, luminosidad y saturación en ese orden[3]. Para #3B82F6 el tono es 0,6034. Es una fracción de vuelta completa, así que multiplicada por 360 da 217,2°.

  2. CSS

    Con la sintaxis relativa hsl(from rgb(59 130 246) h s calc(l + 10)) el propio navegador convierte RGB a HSL y sube la luminosidad 10 puntos[4]. Probamos esta sintaxis en Chromium 151.

  3. Cuadro Colores de Office

    Introduce los canales con el modelo RGB y después cambia el modelo de color a HSL. El cuadro muestra tono, saturación y luminosidad en una escala de 0 a 255[5], que son los mismos números que da el convertidor con la notación Microsoft Office (0–255).

Convertir otras unidades a HSL

HEX a HSL

Convertir RGB a otras unidades

RGB a HEXRGB a CMYKRGB a HSV

Fuentes

  1. CSS Color Module Level 4 — Converting sRGB Colors to HSL — W3C
  2. HSL and HSV — Wikipedia (en inglés)
  3. colorsys — Conversions between color systems — Python Software Foundation
  4. Using relative colors — MDN Web Docs
  5. Elegir colores en el cuadro de diálogo Colores — Soporte técnico de Microsoft

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 RGB a HSL

¿Puedo escribir los canales RGB en porcentaje?

Sí. El convertidor pasa los porcentajes a la escala 0–255, así que rgb(23.1%, 51%, 96.5%) da el mismo resultado que rgb(59, 130, 246), es decir, hsl(217.2, 91.2%, 59.8%).

¿Por qué getComputedStyle devuelve rgb si escribí hsl en CSS?

El navegador convierte un color HSL a sRGB al calcular el estilo y escribe el valor calculado como rgb() o rgba()[1]. Para volver a ver HSL, convierte aquí ese resultado.

¿Por qué colorsys de Python usa otro orden que CSS?

El módulo colorsys llama a este modelo HLS y devuelve la luminosidad antes que la saturación[3]. Los valores (0.6034, 0.598, 0.912) significan entonces un tono de 217,2°, una luminosidad del 59,8% y una saturación del 91,2%, que en CSS se escriben hsl(217.2, 91.2%, 59.8%).

¿Cómo vuelvo de HSL a RGB?

Escribe el valor en el convertidor de HSL a RGB. El botón Cambiar orden te lleva allí junto con el resultado actual.

¿Un gris tiene tono en HSL?

Con saturación del 0% el tono no cambia el color[1], así que el convertidor da cero en la notación CSS. El cuadro Colores de Office pone 170 en ese lugar, y el color sale igual.

¿Cómo compruebo si un color RGB se lee bien sobre un fondo?

Pega los valores RGB o el resultado HSL en el comprobador de contraste de colores. Da la relación de contraste junto con los umbrales WCAG para texto.

Captura de pantalla de la herramienta gratuita de Arteon: Convierte valores RGB a HSL

Ayúdanos a mejorar nuestras herramientas

¿Tienes una idea, has encontrado un error o quieres proponer una herramienta? Escríbenos.