Conversor de HSL a RGB

Este convertidor de HSL a RGB transforma valores de color HSL en varios formatos al instante. Ajusta el tono, la saturación, la luminosidad y el canal alfa con controles deslizantes precisos o campos numéricos. Después, haz clic en cualquier resultado para copiarlo.

Última actualización: 23 de septiembre de 2026

Características clave

• Conversión en tiempo real a RGB, RGBA, HEX, HSL, HSLA y CSS

• Vista previa visual del color se actualiza a medida que ajusta los valores

• Haga clic para copiar en cualquier valor de salida, también con Enter o Espacio desde el teclado

• Colores preestablecidos para pruebas rápidas (rojo, verde, azul, amarillo, cian, magenta, negro, blanco)

• Entradas sincronizadas: los controles deslizantes y los campos numéricos permanecen sincronizados

• Soporte de canal alfa para control de transparencia

Lo que obtienes

Seis formatos de color, que se muestran aquí para el hsl predeterminado(200, 70%, 50%):

• RGB: rgb(38, 157, 217)

• RGBA: rgba(38, 157, 217, 1.00)

• HEX: #269DD9

• HSL: hsl(200, 70%, 50%)

• HSLA: hsla(200, 70%, 50%, 1.00)

• CSS Variable: --color: #269DD9;

Creado para diseñadores y desarrolladores que necesitan conversiones de color precisas sin pasos adicionales.

¿Qué es un convertidor de HSL a RGB?

Un conversor de HSL a RGB es una pequeña utilidad que convierte un valor de tono, saturación y luminosidad en los números correspondientes de rojo, verde y azul.

Ejecuta una fórmula fija, no una suposición. Introdúzcalo con los mismos tres números dos veces y obtendrá exactamente el mismo resultado cada vez.

Esto es diferente de un selector de color, que permite a alguien seleccionar o probar un tono a simple vista en lugar de calcularlo matemáticamente.

• Un selector de color selecciona un tono visualmente, a menudo haciendo clic en una muestra.
• Un conversor calcula el valor equivalente en un modelo de color diferente
• Los dos suelen sentarse uno al lado del otro en el software de diseño, pero hacen trabajos diferentes.

La mayoría de las hojas de estilo todavía se basan en valores hexadecimales o simples RGB. El uso directo de hsl() aparece en menos del 1% de las declaraciones de color en la web (HTTP Archive Web Almanac, 2022).

De todos modos, las herramientas de diseño tienen controles deslizantes predeterminados HSL, ya que el modelo coincide intuitivamente con la forma en que la gente piensa sobre el color. Un convertidor se convierte en el puente hacia cualquier formato que el código realmente necesite.

La herramienta aparece en la frontend (EN) de un sitio, dentro de una hoja de estilo o un script de compilación que prepara los valores de color antes de que se procese algo.

También aparece en el backend (EN), en scripts de procesamiento de imágenes o canales de color que generan valores antes de que una plantilla los toque.

¿Cuáles son los rangos de valores de entrada y salida para la conversión de HSL a RGB?

El tono va de 0 a 360 grados, la saturación y la luminosidad van de 0 a 100 por ciento y el convertidor genera valores de rojo, verde y azul entre 0 y 255.

Los valores enviados fuera de estos límites se fijan o ajustan en lugar de rechazarse, según la implementación.

Cifras clave (CSS Módulo de color Nivel 4, W3C):

• Tono: 0 a 360 grados, o una unidad de ángulo equivalente
• Saturación: 0% a 100%
• Luminosidad: 0% a 100%
• RGB salida: 0 a 255 por canal (8 bits), o 0 a 1 normalizado

Esa escala de 0 a 255 es la misma que se usa en todos los demás lugares donde aparece el color RGB, desde códigos hexadecimales hasta datos de píxeles del lienzo.

La salida 8-bit es el destino predeterminado simplemente porque es lo que los navegadores, los formatos de imagen y la mayoría del software de diseño ya esperan.

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

La fórmula calcula primero un valor de croma, localiza en qué segmento de 60 grados del círculo de tono cae la entrada y luego cambia todo según la luminosidad.

Seis combinaciones diferentes de rojo, verde y azul se asignan a los seis segmentos de 60 grados de ese círculo.

El camino de los seis pasos:

