Convertidor HSL a RGB

Cómo convertir HSL a RGB

HSL
Matiz 0–360; S y L 0–100 %.
RGB
R, G y B (0–255) calculados.
Copiar
Copia rgb() para código o diseño.

¿HSL a RGB?

Para usar un color elegido en HSL en flujos que exigen RGB.

Beneficios de RGB

Web: rgb() en CSS
Control: canales discretos
Compatibilidad: pantallas y motores
Manipulación de color: Más fácil manipular canales de color individuales
Compatibilidad universal: Admitido por todas las plataformas y herramientas digitales

HSL frente a RGB

HSL ayuda a elegir; RGB es lo que muchas APIs gráficas consumen.

HSL

Perceptivo: tono, vivo, claro
Representación intuitiva del color
Fácil de ajustar en brillo y saturación
Muy usado en herramientas de diseño
Más intuitivo para elegir colores

RGB

Aditivo para luz en pantalla
Cada componente va de 0 a 255
Control de color más preciso
Formato estándar para el diseño digital
Compatible con todas las herramientas de diseño

El tono da la vuelta, y el gris no tiene tono

El tono es un ángulo, y los ángulos se comportan de forma distinta a los otros dos canales, con resultados sorprendentes si los tratas como números normales.

0 y 360 son el mismo punto — También 720, y también -60, que es 300. Cualquier tono se ajusta a una vuelta completa, por eso un valor muy fuera de 0-360 sigue dando un color razonable.
Se aceptan cuatro unidades — 120, 120deg, 0.333turn, 133.33grad y 2.094rad significan el mismo tono. Las herramientas de diseño y CSS usan varias, y pegar la equivocada es un error común que esta página absorbe.
Con 0% de saturación el tono no hace nada — Cualquier tono da el mismo gris. Aquí el tono no se pierde: permanece en el campo para que al subir la saturación llegues donde querías.
El resultado se redondea a 8 bits — Los canales RGB son enteros de 0 a 255, así que dos valores HSL muy próximos pueden dar el mismo trío RGB. Es una propiedad del destino, no de la conversión.

Cuándo

Al exportar a código, assets o pantallas.

Casos

Código: rgb() fijo
Software de diseño: Convierte para usarlo en aplicaciones de diseño
Manipulación de color: Ajusta canales de color individuales
Proyectos digitales: Garantiza una reproducción de color exacta
Programación: Usa valores RGB en código y scripts

Datos

Resumen.

Puntos

Bidireccional con RGB→HSL en el mismo espacio
RGB usa valores de rojo, verde y azul (0-255 cada uno)
La conversión mantiene la precisión del color
HSL es más intuitivo para elegir colores
RGB es más preciso para manipular colores

Prácticas

Verifica en el dispositivo.

Calidad

Mantén S y L en 0–100
Usa rangos HSL válidos (H: 0-360, S: 0-100%, L: 0-100%)
Comprueba la exactitud de los valores RGB
Prueba los colores en la aplicación de destino
Ten en cuenta el espacio de color y los límites de gama

Cuándo no

Si tu herramienta acepta HSL nativo
Mantén HSL para las herramientas de diseño que lo admiten
Evita convertir si no necesitas compatibilidad de formato
No conviertas para aplicaciones que ya admiten HSL

Límites

Dispositivo moderno con JavaScript.

Impulsado por algoritmos optimizados de procesamiento de imagen.

Los demás convertidores de color

Preguntas frecuentes

¿Cómo funciona el convertidor de HSL a RGB?

Introduce un matiz de 0 a 360 grados junto con los porcentajes de saturación y luminosidad, y la herramienta aplica la fórmula estándar de HSL a RGB para calcular cada canal. Los valores de rojo, verde y azul de 0 a 255 y una vista previa en vivo se actualizan al instante mientras ajustas.

¿Cuáles son los rangos válidos de HSL?

El matiz es un ángulo en la rueda de color de 0 a 360 grados, donde 0 es rojo, 120 es verde y 240 es azul. La saturación y la luminosidad son porcentajes de 0 a 100; la saturación controla la intensidad y la luminosidad va del negro, pasando por el tono puro, hasta el blanco.

¿Por qué convertir de HSL a RGB?

HSL es intuitivo para elegir y ajustar colores porque cambias matiz, saturación y luminosidad por separado, pero las pantallas y muchas API esperan RGB. Convertir te permite diseñar en HSL y exportar valores RGB listos para producción en CSS, canvas y otros flujos basados en RGB.

¿La conversión de HSL a RGB es exacta?

Sí. La conversión usa el estándar de HSL a RGB definido matemáticamente, así que el mismo color se representa fielmente en ambos formatos. Los valores de cada canal se redondean al entero más cercano de 0 a 255, la precisión exacta que usan las pantallas y CSS para mostrar color.

¿Mis colores se mantienen privados?

Sí. Todo el cálculo ocurre localmente en tu dispositivo, así que los valores HSL de entrada y la salida RGB nunca se suben a un servidor ni se guardan. Nada sale de tu dispositivo, lo que mantiene tu paleta y tus colores de proyecto privados incluso al trabajar en diseños sin publicar.

¿Es gratis y puedo usar los valores RGB en CSS?

Sí. El convertidor es gratis (hasta 200 colores por conversión en el plan gratuito; Pro elimina el límite) y funciona en cualquier dispositivo moderno en escritorio y móvil, incluso sin conexión una vez cargado. Copia los valores RGB con un clic y pégalos en una declaración rgb() en CSS, o en software de diseño y código.