Convertir RGB a HSL
Escribe un valor RGB y obtén HSL al momento. Todo se calcula en tu navegador: nada se envía a un servidor.
Cómo se calcula
Normaliza los tres canales a 0–1 y halla el máximo y el mínimo. La luminosidad es (máx+mín)/2, la saturación es su diferencia ajustada por la luminosidad y el tono depende de qué canal sea mayor.
RGB
RGB describe el color como lo genera una pantalla: tres luces sumadas, cada una de 0 a 255. Las tres a cero dan negro; las tres a 255, blanco. Al reflejar el hardware es exacto y sin pérdida, pero cuesta razonar con él: hacer un color algo más cálido obliga a mover dos o tres números a la vez sin una dirección evidente.
HSL
HSL reorganiza el mismo color en ejes que una persona sí puede manejar: el tono como ángulo de 0 a 360°, la saturación y la luminosidad como porcentajes. ¿Quieres una versión más clara del mismo color? Sube la luminosidad y deja lo demás. El problema es que esa luminosidad es aritmética, no perceptual: un amarillo al 50% se ve mucho más claro que un azul al 50%.
De RGB a HSL, paso a paso
Resuelto con #FF6347. Todos los números salen del mismo motor que usa el conversor de arriba.
-
Escalar cada canal a 0–1
R 1 G 0.388 B 0.278 -
Canal mayor y menor
max 1 min 0.278 max−min 0.722 -
Luminosidad
L = (max+min)/2 = 0.639 = 63.9% -
Saturación
S = (max−min)/(1−|2L−1|) = 100% -
Ángulo de tono
H = 9.1° -
Resultado
hsl(9, 100%, 64%)
Ejemplos de RGB a HSL
| Color | RGB | HSL |
|---|---|---|
| Red | rgb(255, 0, 0) |
hsl(0, 100%, 50%) |
| Tomato | rgb(255, 99, 71) |
hsl(9, 100%, 64%) |
| Orange | rgb(255, 165, 0) |
hsl(39, 100%, 50%) |
| Gold | rgb(255, 215, 0) |
hsl(51, 100%, 50%) |
| Limegreen | rgb(50, 205, 50) |
hsl(120, 61%, 50%) |
| Teal | rgb(0, 128, 128) |
hsl(180, 100%, 25%) |
| Dodgerblue | rgb(30, 144, 255) |
hsl(210, 100%, 56%) |
| Royalblue | rgb(65, 105, 225) |
hsl(225, 73%, 57%) |
| Blueviolet | rgb(138, 43, 226) |
hsl(271, 76%, 53%) |
| Hotpink | rgb(255, 105, 180) |
hsl(330, 100%, 71%) |
Preguntas frecuentes
¿Qué canal decide el tono?
El mayor. Si el rojo es el más alto, el tono queda cerca de 0°; el verde, cerca de 120°; el azul, cerca de 240°. Los otros dos canales lo desplazan desde ese ancla.
¿Por qué la saturación es 100% en un color que se ve pálido?
En HSL la saturación se mide en relación con la luminosidad, no en términos absolutos. Un color muy claro puede estar totalmente saturado para lo claro que es; por eso los pasteles suelen marcar 100%.
¿Es la conversión adecuada para construir una escala de tonos?
Funciona, pero OKLCH encaja mejor. Escalonar la luminosidad HSL da pasos que se ven desiguales entre tonos, mientras que pasos iguales en OKLCH se ven regulares.