Conversor de RGB a HSL

Este convertidor de RGB a HSL transforma valores RGB (rojo, verde y azul) en HSL (tono, saturación y luminosidad) y HEX al instante. Está diseñado para diseñadores, desarrolladores y cualquier persona que trabaje con sistemas de color.

Última actualización: 23 de septiembre de 2026

Características clave

• Conversión en tiempo real a medida que ajustas los valores

• Métodos de entrada dual: campos numéricos y controles deslizantes suaves

• Vista previa de color en vivo muestra tu color inmediatamente

• Salidas en tres formatos: RGB, HSL y hexadecimal

• Clic para copiar para cualquier formato, también con Enter o Espacio desde el teclado

• 10 colores preestablecidos para puntos de partida rápidos

• Generador de colores aleatorios para inspirarte

• La validación de entrada fija cada canal a 0-255

¿Por qué usarlo?

CSS admite tanto RGB como HSL. RGB funciona en absolutos (0-255 por canal). HSL piensa en términos humanos: elige un tono, ajusta el brillo, modifica la saturación.

La conversión manual entre ellos es tediosa. Esta herramienta lo hace al instante.

Perfecto para:

• CSS conversión de color

• Desarrollo de sistemas de diseño.

• Creación de paleta de colores

• Experimentación rápida de colores

• Aprendiendo la teoría del color

Totalmente responsivo, por lo que funciona en celulares, tabletas y computadoras de escritorio.

¿Qué es un convertidor de RGB a HSL?

Un conversor de RGB a HSL es una herramienta de conversión de color que toma tres valores de canal RGB y genera sus equivalentes de tono, saturación y luminosidad.

Elimina los cálculos manuales involucrados en el cambio entre los valores de color RGB y sus contrapartes HSL, algo que los diseñadores hacen constantemente cuando cambian entre el código y el software de diseño.

Función principal:

• Acepta la entrada RGB como tres números enteros entre 0 y 255 (¿a partir de un código hexadecimal? Ejecútelo a través del convertidor HEX a RGB primero)
• Ejecuta la fórmula RGB a HSL automáticamente en segundo plano
• Muestra una muestra de color en vivo que se actualiza a medida que cambian los valores.

Chrome DevTools muestra este mismo desglose HSL en el instante en que haces clic en una muestra de color en el panel Elementos, sin necesidad de un convertidor externo.

Los navegadores modernos ya admiten la sintaxis hsl() de forma nativa. La forma clásica separada por comas ha funcionado durante más de una década, y la sintaxis más nueva separada por espacios de CSS Nivel 4 del módulo de color (EN) alcanzó el estado Línea de base ampliamente disponible (EN) en julio de 2022.

Un convertidor todavía se gana su lugar en otros lugares, en la transferencia de diseño, en scripts y en herramientas que solo hablan RGB o hexadecimal.

¿Cuál es la diferencia entre RGB, HSL, HSV y CMYK?

RGB, HSL, HSV y CMYK describen los mismos colores a través de diferentes conjuntos de números.

Sólo dos de ellos, RGB y HSL, se convierten entre sí mediante una única fórmula fija.

HSV, a veces denominado HSB, se confunde constantemente con HSL, ya que ambos utilizan una rueda de tono de 0 a 360 grados y una saturación basada en porcentaje.

El tercer valor es donde se dividen. La luminosidad de HSL va desde el negro a través del tono puro hasta el blanco, mientras que el valor de HSV solo va desde el negro hasta el tono puro, sin ningún punto final de blanco.

Donde CMYK se destaca: es un modelo sustractivo creado para tinta sobre papel en lugar de luz en una pantalla, por lo que un convertidor de RGB a HSL no tiene un papel directo en CMYK color (EN) flujos de trabajo.

Adobe Photoshop mantiene los tres, RGB, HSB y CMYK, en el mismo selector de color precisamente porque los equipos de impresión y los equipos de pantalla necesitan colores diferentes.

¿Qué significan los valores de tono, saturación y luminosidad?

