Conversor de RGB a HSL

El conversor de RGB a HSL transforma valores RGB como rgb(59, 130, 246) en valores HSL como hsl(217, 91%, 60%). Ambos describen el mismo color, pero RGB lo hace mediante tres canales de luz, mientras que HSL lo describe como Tono, Saturación y Luminosidad — una forma mucho más intuitiva de ajustar y variar un color.

Convertir RGB a HSL es el primer paso cuando quieres aclarar, oscurecer o desaturar un color de forma programática: estas operaciones son sencillas en HSL, pero incómodas en RGB puro.

Por qué convertir a HSL

Ajustar el brillo

Cambia solo la luminosidad para crear estados de hover, activo y deshabilitado consistentes a partir de un color base.

Controlar la intensidad

Ajusta la saturación para que un color destaque más o para apagarlo en fondos sutiles.

Paletas armónicas

Desplaza el tono en pasos iguales para crear esquemas de color complementarios o análogos.

Cómo convertir de RGB a HSL

Introduce los valores RGB

Escribe tus tres canales — por ejemplo 59, 130, 246. Funcionan comas o espacios, y puedes envolver los valores en rgb(...) si lo prefieres.

Lee el resultado HSL

El valor HSL se calcula al instante mientras escribes, y la muestra en vivo se actualiza para que verifiques el color visualmente.

O elige un color

Haz clic en la muestra para abrir el selector de color nativo y elegir un color visualmente: los campos RGB y HSL se actualizan automáticamente.

Copia y reutiliza

Copia la cadena hsl() directamente en tu CSS. El panel inferior también muestra HEX, RGB, HSV y CMYK.

Características

RGB frente a HSL

RGB

Tres canales de luz

Coincide con cómo las pantallas emiten color
Difícil de "aclarar" sin alterar el tono
Valores de 0 a 255 por canal

HSL

Modelo intuitivo

Luminosidad y saturación son controles separados
Tintes, sombras y paletas fáciles
Tono 0–360°, S y L de 0 a 100%

Salida en tiempo real

Los resultados se actualizan mientras escribes, todo en el navegador.

Todos los formatos a la vez

HEX, RGB, HSL, HSV y CMYK mostrados juntos para cada color.

Preguntas frecuentes

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

RGB define un color mezclando luz roja, verde y azul. HSL define el mismo color por su tono (tipo de color), saturación (intensidad) y luminosidad (brillo) — una reorganización de los mismos datos en términos más intuitivos.

¿Cuándo debería usar HSL?

Usa HSL cuando necesites crear variaciones de color — sombras más claras u oscuras, o versiones más o menos vivas — sin cambiar el tono base. Es ideal para temas y estados de interfaz.

¿La conversión es precisa?

Sí. La matemática es precisa; el mismo RGB siempre produce el mismo HSL. Los valores HSL se redondean a enteros por legibilidad, lo que puede variar una unidad en un ida y vuelta, pero se ve idéntico.

¿Qué valores RGB son válidos?

Cada uno de los tres canales debe ser un entero de 0 a 255. Introdúcelos separados por comas o espacios, con o sin el envoltorio rgb().

¿Puedo pegar la salida HSL directamente en CSS?

Sí. La salida usa la sintaxis estándar hsl(h, s%, l%) que admite cualquier navegador moderno, así que entra directo en una hoja de estilos.