1. Calcular croma a partir de saturación y luminosidad.
2. Divide el tono por 60 para encontrar en qué segmento cae
3. Derive un valor intermedio, a menudo etiquetado como X, para ese segmento.
4. Asigne croma, X y 0 a rojo, verde y azul según el segmento
5. Agregue un valor de coincidencia de luminosidad a cada canal para colocarlo en su lugar
6. Multiplica por 255 y redondea para obtener el número entero final RGB

En realidad, son solo dos modelos de color que intercambian lugares matemáticamente, más cerca en la práctica de lo que parece la mayoría de las comparaciones HSL vs RGB.

Al ejecutar la entrada predeterminada a través de esos pasos: hsl(200, 70%, 50%) da un croma de 0.7, aterriza en el segmento de 180 a 240 grados y sale como rgb(38, 157, 217) o #269DD9.

Nada sobre los cambios matemáticos según el lenguaje de programación. Sólo la sintaxis que lo rodea lo hace.

¿Cómo se maneja el redondeo y la precisión en la conversión de HSL a RGB?

Dos bibliotecas de colores pueden ejecutar exactamente la misma entrada HSL y obtener un número entero de diferencia en un valor de canal, y ambas seguirían siendo correctas.

Esa brecha proviene del redondeo, no de un error.

De dónde viene la deriva:

• La fórmula sin formato genera números de punto flotante entre 0 y 1
• Multiplicar por 255 rara vez da como resultado un número entero
• Algunas implementaciones son redondas, otras son planas (truncadas) y las dos no están de acuerdo cerca del punto medio.

Encadenar conversiones lo empeora. Pasar de RGB a HSL y volver a RGB puede desviar un canal uno o dos puntos solo debido al error de punto flotante acumulado.

Esa pequeña desviación es más importante justo antes de que un valor se convierta en un código de color hexadecimal, ya que hexadecimal no tiene espacio para canales fraccionarios.

¿Cómo maneja la conversión los colores acromáticos y el tono envolvente?

Dos condiciones rompen la ruta normal de la fórmula: saturación cero y un valor de tono que supera los 360.

Ambos se manejan explícitamente, no se tratan como errores.

Colores acromáticos (saturación en cero)

Saturación cero: al color no le queda nada que describir.

Cuando la saturación llega al 0%, no queda ningún tono en la rueda al que señalar, por lo que el tono deja de tener significado.

• Rojo, verde y azul se configuran con el mismo valor
• Ese valor compartido es igual a la luminosidad, escalada en el rango de 0 a 255.
• Hue se convierte en lo que la especificación llama un componente impotente

Una luminosidad del 50% con 0% de saturación produce un gris medio, rgb(128, 128, 128), sin importar el valor de tono que se encuentre en la entrada.

Tono envolvente en 360 grados

El tono es circular, por lo que los valores se repiten en lugar de detenerse en un límite.

Un tono de 480 grados se comporta exactamente como 120 grados, y un tono de 120 grados negativos se comporta exactamente como 240 grados (W3C, CSS Módulo de color).

La mayoría de las implementaciones manejan esto con una operación de módulo antes de que se ejecute la fórmula, doblando cualquier tono fuera de rango nuevamente en la ventana de 0 a 360.

Si omite ese paso, un tono de 400 se tratará como una entrada rota en lugar de ser simplemente 40.

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

Escribe el color como hsl() y el navegador lo convertirá a RGB internamente, sin necesidad de realizar ningún otro paso.

El motor de renderizado hace los cálculos en el momento en que se carga la hoja de estilo, utilizando sRGB como espacio de color de destino.

El clásico hsl() separado por comas ha funcionado en todos los navegadores principales durante más de una década.

La nueva sintaxis CSS (EN) elimina las comas por completo, escribiendo algo como hsl(200 80% 50%) en lugar del antiguo hsl(200, 80%, 50%), y acepta un valor alfa opcional después de una barra diagonal. (CSS Módulo de color Nivel 4 (EN), W3C). Esa forma moderna alcanzó el estado Línea de base ampliamente disponible (EN) en julio de 2022.

Cuando aún se necesita la conversión manual:

• Contextos Canvas y WebGL que esperan elementos flotantes sin formato RGB o normalizados
• Exportar un valor hexadecimal estático para usarlo fuera del navegador
• Entornos sin ningún motor de renderizado CSS, como diseños móviles nativos

