Los valores RGB son lo que te entregan las máquinas — selectores de color en editores de código, exportaciones de programas de imagen, APIs de canvas — pero son un lenguaje torpe para ajustar un color. Este conversor de RGB a HSL toma los tres números de canal (cada uno de 0 a 255) y expresa exactamente el mismo color como HSL: el tono como un ángulo en la rueda de color, la saturación y la luminosidad como porcentajes. El sentido de la traducción es el control. ¿Quieres el mismo color pero más apagado? Baja la saturación. ¿Necesitas una versión más oscura para texto sobre fondo claro? Baja la luminosidad. En RGB ambos trabajos significan tocar tres números a la vez y cruzar los dedos; en HSL cada uno es un solo número movido a propósito. El conversor también devuelve la línea hsl() de CSS y el código hexadecimal, muestra una muestra en vivo del color descrito y hace todo con JavaScript en tu navegador: los valores por defecto (15, 118, 110) son el verde azulado profundo de este sitio, cuya respuesta HSL, 175 / 77 % / 26 %, puedes contrastar con cualquier referencia.
La matemática de RGB a HSL, paso a paso
Primero los canales se escalan a 0–1: 15 se convierte en 0,059, 118 en 0,463 y 110 en 0,431. La luminosidad es el punto medio de los extremos: el canal mayor es 0,463 (verde), el menor 0,059 (rojo), así que L = (0,463 + 0,059) / 2 ≈ 0,26, mostrado como 26 %. La saturación depende de cuánto se separan los canales en relación con esa luminosidad: aquí la separación es amplia y el color está por debajo de la luminosidad media, lo que da S ≈ 77 %. El tono lo decide el canal dominante: el verde está arriba y el azul le sigue de cerca, lo que coloca el ángulo entre los hitos del verde (120°) y el cian (180°), cerca de 175°. El rojo puro (255, 0, 0) es el caso de calibración con el que deberías probar cualquier conversor: máx 1, mín 0, L = 50 %, S = 100 % y, como domina el rojo, H = 0°. Si una herramienta te da otra cosa para el rojo puro, la herramienta está mal, no la matemática.
Cuándo llega RGB y responde HSL
El momento típico: un cuentagotas de capturas o una librería de imágenes informa de un color de marca en RGB, y el sistema de diseño guarda los colores en HSL para poder generar tonos. O un desarrollador copia un valor rgb() de las herramientas del navegador y necesita construir un estado hover a partir de él. O una paleta de visualización de datos está definida en RGB por una librería de gráficos, y la versión accesible necesita oscurecer cada color de serie una cantidad medida: un trabajo de luminosidad, no de adivinanzas en RGB. En cada caso la conversión no pierde nada en el sentido descriptivo: HSL y RGB cubren el mismo espacio de color, así que el color no cambia — solo cambia lo fácil que es razonar sobre él. La salida hexadecimal está para el viaje contrario, cuando la herramienta de diseño quiere el color en su forma escrita más compacta.
Redondeo y grises: los detalles honestos
Dos cosas sorprenden a la gente. Primero, el redondeo: los porcentajes HSL son números enteros aquí, así que convertir RGB → HSL → RGB puede desviarse una unidad en un canal — invisible en la práctica, pero bueno saberlo si estás igualando una especificación píxel a píxel. Segundo, los grises: cualquier RGB con los tres canales iguales (128, 128, 128, por ejemplo) no tiene tono, y el conversor informa h 0, s 0 % con la luminosidad haciendo todo el trabajo (50 % para ese gris medio). No es un dato que falte; es la descripción correcta de un color sin contenido cromático. El negro (0, 0, 0) es l 0 % y el blanco (255, 255, 255) es l 100 %, ambos con s 0 %.
Preguntas frecuentes
¿Qué es RGB 15, 118, 110 en HSL?
hsl(175, 77 %, 26 %): el conversor viene precargado con esos valores, y la muestra enseña el verde azulado profundo que describen.
¿Por qué mi gris tiene un tono de 0? ¿Es rojo?
No. Un tono 0 con saturación 0 % es la forma que tiene HSL de decir «sin tono». El color es puramente su luminosidad; el 0 es un marcador, no una afirmación de rojez.
¿HSL puede describir cualquier color RGB?
Sí: ambos modelos cubren el mismo espacio de color sRGB, así que cada triplete RGB tiene su equivalente HSL. Solo el redondeo de los porcentajes mostrados puede causar una desviación de una unidad al volver.
¿Qué debería guardar en mi sistema de diseño?
Guarda el hex o el RGB como valor canónico (son exactos) y deriva el HSL cuando necesites ajustar un color. Así la fuente de verdad nunca acumula redondeos.
Herramientas relacionadas
English version: RGB to HSL Converter — Convert RGB Colours to HSL Instantly. También te puede interesar: Conversor de HEX a HSL — Obtén Valores HSL desde Cualquier Color Hexadecimal · Conversor de HSL a RGB — Convierte Colores HSL en RGB y Hexadecimal.
Inserta esta herramienta en tu web — gratis
Copia el código de abajo para añadir esta herramienta funcional a tu propia página. Solo pedimos que mantengas el pequeño enlace de crédito que la acompaña.