Tono, saturación y luminosidad son los tres números que genera un convertidor de RGB a HSL, y cada uno controla una propiedad visual independiente.

Cifras clave:

• Tono: 0 a 360 grados
• Saturación: 0 a 100 por ciento
• Luminosidad: 0 a 100 por ciento
• Fuente RGB canales: 0 a 255 cada uno

tono

El tono es la posición del color en una rueda de 360 grados, donde 0 y 360 caen en rojo.

Grados emblemáticos:

• 0° y 360°: rojo
• 120°: verde
• 240°: azul

Un valor de tono por sí solo no dice qué tan vívido o brillante se ve un color. Sólo marca dónde se asienta el color en la rueda.

Saturación

La saturación controla la intensidad, no el brillo.

• El 0% de saturación elimina todo el color, dejando un gris puro.
• El 50% de saturación produce una versión apagada y polvorienta del tono.
• El 100% de saturación produce la versión más vívida posible con esa luminosidad.

Dos colores pueden compartir exactamente el mismo tono y luminosidad y aún verse completamente diferentes una vez que cambia la saturación.

Luminosidad

La luminosidad va del negro al 0% al blanco al 100%, con el tono puro al 50%.

Por qué esto es importante: mover el valor de luminosidad hacia arriba o hacia abajo cambia qué tan claro u oscuro se ve un color sin tocar su tono o intensidad.

El selector de color de Figma incluye un modo HSL con este control deslizante exacto ubicado justo al lado del campo de entrada hexadecimal.

¿Cómo funciona la fórmula de conversión de RGB a HSL?

La fórmula RGB a HSL convierte tres valores de canal en tono, saturación y luminosidad mediante cinco pasos secuenciales.

Cada convertidor de RGB a HSL, desde herramientas de desarrollo de navegador hasta aplicaciones web independientes, ejecuta alguna versión de esta misma matemática.

1. Normalice cada canal RGB a un rango de 0-1 dividiendo por 255
2. Encuentre el máximo y el mínimo de los tres valores normalizados.
3. Calcular la luminosidad como el promedio del máximo y mínimo.
4. Calcule la saturación a partir de la diferencia entre máximo y mínimo, en relación con la luminosidad
5. Calcule el tono según qué canal, rojo, verde o azul, tiene el valor máximo

El modelo HSL en sí se remonta al artículo SIGGRAPH de 1978 de Joblove y Greenberg sobre espacios de color para gráficos por computadora.

Ejecutando el color predeterminado de la herramienta a través de esos pasos: rgb(255, 100, 150) se normaliza a un máximo de 1.0 (rojo) y un mínimo de 0.39, lo que proporciona un 70% de luminosidad, un 100% de saturación y un tono de 341°, por lo que hsl(341, 100%, 70%).

El redondeo ocurre en el paso final. La mayoría de los convertidores redondean el tono al grado entero más cercano y la saturación y la luminosidad al porcentaje entero más cercano, razón por la cual el mismo color puede aparecer como 210° en una herramienta y 209° en otra.

¿Puedes convertir HSL nuevamente a RGB?

Sí, HSL se vuelve a convertir a RGB, aunque la fórmula inversa funciona de manera diferente a la conversión original.

En lugar de una inversa algebraica directa, el paso inverso calcula un valor cromático a partir de la saturación y la luminosidad, luego busca RGB canales según en qué segmento de 60 grados de la rueda de tonos cae el color.

Deriva de ida y vuelta: convertir RGB en HSL y volver a RGB puede cambiar un color uno o dos tonos, ya que cada paso se redondea a números enteros.

Chroma.js ejecuta esta fórmula exactamente inversa internamente cada vez que un script llama a su método de salida RGB en un objeto de color HSL.

La conversión inversa es más importante en el momento del traspaso. Un diseñador que trabaja en HSL para realizar ediciones sencillas de luminosidad a menudo necesita que el valor final pase por un paso de conversión hexadecimal separado antes de que un desarrollador pueda colocarlo en una hoja de estilo.