Ir en sentido contrario es igualmente común. Cualquiera que comience con un valor RGB y desee el equivalente HSL puede ejecutarlo a través de un convertidor RGB a HSL en lugar de invertir las matemáticas a mano.

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

La misma fórmula funciona en cualquier idioma. Sólo cambian la sintaxis y los rangos de valores predeterminados.

JavaScript Implementación

Sin función nativa: la fórmula se escribe directamente en el script.

• Tome el tono, la saturación y la luminosidad como números, grados y porcentajes simples.
• Normalice la saturación y la luminosidad a un rango de 0 a 1 antes de ejecutar los cálculos
• Multiplique el resultado final por 255 y redondee para obtener una salida estándar de 8 bits

Una docena de líneas de código cubren toda la función. No se requiere dependencia.

Implementación de Python

La biblioteca estándar de Python envía la conversión ya creada, a través del módulo coloursys.

coloursys.hls_to_rgb() toma sus tres argumentos en h, l, s orden, no h, s, l (Documentación de Python (EN)), lo que hace tropezar a cualquiera que transfiera código de un lenguaje que sigue el orden estándar HSL.

Una diferencia más: coloursys espera tono, luminosidad y saturación como fracciones entre 0 y 1, no grados ni porcentajes.

Multiplique el tono por 360 y los otros dos por 100 para obtener números familiares de HSL, o divida por esas mismas cantidades.

¿Debería convertir HSL a RGB manualmente o utilizar una biblioteca o herramienta?

Escribir la fórmula usted mismo tiene sentido cuando el tiempo de ejecución no tiene dependencias disponibles y desea tener un control total sobre el comportamiento del redondeo.

Buscar una biblioteca existente tiene sentido en cualquier otro lugar, especialmente una vez que alfa, otros modelos de color o el análisis de cadenas entran en escena.

Escribiéndolo manualmente:

• No hay dependencia para instalar, auditar o actualizar más tarde
• Control total sobre el redondeo y el formato de salida
• Más código para probar y mantener a medida que crecen los requisitos

Usando una biblioteca:

• Maneja casos extremos, alfa y múltiples formatos de color listos para usar
• Reduce el tiempo de desarrollo en cualquier cosa más allá de una única conversión.
• Agrega una dependencia y algo de peso del paquete al proyecto.

El tamaño del paquete varía mucho entre las bibliotecas creadas para este trabajo. tinycolor2 se envía a aproximadamente 5KB comprimidos, chroma-js a 13,7KB y color2k a 2,8KB, según la comparación de tamaños publicada por color2k (color2k, documentación del paquete npm).

La magnitud de esa conveniencia se muestra en las cifras de adopción. color-convert por sí solo registra aproximadamente 200 millones de descargas semanales en el registro npm (datos del paquete Snyk, 2025), mucho más tráfico del que las matemáticas de color de cualquier proyecto justificarían escribir desde cero.

¿Dónde se utiliza realmente la conversión de HSL a RGB?

La conversión se ubica silenciosamente detrás de casi cualquier cosa que permita a alguien elegir un color visualmente y luego enviar ese color como código.

Cuatro lugares representan la mayor parte de ese tráfico.

Software de diseño:

• Figma, Photoshop y Sketch exponen HSL o controles deslizantes HSB porque los modelos basados en tonos coinciden con la forma en que las personas ajustan el color de manera intuitiva
• Cada arrastre del control deslizante se convierte a RGB en el momento en que necesita renderizarse o exportarse

Hojas de estilo y tokens de diseño:

El sistema de temas de shadcn/ui almacenó durante mucho tiempo cada color como números de componentes HSL sin procesar, algo así como 222.2 47.4% 11.2% para un color primario, luego envolvió ese valor en hsl() en el punto de uso. Desde entonces, sus temas Tailwind v4 se han trasladado a OKLCH (documentación shadcn/ui).

De cualquier manera, el patrón permite que todo un sistema de diseño cambie el tono o la saturación entre docenas de componentes editando una sola variable.

Procesamiento de imágenes:

• Pillow y GIMP ajustan el tono o la luminosidad mediante programación y luego vuelven a convertir a RGB antes de guardar un archivo
• Los scripts por lotes que cambian el color de las fotografías de productos de forma masiva suelen ejecutar esta ruta exacta

