Convertidor HEX a RGB y HSL
Los colores en la web pueden expresarse en tres formatos comunes: HEX (hexadecimal), RGB (Rojo Verde Azul) y HSL (Matiz Saturación Luminosidad). Un código HEX como #1A2B3C contiene la misma información que rgb(26, 43, 60) o hsl(210, 40%, 27%) — esta herramienta convierte entre los tres formatos al instante mientras escribes, sin necesidad de hacer cálculos manuales.
HEX y RGB son representaciones de bajo nivel que mapean directamente las intensidades de canal de hardware (0–255 por canal). HSL es una alternativa más intuitiva: ajustar la Saturación o la Luminosidad produce resultados predecibles que coinciden con cómo los diseñadores piensan en color, lo que lo hace ideal para temas y trabajo de accesibilidad.
Como funciona
HEX → RGB: divide los 6 dígitos hexadecimales en tres pares (RR, GG, BB) y convierte cada uno de base-16 a decimal (0–255). RGB → HEX: invierte el proceso. RGB → HSL: normaliza los canales a [0,1]; L = (max+min)/2; S = (max−min)/(1−|2L−1|); H se deriva del canal con mayor valor. HSL → RGB: usa la fórmula f(n) = L − a·max(−1, min(k−3, 9−k, 1)) donde k=(n+H/30) mod 12 y a=S·min(L, 1−L).
Casos de uso
- Convertir códigos de color de herramientas de diseño (HEX) a propiedades CSS personalizadas (RGB o HSL)
- Ajustar luminosidad o saturación en HSL para generar paletas de colores accesibles
- Traducir valores HEX de diseñadores a rgba() para efectos de opacidad en CSS
- Verificar la consistencia de color entre materiales impresos (RGB) y digitales (HEX)
- Aprender teoría del color explorando cómo los componentes HSL se relacionan con el color percibido