Un convertidor independiente de HSL a RGB maneja este paso inverso sin requerir ninguna tabla de búsqueda manual de matemáticas.

¿Cuándo debería utilizar HSL en lugar de RGB?

Usa HSL cuando necesite ajustar manualmente la luminosidad o intensidad de un color. Usa RGB cuando coincida con un valor exacto de una guía de marca o un archivo de diseño.

RGB ventajas:

• Coincide con la forma en que las pantallas mezclan físicamente la luz roja, verde y azul.
• Los valores exactos se transfieren directamente desde el software de edición de imágenes.
• No se necesita conversión para la mayoría de los sistemas de diseño basados en hexadecimal existentes

RGB inconveniente: aclarar u oscurecer un color significa volver a calcular los tres canales manualmente, ya que ninguno de ellos se asigna directamente al brillo.

HSL ventajas:

• Un número, la luminosidad, controla qué tan claro u oscuro se ve un color.
• Hue permanece fijo mientras experimentas con intensidad
• Es más fácil generar un conjunto consistente de tonos a partir de un color base.

HSL inconveniente: pasos iguales en el valor de luminosidad no siempre parecen pasos iguales a la vista, especialmente alrededor de tonos amarillos y azules.

Las bibliotecas de componentes como shadcn/ui enviaron durante mucho tiempo toda su paleta de colores como valores HSL en lugar de RGB, específicamente para que los colores del tema pudieran aclararse u oscurecerse mediante una variable. Desde entonces, sus temas Tailwind v4 se han trasladado a OKLCH, lo que corrige la luminosidad desigual de HSL.

¿Cómo ayuda HSL con la accesibilidad y la verificación de contraste?

La auditoría de 2025 de WebAIM (EN) del millón de páginas de inicio principales encontró texto de bajo contraste en el 79.1% de ellas, la falla de accesibilidad más común detectada.

Las Pautas de accesibilidad al contenido web (EN) establecen una relación mínima de contraste de color (EN) de 4.5:1 para texto normal y 3:1 para texto grande, basado en la luminancia relativa en lugar de los valores de color sin formato.

HSL no calcula esa proporción directamente. Facilita una solución específica, ajustando la luminosidad sin modificar el tono.

Por qué importa aquí la luminosidad:

• Reducir el valor de luminosidad oscurece el texto sin cambiar su identidad de color
• Aumentar el valor de luminosidad sobre un fondo lo aclara de la misma manera
• Ninguno de los ajustes requiere volver a calcular tres canales RGB separados

Esta es la misma palanca detrás de la mayoría de los sistemas de modo oscuro, donde un solo paso de iluminación genera un conjunto completo de texto accesible y pares de fondo.

Un generador de paleta de colores accesible automatiza este proceso exacto de equilibrio de luminosidad en lugar de dejarlo a prueba y error manual, y el verificador de contraste de color (EN) confirma la proporción final.

La auditoría de accesibilidad Lighthouse de Chrome marca automáticamente cualquier par de texto y fondo que caiga por debajo del umbral 4.5:1.

¿Qué herramientas y plataformas de diseño admiten HSL de forma nativa?

El soporte nativo HSL se divide a lo largo de una línea bastante clara. Las herramientas web lo exponen directamente, mientras que los editores de imágenes tradicionales utilizan HSB de forma predeterminada.

El selector de color de Illustrator se encuentra justo al lado de la estructura de Photoshop y ofrece los campos H, S y B en lugar de H, S y L.

Por qué es importante la distinción: un diseñador que copia un valor de "luminosidad" de Illustrator y lo pega en una función CSS hsl() en realidad está pegando un valor de brillo y el resultado no coincidirá.

Tailwind CSS adopta un enfoque diferente. No ofrece ningún modo de selección HSL, pero su sintaxis de valor arbitrario permite a un desarrollador escribir un color HSL directamente en una clase de utilidad sin tocar un archivo de configuración.

El marco Tailwind CSS (EN) trata el color de esta manera en todos los ámbitos, favoreciendo la flexibilidad a nivel de código sobre un selector visual.

