Convertir RGB a HSL
El conversor de RGB a HSL vuelve a describir tres canales de color como un ángulo, una saturación y una luminosidad. Solo importan el canal mayor y el menor: su punto medio es la luminosidad, la distancia entre ellos es el croma, y cuál de los dos sea el mayor elige el sector de 60° en el que cae el tono. La posición del canal intermedio dentro de ese sector da el ángulo exacto.
Introduce un color a la izquierda. Se aceptan valores hexadecimales con o sin almohadilla, rgb(), hsl(), oklch() y nombres de color CSS.
¿Cómo funciona Convertir RGB a HSL?
Toda la conversión gira en torno a dos números: el canal mayor y el menor. Escala los tres a 0–1, y entonces la luminosidad es el punto medio de esos dos y el croma es la distancia entre ellos. Si el croma es cero, los tres canales son iguales, el color es un gris y no hay tono que calcular.
Cuál canal sea el mayor elige el sector
La rueda se divide en seis sectores de 60°. Rojo como mayor te pone en el sector que va del magenta al amarillo; verde como mayor, en el que va del amarillo al cian; azul como mayor, del cian al magenta. Dónde caigas exactamente depende del canal intermedio: para un máximo de rojo el ángulo es ((G − B) / chroma) × 60, y para los otros dos la misma expresión con un desfase de 2 o 4 sectores.
Esa expresión puede salir negativa — cuando el azul supera al verde en un color dominado por el rojo — y por eso toda implementación correcta suma 360 y toma el resto. Una implementación que se salta el ajuste devuelve un tono negativo para aproximadamente un sexto de todos los colores, y el bug es invisible hasta que algo posterior intenta ordenar por él.
La saturación se mide contra lo que es posible
La saturación no es el croma bruto; es el croma dividido por el máximo croma que la luminosidad permite, que es 1 − |2L − 1|. Ese denominador llega a cero en ambos extremos, así que un color casi negro o casi blanco con una diferencia diminuta entre canales se reporta como muy saturado. Es correcto, y no es lo que la mayoría espera que signifique el número.
Para qué sirve HSL, y para qué no
Es una buena notación para un humano. “Mismo color, menos saturado” y “mismo color, un poco más oscuro” son ediciones de un número en HSL y de tres números en RGB, y un deslizador de tono solo tiene sentido en un espacio polar. Es una ventaja real, y es la razón por la que HSL ha sobrevivido.
Es una mala base para la aritmética. Su eje de luminosidad pondera los tres canales por igual, y la visión humana pondera el verde unas diez veces más que el azul, así que números de luminosidad iguales no se ven igual de claros. Cualquier rampa, mezcla o juicio de contraste construido sobre HSL hereda ese error. OKLCH es la misma forma de notación — ángulo, croma, luminosidad — con un eje que coincide con lo que el ojo reporta, y está en la salida de abajo.
Canales RGB
rgb(255 136 0)
Tono, saturación, luminosidad
hsl(32 100% 50%) max = 255 (red) → 1.000 min = 0 (blue) → 0.000 chroma = 1.000 lightness = (1.000 + 0.000) / 2 = 50% hue = ((0.533 − 0.000) / 1.000) × 60 = 32°
¿Qué opciones y casos límite admite Convertir RGB a HSL?
| Parámetro | Tipo | Valor predeterminado | Comportamiento y casos límite |
|---|---|---|---|
| max, min | 0–1 | — | El mayor y el menor de los tres canales escalados. Todo lo demás se deriva de estos dos valores. |
| Croma | max − min | — | Cuánto dista el color del gris. Un valor de cero indica un gris, y en ese caso el matiz queda indefinido. |
| Luminosidad | (max + min) / 2 | — | El punto medio. Fíjate en que ignora de qué canales se trate: de ahí viene el problema perceptual de HSL. |
| Saturación | chroma / (1 − |2L − 1|) | — | Croma relativo al máximo disponible a esa luminosidad — no es una medida absoluta. |
| Matiz (máximo rojo) | ((G − B) / C) × 60 | — | Puede ser negativo cuando B > G; suma 360 y toma el resto. |
| Matiz (máximo verde) | ((B − R) / C + 2) × 60 | — | La misma expresión desplazada dos sectores. |
| Matiz (máximo azul) | ((R − G) / C + 4) × 60 | — | Desplazada cuatro sectores. |
| Gris | C = 0 | matiz 0 | Se informa como 0, y no como el resultado que la aritmética produzca a partir de tres números iguales. |
Preguntas frecuentes
¿Cómo convierto RGB a HSL?
Divide cada canal por 255. Toma el mayor y el menor: la luminosidad es su punto medio y el croma es su diferencia. Si el croma es cero, el color es gris y ya está. Si no, la saturación es chroma / (1 − |2L − 1|), y el tono depende de qué canal fue el mayor: rojo da ((G − B) / chroma) × 60, verde da ((B − R) / chroma + 2) × 60, azul da ((R − G) / chroma + 4) × 60. Suma 360 y toma el resto si el resultado es negativo.
¿Por qué mi tono sale negativo?
Porque la rama del máximo de rojo resta el azul del verde, y cuando el azul es el mayor de los dos el resultado queda por debajo de cero. La solución es el módulo que toda implementación correcta tiene: sumar 360 y tomar el resto. Afecta a alrededor de un sexto del espacio de color — el lado magenta del rojo — y normalmente pasa desapercibido hasta que algo intenta ordenar o interpolar por tono.
¿Qué mide realmente la saturación en HSL?
Croma relativo al máximo croma que la luminosidad puede contener, no el croma en sí. Por eso rgb(2 0 0) — casi negro — reporta 100% de saturación: dentro de lo posible a 0.4% de luminosidad, es lo más colorido que un color puede ser. Si quieres una medida absoluta de colorido, eso es lo que es el croma de OKLCh.
¿Es HSL mejor que RGB para CSS?
Para editar a mano, a menudo sí: desaturar u oscurecer es un número en lugar de tres, y un tono es algo que puedes razonar. Para cualquier cosa generada — una escala, un degradado, un estado interpolado — es peor de lo que parece, porque su luminosidad no es perceptual y números espaciados uniformemente producen colores espaciados de forma desigual. Úsalo donde lo escribe una persona y OKLCH donde lo calcula un programa.
¿La conversión pierde algo?
Matemáticamente, no — HSL y RGB describen exactamente el mismo conjunto de colores y el mapeo es reversible. La precisión se pierde en cómo se escribe el resultado: un tono de número entero y una décima de porcentaje no pueden distinguir cada uno de los 16.7 millones de valores sRGB, así que dos colores pueden imprimirse como el mismo HSL. Los valores de aquí llevan suficientes decimales para la ida y vuelta.
¿Por qué dos colores muy distintos reportan el mismo tono?
Porque el tono registra solo la dirección de un color, no cuánto hay de él. rgb(255 0 0) y rgb(40 30 30) están ambos en el tono 0 y difieren por completo en saturación y luminosidad. Esa separación es la gracia de HSL — un eje para qué color es, dos para cuán intenso y cuán brillante — y es la razón por la que un color casi gris todavía puede reportar un tono que parece seguro.
¿Qué herramientas relacionadas debería usar después?
- Convertir coloresConvierte entre HEX, RGB, HSL, HSV, OKLCH y CMYK en ambos sentidos
- Convertir HEX a RGBPasa un color hex a sus valores rgb(), incluido el alfa de 8 dígitos
- Convertir RGB a HEXPasa valores rgb() o rgba() a color hex, en 3, 6 u 8 dígitos
- Convertir HEX a HSLPasa un hex a tono, saturación y luminosidad listos para CSS