Conversor de color HSL a RGB

Los valores R, G, B del resultado muestran las intensidades de los canales rojo, verde y azul en una escala de 0 a 255. Puedes usarlos directamente en CSS como rgb(R, G, B) o en software de edicion de imagenes.

Primero se calcula un valor de 'croma' (C) a partir de la saturacion y la luminosidad. Se asignan valores temporales de R, G, B segun el segmento de 60 grados en el que cae el tono, y finalmente se suma un desplazamiento de luminosidad (m) y el resultado se escala al rango 0-255.

• La saturacion y la luminosidad se convierten de porcentaje a un rango de 0 a 1.
• Se calcula un valor de 'croma' (C) independiente del desplazamiento de luminosidad (m).
• Se determina el segmento de 60 grados en el que cae el valor de tono.
• Segun ese segmento, se asignan valores temporales (una combinacion de C, X, 0) a los canales R, G, B.
• Se suma el desplazamiento de luminosidad (m) y el resultado se multiplica por 255 para obtener los valores finales R, G, B.

H=210°, S=65 %, L=45 % (un azul vivo) equivale aproximadamente a R=40, G=115, B=189.

• Introduce el tono (H) entre 0 y 360 grados; 360 grados corresponde al mismo color que 0 grados (rojo).
• Introduce la saturacion y la luminosidad en porcentaje (0-100); los valores decimales dan un resultado mas preciso.
• Los valores RGB resultantes pueden salir en decimales; redondea al entero mas cercano al usarlos en pantalla o en CSS.

El modelo HSL (Tono, Saturacion, Luminosidad) es uno de los formatos que mas usan los disenadores al definir un color, porque ajustar tono, saturacion y luminosidad de forma independiente facilita crear variaciones de un color. Sin embargo, como las pantallas y la mayoria de los formatos de imagen procesan el color como RGB, un color definido en HSL debe convertirse a RGB antes de poder mostrarse.

Esta conversion se basa en determinar en que segmento de 60 grados de la rueda cromatica cae el tono (H); la rueda se divide en seis segmentos iguales de 60 grados, y en cada uno una combinacion distinta de los canales rojo, verde y azul se vuelve dominante.

La saturacion y la luminosidad determinan que tan 'ancho' (croma, C) sera el valor de los canales dentro de ese segmento. Una saturacion alta produce colores mas vivos, una saturacion baja produce colores mas apagados (cercanos al gris), y la luminosidad desplaza el resultado hacia el negro o el blanco.

Esta herramienta procesa los valores H, S, L que introduces siguiendo los pasos de conversion estandar para producir valores R, G, B listos para usar. Puedes usar los resultados en la funcion rgb() de CSS, en software de edicion de imagenes o en cualquier otra herramienta basada en color.

Convertir HSL a RGB es especialmente util para desarrolladores que necesitan trasladar colores de marca definidos con HSL en un sistema de diseno a herramientas de terceros — como editores de imagen antiguos o software de impresion — que esperan una entrada RGB o HEX.