¿Cómo se convierte RGB a HSL en CSS?

Escribir HSL directamente en una hoja de estilo significa pasar tres valores a la función hsl() en lugar de la función rgb() equivalente.

La sintaxis toma un tono en grados, luego un porcentaje de saturación y luego un porcentaje de luminosidad, en ese orden fijo.

Estructura básica:

• El tono es lo primero, escrito como un número simple de grados.
• La saturación ocupa el segundo lugar, escrita como porcentaje.
• La ligereza ocupa el tercer lugar, escrita como porcentaje.
• Un cuarto valor opcional agrega transparencia a través del canal alfa.

Las propiedades personalizadas CSS han funcionado en todos los navegadores principales desde 2017, por lo que almacenar un valor HSL como una variable reutilizable funciona de manera confiable en los navegadores actuales.

Un tema creado de esta manera almacena un par de tono base y luminosidad, luego deriva estados de desplazamiento y bordes cambiando solo el porcentaje de luminosidad.

Históricamente, Sass ofrecía aclarar() y oscurecer() como atajos para el mismo cambio de claridad. El equipo de Sass desaprobó ambas funciones a partir de Dart Sass 1.79.0, indicando a los desarrolladores hacia color.scale() y color.adjust() en su lugar.

Qué se rompe sin esta actualización: un archivo Sass que todavía llama a lighten() sigue funcionando por ahora, pero imprime una advertencia de obsolescencia y fallará por completo una vez que una futura versión importante de Dart Sass elimine la función.

¿Cómo se convierte RGB a HSL en JavaScript y Python?

JavaScript

JavaScript no tiene ningún método integrado para esta conversión. Cada implementación está escrita a mano o extraída de una biblioteca.

La versión escrita a mano sigue los mismos cinco pasos que la fórmula manual: normaliza los valores RGB en JavaScript (EN), encuentra el máximo y el mínimo, luego deriva la luminosidad, la saturación y el tono en ese orden.

• Error común: olvidar dividir cada canal RGB entre 255 antes de ejecutar el resto de la fórmula
• Error común: dejar el tono sin definir cuando la saturación es cero, ya que los tonos grises no tienen un tono significativo que informar

D3.js ejecuta una conversión equivalente dentro de su módulo interpolateHsl, pasando por el tono, la saturación y la luminosidad para animar transiciones de color suaves.

Python

La biblioteca estándar de Python incluye un módulo coloursys con una función rgb_to_hls() incorporada, según la documentación oficial de Python (EN).

Un detalle del nombre hace tropezar a la gente: la función devuelve valores en orden H, L, S, no H, S, L, y cada valor es un valor flotante entre 0 y 1 en lugar de grados o porcentajes.

Convertir la salida de Python en un valor listo para CSS significa multiplicar el tono por 360 y las otras dos cifras por 100 antes de escribirlas en una hoja de estilo.

¿Cuándo no se aplica la conversión de RGB a HSL?

Un convertidor de RGB a HSL tiene límites claros y pretender lo contrario conduce a errores de color reales.

Cinco situaciones en las que no ayuda:

• Producción de impresión, donde el color se especifica en CMYK y ni los números RGB ni HSL se transfieren directamente a la tinta
• Comparación de colores directos con un libro de muestras de Pantone, emparejados mediante ojo y fórmula en lugar de derivarse de RGB matemáticas
• Flujos de trabajo de edición de fotografías creados alrededor de controles deslizantes HSB, donde un ajuste de luminosidad no se asigna uno a uno al eje de luminosidad de HSL
• Colores casi blancos, casi negros o completamente desaturados, donde el valor de tono convertido se vuelve matemáticamente inestable
• Sistemas heredados que solo aceptan códigos hexadecimales de 8 bits, donde la salida HSL aún necesita un paso de conversión adicional

La impresión queda completamente fuera del alcance de esta conversión, ya que los valores de color CMYK responden a la cobertura de tinta en lugar de a los números RGB o HSL basados en la luz, como explica el desglose RGB frente a CMYK (EN).