Las bibliotecas de gráficos también se apoyan en ello. Generan una variedad de tonos con una saturación y luminosidad fijas, luego convierten cada uno a RGB para los píxeles que realmente llegan a la pantalla.

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

La fórmula en sí nunca se rompe. Lo que rompe es la suposición de que su salida representa todos los colores que una pantalla puede mostrar.

Donde se queda corto:

• Colores de amplia gama: HSL se basa en sRGB y Display P3 cubre aproximadamente un 50% más de espacio de color que sRGB (WebKit, 2020). Cualquier cosa en ese rango adicional no tiene una ruta precisa de HSL a RGB
• HSL se confunde con HSV o HSB: las letras se ven similares, pero las fórmulas difieren, y ejecutar un valor HSV a través de una fórmula HSL produce un color completamente incorrecto
• Entradas no normalizadas: pasar 50 en lugar de 0.5 para saturación en una función que espera una escala de 0 a 1 devuelve un valor muy fuera de cualquier rango utilizable
• Alpha cayó silenciosamente: convertir HSLA a RGB sin llevar el canal alfa hacia adelante produce un color opaco donde se esperaba transparencia

El canal de luminosidad tiene su propio punto débil conocido. La especificación CSS Módulo de color nivel 4 utiliza azul y amarillo con el mismo 50% de luminosidad que su propio ejemplo, y los dos tonos no parecen igual de claros para el ojo humano (W3C, CSS Módulo de color nivel 4).

Esa brecha entre la luminosidad numérica y la luminosidad percibida es la razón por la que existen espacios de color más nuevos como Oklch. No es un defecto específico de ningún convertidor.

Nada de esto hace que la conversión no sea confiable. Significa que la conversión responde a una pregunta más concreta que cómo se ve un color en todas las pantallas posibles.

Preguntas frecuentes: Conversor de HSL a RGB

¿Qué significan las letras HSL y RGB?

HSL significa tono, saturación y luminosidad, los canales que describen la posición de un color en la rueda, su intensidad y su brillo. RGB significa rojo, verde y azul, los canales aditivos se ilumina una pantalla para mostrar ese color.

¿Es HSL lo mismo que HSV o HSB?

No. HSV y HSB nombran el mismo modelo, usando valor o brillo como tercer canal en lugar de luminosidad. Un valor de saturación del 100% significa un tono diferente en cada modelo, por lo que ejecutar un valor HSV a través de una fórmula HSL arroja el color incorrecto.

¿Se puede convertir HSLA a RGBA de la misma manera?

Sí. Los canales de tono, saturación y luminosidad se convierten exactamente como el estándar HSL, y el canal alfa se transmite directamente sin cambios, ya que ambos formatos expresan la transparencia de manera idéntica, como un decimal entre 0 y 1 o un porcentaje coincidente.

¿Se puede convertir HSL directamente a un código hexadecimal?

Sí, aunque ocurre en dos pasos. La fórmula produce RGB primero, y cada uno de los tres valores de 0 a 255 luego se convierte en un par hexadecimal de dos dígitos, dando el código hexadecimal de seis caracteres utilizado en CSS y las herramientas de diseño.

¿Dónde deja de ser suficiente la matemática del convertidor de HSL a RGB?

La fórmula de un convertidor HSL a RGB deja de ser suficiente en el Edge del espacio de color sRGB, ya que el algoritmo asigna tono, saturación y luminosidad a los 16.7 millones de colores que sRGB puede expresar.

hsl() es totalmente compatible con el navegador, pero aún así apareció en menos del 1% de las declaraciones de color en 2022 (HTTP Archive Web Almanac, 2022). El soporte nativo completo combinado con un uso directo insignificante muestra dónde ocurre realmente la conversión: dentro de las herramientas de diseño y bibliotecas anteriores a la hoja de estilo.

La salida estándar de 8 bits cubre esos mismos 16.7 millones de colores. Los flujos de trabajo de amplia gama se mueven a 16 bits por canal para mantener gradientes suaves en un espacio de color más grande (Apple Developer, WWDC 2017), por lo que aceptar matemáticas de 8 bits compra compatibilidad universal y renuncia a la precisión adicional que esas pantallas pueden mostrar.

Enviar esa salida RGB a imprimir necesita una conversión adicional, ya que las impresoras usan primarios diferentes, manejados por un convertidor RGB a CMYK.