Skip to main content

Conversor de HSL a RGB Convierta valores de HSL a RGB con controles deslizantes interactivos y vista previa en vivo.

Conversor de HSL a RGB illustration
🎨

Conversor de HSL a RGB

Convierta valores de HSL a RGB con controles deslizantes interactivos y vista previa en vivo.

1

Establecer valores de HSL

Ajusta los controles deslizantes de Matiz (0-360°), Saturación (0-100%) y Luminosidad (0-100%).

2

Ver salida RGB

Observa cómo se actualizan instantáneamente los valores Rojo, Verde y Azul.

3

Copiar valores RGB

Copia la función CSS rgb() para usarla en tu proyecto.

Loading tool...

What Is Conversor de HSL a RGB?

Un convertidor de HSL a RGB transforma los valores de color de matiz, saturación y luminosidad en valores de canal rojo, verde y azul. Esta conversión es esencial cuando se han diseñado colores utilizando el modelo HSL intuitivo y se necesitan implementar en sistemas que solo aceptan RGB, como algunas API gráficas, sistemas de control de LED o software antiguo. El modelo HSL te permite pensar en color conceptualmente - qué matiz, cuán vivo, cuán brillante - mientras que RGB es el lenguaje nativo de las pantallas digitales. El convertidor cubre esta brecha, tomando tus elecciones de color amigables para humanos y produciendo los valores precisos del canal necesarios para la reproducción digital. Cada canal de salida varía desde 0 hasta 255, dándote los valores exactos necesarios para las funciones CSS rgb(), operaciones de la API Canvas o cualquier sistema de color basado en RGB.

Why Use Conversor de HSL a RGB?

  • Controles de HSL intuitivos para una exploración natural del color
  • Valores precisos de los canales RGB mostrados en un formato grande y legible
  • Vista previa en tiempo real que muestra el resultado exacto del color
  • Cadena rgb() lista para usar en CSS
  • Rápido y gratuito - no se requiere registro ni instalación

Common Use Cases

Programación gráfica

Convierte colores definidos por HSL a RGB para parámetros de color de WebGL, Canvas o motores de juego.

LED y hardware

Obtén valores RGB para controlar tiras de LED RGB, luces inteligentes o dispositivos IoT que requieren entradas R, G, B.

Integración del sistema de color

Conecta tokens de diseño basados en HSL con frameworks o sistemas heredados que solo admiten RGB.

Educación

Entiende cómo las propiedades perceptuales de HSL se relacionan con el modelo de color aditivo RGB.

Technical Guide

El algoritmo de conversión de HSL a RGB calcula el croma C = (1 - |2L - 1|) × S, donde S y L se normalizan a 0-1. Un valor intermedio X = C × (1 - |(H/60) mod 2 - 1|) determina el segundo componente de color más grande. Según el sector del matiz (0-60°, 60-120°, etc.), se asignan valores RGB temporales utilizando C, X y 0. Finalmente, se agrega un desplazamiento de luminosidad m = L - C/2 a todos los canales y los resultados se escalan desde 0-1 hasta 0-255. Los seis sectores del matiz crean transiciones suaves: 0-60° combina rojo con amarillo, 60-120° amarillo con verde, y así sucesivamente alrededor de la rueda. En S=0, todos los canales RGB son iguales a L×255 (gris). En L=0, todos los canales son 0 (negro). En L=1, todos los canales son 255 (blanco). El algoritmo es matemáticamente preciso y determinista - la misma entrada HSL siempre produce la misma salida RGB.

Tips & Best Practices

  • 1
    HSL (0, 100%, 50%) produce RGB (255, 0, 0) - rojo puro
  • 2
    Cualquier valor de HSL con luminosidad del 0% da como resultado RGB (0, 0, 0), independientemente del matiz y la saturación
  • 3
    HSL con saturación del 0% produce valores R, G, B iguales (tonos grises)
  • 4
    Los valores de matiz se envuelven: 361° es lo mismo que 1°
  • 5
    Esta conversión se utiliza internamente en los navegadores para renderizar colores CSS hsl()

Related Tools

Frequently Asked Questions

Q ¿Es exacta la conversión de HSL a RGB?
Sí, la conversión es matemáticamente precisa. Puede ocurrir un ligero redondeo cuando se convierte el rango 0-1 a enteros 0-255, pero la diferencia de color es imperceptible.
Q ¿Qué valores RGB produce hsl(120, 100%, 50%)?
Produce rgb(0, 255, 0) - verde puro. El matiz 120° es verde, la saturación del 100% es completamente viva y la luminosidad del 50% es el tono puro sin oscurecer ni aclarar.
Q ¿Por qué existe HSL si las pantallas utilizan RGB?
HSL fue diseñado para humanos, no para máquinas. Mientras que las pantallas mezclan luz R, G, B, las personas piensan en el color en términos de qué color es, cuán vivo y cuán brillante. HSL se ajusta a esta intuición.
Q ¿Puedo convertir de RGB a HSL sin pérdida?
Sí, la conversión es completamente reversible. RGB → HSL → RGB devuelve los valores originales, con una diferencia máxima de ±1 debido al redondeo de enteros.

About This Tool

Conversor de HSL a RGB is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.