Cómo convertir HEX a RGB (y por qué los diseñadores alternan entre ambos)

Si trabajas con color en la web, te has encontrado con el mismo valor escrito de dos maneras distintas. Un diseñador te entrega #3498DB, pero tu código necesita rgb(52, 152, 219). Ambos describen exactamente el mismo azul, solo que con una notación diferente. Saber cómo pasar de HEX a RGB, y por qué hacerlo, te ahorra muchas conjeturas. Esta guía explica ambos formatos en lenguaje sencillo y muestra cómo convertirlos al instante con el Conversor de Color gratuito.

Qué significa un código de color HEX

Un color HEX es la cadena #RRGGBB que ves por toda la web en CSS y herramientas de diseño. La almohadilla es solo un marcador, y los seis caracteres que la siguen son tres parejas: rojo, verde y azul. Cada pareja es un número hexadecimal (base 16) que va de 00 a FF, es decir, de 0 a 255 en el sistema decimal cotidiano.

Tomemos #3498DB. Divídelo en 34, 98 y DB. Esas son las cantidades de rojo, verde y azul. 34 en hexadecimal es 52, 98 es 152 y DB es 219. Así que el color tiene una buena cantidad de verde y mucho azul con menos rojo, lo que da como resultado un limpio azul cielo. Una vez que ves el HEX como tres números de dos caracteres, deja de parecer un código aleatorio.

Qué significa RGB

RGB describe exactamente la misma idea, solo que en decimal sencillo. En lugar de #3498DB escribes rgb(52, 152, 219). Tres números, cada uno de 0 a 255, para el rojo, el verde y el azul. Cero significa nada de ese canal, 255 significa toda su intensidad. Los tres en 0 dan negro, los tres en 255 dan blanco, y todo lo demás es una mezcla.

Como RGB deletrea los números, mucha gente lo encuentra más fácil de razonar. ¿Quieres un poco más de rojo? Sube el primer número. El HEX esconde esa aritmética detrás de parejas en base 16, lo cual es compacto pero menos intuitivo de ajustar a mano.

Por qué los diseñadores y desarrolladores alternan entre ambos

Los dos formatos son intercambiables, entonces, ¿por qué molestarse en convertir? Hay varias razones prácticas que aparecen constantemente:

• Distintas herramientas hablan distintos formatos. Una guía de marca puede listar HEX, mientras que un programa de gráficos o una parte del código espera RGB.
• La opacidad necesita RGB. Un código HEX simple no puede llevar transparencia, pero rgba(52, 152, 219, 0.5) añade un cuarto valor para el alfa. Cuando necesitas una superposición semitransparente, recurres a la familia RGB.
• Legibilidad y ajustes. RGB es más fácil de ajustar canal por canal; HEX es más corto para pegar y compartir.
• Coincidir con una paleta existente. A menudo recibes un color en una notación y lo necesitas en la otra para mantener la coherencia con el resto de un proyecto.

En resumen, conservas ambos y traduces cuando lo necesitas según lo que pida la siguiente herramienta o línea de código.

Cómo convertir HEX a RGB al instante

Nunca tienes que hacer los cálculos hexadecimales a mano. El Conversor de Color gratuito lo hace en tu navegador, así que los valores que pegas permanecen en tu propio dispositivo y nunca se suben a ningún sitio.

1. Abre la herramienta y pega tu código HEX, como #3498DB.
2. Lee al instante los valores RGB correspondientes.
3. Copia la notación que necesites y usa la forma rgba, que admite alfa, cuando quieras transparencia.

También funciona en el otro sentido, así que puedes pegar RGB y obtener el equivalente HEX igual de rápido. Si solo necesitas el viaje en una dirección, la herramienta específica HEX a RGB hace exactamente eso y nada más.

Encontrar y crear colores para convertir

A veces la parte más difícil es decidir el color en primer lugar. Si has visto un tono en una captura de pantalla o una foto y quieres su código exacto, el Selector de Color de Imagen lee el valor directamente del píxel. Si empiezas desde cero y quieres opciones nuevas, el Generador de Color HEX te ofrece códigos para probar. Una vez que tengas un color que te guste, pásalo por el Conversor de Color para obtenerlo en todas las notaciones que tu proyecto necesite.

La versión corta

HEX y RGB son dos maneras de escribir el mismo color: HEX empaqueta el rojo, el verde y el azul en la cadena en base 16 #RRGGBB, mientras que RGB los lista como tres números decimales de 0 a 255. Alternas entre ellos porque distintas herramientas, y la transparencia con rgba, exigen distintos formatos. Siempre que necesites traducir uno al otro, el Conversor de Color gratuito lo hace en tu navegador en un solo paso.