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
Preguntas frecuentes
¿Cómo convierto un código de color HEX a RGB?
Divide los seis dígitos hexadecimales en tres pares — rojo, verde y azul — y convierte cada par de base-16 a un número decimal entre 0 y 255. Por ejemplo, #1A2B3C se convierte en rgb(26, 43, 60), porque 1A es 26, 2B es 43 y 3C es 60 en decimal. Este convertidor hace el cálculo automáticamente mientras escribes.
¿Cuál es la diferencia entre RGB y HSL?
RGB describe un color por la intensidad de sus canales rojo, verde y azul (0–255 cada uno), lo que corresponde directamente a cómo las pantallas producen color. HSL describe el mismo color por matiz, saturación y luminosidad, que es como piensan los diseñadores — aclarar un color o reducir su saturación es un ajuste único y predecible. Ambos formatos representan exactamente los mismos colores, solo en sistemas de coordenadas distintos.
¿Por qué algunos códigos HEX tienen 3 dígitos en lugar de 6?
Un código HEX de 3 dígitos es una forma abreviada en la que cada dígito se duplica: #F80 se expande a #FF8800. Solo funciona cuando cada canal de color tiene dos dígitos hexadecimales idénticos, por lo que cubre un subconjunto menor de colores. Los navegadores aceptan ambas formas en CSS.
¿Cómo agrego transparencia a un color HEX en CSS?
Puedes usar la notación HEX de 8 dígitos, donde los dos últimos dígitos son el canal alfa (por ejemplo, #1A2B3C80 equivale a un 50% de opacidad aproximadamente), o convertir a rgba(), como rgba(26, 43, 60, 0.5). Convertir el HEX a RGB primero facilita construir la forma rgba(). Los navegadores modernos admiten ambos enfoques.
¿Qué formato de color debo usar en CSS?
Los tres formatos producen resultados idénticos, así que la elección depende del flujo de trabajo. HEX es compacto y común en las entregas de herramientas de diseño, RGB es conveniente cuando necesitas transparencia alfa, y HSL es el mejor para crear sistemas de color y temas, porque permite derivar variantes más claras u oscuras cambiando un solo valor.