Rojo
Introduce rojo 255, verde 0 y azul 0.
hsl(0, 100%, 50%)
Informática
Conversor RGB a HSL
Introduce los canales rojo, verde y azul como enteros de 0 a 255 y obtén el tono, la saturación y la luminosidad HSL. Consulta la vista previa y copia el resultado para utilizarlo en CSS.
Gratis
Sin registro
Uso inmediato
Convertir un color RGB a HSL
Introduce los datos necesarios y obtén el resultado.
Cómo convertir RGB a HSL
- Introduce los valores de rojo, verde y azul en sus respectivos campos.
- Pulsa «Convertir a HSL».
- Consulta los componentes HSL y copia el resultado.
La muestra de color representa el RGB introducido. Los valores HSL se redondean para facilitar su lectura y uso en una hoja de estilos.
Leer el tono, la saturación y la luminosidad
El tono recorre un círculo: rojo corresponde a 0 grados, verde a 120 y azul a 240. El resultado se normaliza entre 0 y menos de 360 grados; 360 equivale a 0. Una saturación del 0 % produce un gris. La luminosidad del 0 % corresponde al negro y la del 100 % al blanco.
HSL puede resultar cómodo para editar una misma familia de colores en CSS. Puedes consultar la definición y la conversión en CSS Color del W3C: conversión de sRGB a HSL.
Cómo se calcula la conversión
Los canales se dividen entre 255 para trabajar entre 0 y 1. La luminosidad se obtiene a partir de la media del canal máximo y el mínimo. Su diferencia permite calcular la saturación y, cuando es distinta de cero, determinar el tono según el canal dominante.
Si los canales son iguales, se evita dividir por cero: la saturación es cero
y se asigna tono 0 por convención. Por ejemplo, rgb(128, 128, 128)
se presenta como hsl(0, 0%, 50.2%).
Usar el resultado en CSS
Puedes utilizar el valor copiado en una propiedad como
background-color: hsl(210, 50%, 40%);.
Los números del código usan punto decimal y hasta dos decimales.
Si necesitas conservar exactamente los canales originales, guarda también el RGB.
La luminosidad HSL no sustituye una medición de contraste entre texto y fondo. Para evaluar una combinación, necesitas un cálculo de contraste específico.
Otras representaciones del mismo color
Si necesitas un código hexadecimal, utiliza el Conversor RGB a HEX. Si partes de un código HEX, obtén primero sus canales con el Conversor HEX a RGB.
Ejemplos
Algunos ejemplos prácticos para entender cómo utilizar esta herramienta.
Un color con tres canales distintos
Introduce rojo 51, verde 102 y azul 153.
hsl(210, 50%, 40%)
Gris y tono convencional
Introduce 128 en los tres canales.
hsl(0, 0%, 50.2%). El gris no tiene un tono definido; se utiliza 0 por convención.
Negro
Introduce 0 en los tres canales.
hsl(0, 0%, 0%)
Preguntas frecuentes
Resolvemos algunas dudas habituales sobre esta herramienta.
Introduce un entero de 0 a 255 en cada campo. No se admiten decimales, porcentajes ni canal alfa. Un campo vacío no se convierte en cero y los valores fuera de rango no se ajustan automáticamente.
H es el tono, expresado en grados; S es la saturación y L es la luminosidad, ambas expresadas como porcentajes. Son los tres componentes de la representación HSL del color.
El tono y los porcentajes se presentan con un máximo de dos decimales, sin ceros finales innecesarios. El redondeo puede introducir pequeñas diferencias si conviertes el resultado de nuevo a RGB. El código CSS utiliza punto como separador decimal.
Cuando los tres canales RGB son iguales, la saturación es 0 % y el tono no está definido. La herramienta utiliza 0 grados por convención para producir un resultado CSS numérico.
No. La luminosidad HSL no es la luminancia relativa utilizada para calcular contraste. Este conversor no evalúa si una combinación de texto y fondo cumple requisitos de accesibilidad.
Introduce cada canal en su campo. Por ejemplo, para rgb(51, 102, 153), escribe 51 en rojo, 102 en verde y 153 en azul, sin la función, las comas ni unidades.
No es necesario. La conversión se realiza localmente en tu navegador.
Última revisión:
11 de octubre de 2026