Conversor de color RGB a HSL

El valor de tono (H) muestra la posicion de tu color en la rueda cromatica, la saturacion (S) muestra que tan vivo o apagado es, y la luminosidad (L) muestra que tan cerca esta del negro o del blanco. Juntos, estos tres valores se pueden usar directamente en CSS como hsl(H, S%, L%).

Primero R, G y B se escalan a un rango de 0 a 1. La luminosidad (L) es el promedio del canal mas alto y el mas bajo. La saturacion (S) es la diferencia entre canales en relacion con la luminosidad, y el tono (H) se calcula en un rango de 0 a 360 grados segun el canal dominante.

• Los valores R, G, B se dividen entre 255 para escalarlos a un rango de 0 a 1.
• Se identifican el valor mas alto (max) y el mas bajo (min) de los valores escalados.
• La luminosidad (L) se calcula como el promedio de los valores max y min.
• La saturacion (S) se obtiene normalizando la diferencia max-min en relacion con la luminosidad.
• El tono (H) se calcula en un rango de 0 a 360 grados segun el canal dominante (R, G o B).

R=52, G=152, B=219 (un azul vivo) equivale aproximadamente a H=204 grados, S=70 %, L=53 %.

• Introduce R, G y B como numeros enteros entre 0 y 255; los valores fuera de ese rango no representan un color valido.
• El tono (H) es una posicion en una rueda de color de 0 a 360 grados: 0 es rojo, 120 es verde, 240 es azul.
• La saturacion y la luminosidad se leen en porcentaje; 0 % de saturacion es un tono de gris y 100 % de luminosidad es blanco.

El modelo RGB (Rojo, Verde, Azul) refleja exactamente como las pantallas producen color emitiendo luz: cada canal toma un valor de intensidad de 0 a 255, y la combinacion de los tres canales produce millones de colores distintos. Sin embargo, este modelo no es intuitivo cuando quieres hacer un color 'mas claro' o 'mas vivo', porque tendrias que ajustar los tres canales a la vez.

El modelo HSL (Tono, Saturacion, Luminosidad) describe en cambio los colores tal como los percibe el ojo humano: el tono identifica de que color se trata (rojo, verde, morado), la saturacion muestra su intensidad, y la luminosidad muestra que tan claro u oscuro es. Por eso disenadores y desarrolladores suelen preferir HSL al construir paletas de color.

Esta herramienta escala tu entrada RGB a un rango de 0 a 1 y luego busca los valores de canal mas altos y mas bajos para calcular la luminosidad y la saturacion. Despues determina que canal es dominante para encontrar la posicion exacta del tono en la rueda cromatica.

La mayor ventaja del formato HSL es que se puede usar directamente en CSS como hsl(tono, saturacion%, luminosidad%). Por ejemplo, para crear una variante mas oscura del color principal de una marca, solo necesitas reducir la luminosidad; en RGB tendrias que recalcular los tres canales por separado.

Conversiones de color como esta son comunes en diseno web, creacion de logotipos, visualizacion de datos y sistemas de temas de interfaz. Convertir RGB a HSL es un punto de partida practico para desarrolladores que quieren crear variantes de tema claro/oscuro o una paleta de colores coherente.