Cómo usar Convertidor RGB a HSL: guía completa (2026)

¿Qué es Convertidor RGB a HSL?

Un convertidor RGB a HSL pasa canales rojo/verde/azul (0-255) a tono, saturación y luminosidad - el modelo que usa CSS en hsl() - y al revés. El convertidor RGB a HSL gratis de ToolsMinify es bidireccional: edita RGB o HSL, mira la muestra en vivo y copia rgb(), hsl() o HEX. Corre en el navegador, sin registro ni subida.

Convierte RGB a HSL y HSL a RGB al instante. Convertidor de color gratis con muestra en vivo y CSS rgb() y hsl() listo para copiar.

¿Por qué usar Convertidor RGB a HSL?

• Convierte RGB ↔ HSL al escribir, con muestra en vivo
• CSS rgb() y hsl() listo para copiar, más HEX
• Selector de color nativo y muestras predefinidas
• Tono 0-360, saturación y luminosidad 0-100%
• 100% en el cliente - los colores no salen del navegador

Cómo usar Convertidor RGB a HSL paso a paso

1. Paso 1: Introduce R, G y B de 0 a 255, o elige un color con el selector nativo.
2. Paso 2: Lee los valores H, S y L (tono 0-360, saturación y luminosidad 0-100%).
3. Paso 3: Edita H, S o L para convertir al revés; RGB y la muestra se actualizan al instante.
4. Paso 4: Copia el CSS rgb() o hsl() (o el HEX) a tu hoja de estilo, sin registro.

La Convertidor RGB a HSL está en Convertidores. Abre la página de la herramienta, introduce tu texto o datos en el campo principal y los resultados se actualizan al instante. Usa el botón de copiar para pegar la salida en documentos, editores de código u hojas de cálculo.

Casos de uso comunes

hsl() de CSS desde un RGB de diseño

Pega R, G y B de Figma o una captura y copia hsl() para hojas de estilo modernas.

Ajustar el tono sin reconstruir RGB

Deja saturación y luminosidad fijas, gira el tono y copia el nuevo rgb() para una variante de paleta.

Paso entre herramientas HEX y HSL

Usa el convertidor HEX a RGB para un código #rrggbb y este convertidor para el camino HSL.

Enseñar modelos de color

Muestra por qué el gris tiene tono 0, por qué luminosidad 50% es un tono puro y cómo 100% de luminosidad se vuelve blanco.

Ejemplos

• Rojo puro: rgb(255, 0, 0) → hsl(0, 100%, 50%).
• Azul Tailwind 500: rgb(59, 130, 246) → hsl(217, 91%, 60%).
• Gris neutro: rgb(128, 128, 128) → hsl(0, 0%, 50%). El tono es 0 porque el gris no tiene saturación.
• HSL a RGB: hsl(120, 100%, 50%) → rgb(0, 255, 0) (verde puro).

Consejos profesionales

• Tono 0 = rojo, 120 = verde, 240 = azul. 360 vuelve a 0.
• Al 0% de saturación el color es gris y el tono no se nota hasta que subes S.
• Luminosidad 0% es negro, 100% es blanco, 50% es el tono 'puro' a saturación plena.
• RGB fuera de rango se limita a 0-255; S y L se limitan a 0-100.
• ¿Necesitas HEX, CMYK, contraste o una rampa de tintes? Abre el convertidor HEX a RGB.

Preguntas frecuentes

¿Cómo convierto RGB a HSL?

Introduce rojo, verde y azul de 0 a 255. La herramienta calcula tono (0-360), saturación (0-100%) y luminosidad (0-100%) y muestra el CSS hsl() para copiar. Ejemplo: rgb(255, 0, 0) es hsl(0, 100%, 50%).

¿Puedo convertir HSL a RGB?

Sí. Edita H, S o L y los canales RGB, el CSS rgb(), el HEX y la muestra se actualizan a la vez. El tono da la vuelta en 360; saturación y luminosidad se limitan a 0-100.

¿Qué significan H, S y L?

El tono es el ángulo en la rueda (0 rojo, 120 verde, 240 azul). La saturación es lo vivo del color (0% gris, 100% color pleno). La luminosidad es lo claro que es (0% negro, 50% puro, 100% blanco).

¿Por qué el tono es 0 en el gris?

Los grises tienen saturación 0%, así que el tono no está definido y este convertidor informa 0. Cambiar el tono en un gris no hace nada hasta que subes la saturación.

¿Es lo mismo que HEX a RGB?

No. El convertidor HEX a RGB sirve para códigos #rgb / #rrggbb, más CMYK, contraste y tokens. Esta herramienta es el camino RGB ↔ HSL. Combínalas si la spec mezcla HEX y HSL.

¿Sale el color de mi dispositivo?

No. El convertidor RGB a HSL corre por completo en tu navegador. Los valores no se suben ni se guardan en un servidor.

Herramientas relacionadas

Explora otras convertidores en ToolsMinify. En la página de Convertidor RGB a HSL encontrarás utilidades relacionadas para completar tu flujo sin salir del sitio.