También vale la pena considerar la inestabilidad en los extremos. Cuando la saturación llega al 0%, hue no está definido por la fórmula misma, ya que no queda color para colocar en la rueda.

La mayoría de los convertidores establecen por defecto un tono indefinido de 0° en lugar de dejar el campo en blanco, lo que puede engañar silenciosamente a cualquiera que lea el número como significativo.

Tanto RGB como HSL también comparten el mismo límite exterior. Ambos operan dentro del espacio de color sRGB, estandarizado por IEC como IEC 61966-2-1 en 1999, por lo que ninguno de los modelos puede expresar un color que quede fuera de esa gama, sin importar cómo se conviertan los números.

Un proveedor de impresión que coincida con Pantone 286 C, un azul corporativo común, obtiene un resultado más preciso del libro de muestras físico que de cualquier cadena de conversión de RGB a HSL a CMYK.

Preguntas frecuentes: Conversor de RGB a HSL

¿Por qué RGB y HSL redondean de manera diferente entre herramientas?

Las diferencias de redondeo provienen de una herramienta que trunca decimales, no de una fórmula diferente. Algunos convertidores redondean el tono al grado más cercano; otros mantienen un decimal. La misma entrada RGB puede mostrarse como 209° en una herramienta y 210° en otra.

¿Cuál es la diferencia entre HSL y HSLA?

HSLA agrega un cuarto valor, alfa, a los mismos números de tono, saturación y luminosidad. Alfa varía de 0 a 1 y controla la transparencia en lugar del color. Modern CSS trata hsla() como un alias; hsl() ahora también acepta un canal alfa opcional.

¿Pueden los valores de tono exceder los 360 grados?

Un valor de tono técnicamente pasa de 360°, ya que la rueda de colores es circular. 400° y 40° apuntan al mismo color. La mayoría de los convertidores normalizan automáticamente la salida al rango de 0-360°, por lo que en la práctica rara vez aparece un valor superior a 360.

¿Todos los navegadores admiten la función CSS hsl()?

Todos los principales navegadores actuales admiten hsl(), incluida su sintaxis heredada separada por comas y la nueva sintaxis separada por espacios CSS Módulo de color nivel 4. Internet Explorer 9 y versiones posteriores entendieron la sintaxis de comas, pero nunca la forma separada por espacios, por lo que una alternativa basada en comas o hexadecimal sigue siendo importante para el trabajo de compatibilidad heredada.

¿Qué tan precisos son los convertidores en línea de RGB a HSL?

La conversión nativa del navegador, a través de DevTools o el propio CSS, es autorizada y exacta. Los convertidores web de terceros ejecutan la misma fórmula y normalmente coinciden con dos o tres decimales. Las diferencias de color visibles debido al redondeo son efectivamente imperceptibles, por lo que la precisión rara vez es una preocupación práctica.

¿Qué debe hacer primero con un convertidor de RGB a HSL?

Un convertidor de RGB a HSL se mantiene primero en el momento en que se elige un color base, convirtiendo ese único RGB o valor hexadecimal en tono, saturación y luminosidad antes de que se genere cualquier variación de tono, matiz o tema a partir de él.

• Elige el color base en RGB o hexadecimal
• Ajustar la luminosidad antes que el tono cuando el objetivo es el contraste
• Convierta el valor final nuevamente a hexadecimal o RGB para producción

La auditoría de WebAIM de 2025 encontró texto de bajo contraste en 79.1% de las páginas de inicio, y el umbral de texto normal de WCAG se ubica en 4.5:1, una proporción basada en la luminancia relativa. HSL la luminosidad no es la misma medida, pero aumentarla o disminuirla es la forma más rápida de mover la luminancia, por lo que ajustar la luminosidad primero soluciona la mayoría de los pares defectuosos antes de tocar el tono o la saturación.

Ese atajo aclara el caso común, no todos los casos, cambiando una auditoría de contraste completa por velocidad. La transferencia de producción después de ese paso generalmente comienza con una conversión de hex a RGB cuando la muestra original proviene de una guía de marca.