El formato hexadecimal

Esquema de colores Hex (RGB Abreviado)


—— ——

¿Qué es el formato hexadecimal?

El formato hexadecimal es el más utilizado por los desarrolladores web, y viene derivado del formato RGB, por lo que si aún no lo conoces, te recomendamos que le eches un vistazo primero a la función rgb(). Aunque en principio puede parecer algo extraño y confuso, sobre todo si no has oído hablar nunca del sistema numérico hexadecimal, el formato de colores hexadecimal es simplemente un formato RGB abreviado.

Los humanos en nuestro día a día utilizamos el sistema decimal, es decir, un sistema numérico basado en 10 números (0, 1, 2, 3, 4, 5, 6, 7, 8, 9). Existe un formato numérico llamado hexadecimal el cuál está basado en 16 números (0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E y F), y es el que utilizaremos en este formato.

Así pues, en un color hexadecimal, que empieza siempre por #, cada par de letras o números simboliza el valor de un canal RGB, sólo que se está expresando en el sistema de numeración hexadecimal.

Por ejemplo, tenemos el color rojo en RGB, que es rgb(255 0 0). Si queremos pasarlo al formato hexadecimal, debemos convertir cada valor a hexadecimal, quedando FF (255), 00 (0) y 00 (0). Es decir, en hexadecimal: #FF0000.

La sintaxis hexadecimal

Ahora que sabemos como se escribe un color en formato hexadecimal, vamos a ver algunos ejemplos, basándonos en otros modelos de color como palabras clave, la función rgb() o el propio hexadecimal:

Palabra clave Función RGB Hexadecimal Hex. abreviado
red (rojo) rgb(255 0 0) #FF0000 #F00
black (negro) rgb(0 0 0) #000000 #000
cyan (azul claro) rgb(0 255 255) #00FFFF #0FF
mediumpurple (lila) rgb(147 112 219) #9370DB #97D (aproximación)

Observa que la última columna, denominada Hexadecimal abreviado tenemos un formato hexadecimal más corto. Lo explicaremos en la siguiente sección.

Sintaxis abreviada

Como se puede ver en la última columna de la tabla anterior, para ahorrar espacio y hacer el color más corto, puedes utilizar el formato hexadecimal abreviado. Este formato, se crea especificando sólo las primeras tres cifras de cada par hexadecimal. De esta forma, el color #9933AA se puede abreviar como #93A. El color abreviado sólo será 100% fiel, cuando los pares de cifras sean idénticos.

Veamos algunos ejemplos del formato hexadecimal:

.element {
  background-color: #512592;    /* Formato hexadecimal */
  background-color: #000000;    /* Abreviable a #000 */
  background-color: #451;       /* Equivalente a #445511; */
}

Habitualmente, no es necesario escribir los formatos abreviados directamente, ya que hay herramientas que se pueden configurar y se encargan de acortar y realizar esas optimizaciones.

Canal alfa o transparencia

Aunque antiguamente no era posible, existe una forma de añadir un canal alfa o transparencia en los colores expresados en formato hexadecimal. Para ello, no tenemos más que añadir un par más al color hexadecimal, donde expresamos el grado de transparencia con un valor hexadecimal, donde:

  • 00 (0 en decimal) es totalmente transparente.
  • FF (255 en decimal) es totalmente opaco.

De esta forma, el formato sería el siguiente:

Método Descripción
#rrggbbaa Al formato hexadecimal #rrggbb se añade un nuevo par de transparencia aa.
#rgba Al formato hexadecimal abreviado #rgb, se añade un par abreviado a.

Así pues, los ejemplos anteriores trasladados a código, se verían como en el fragmento de código CSS siguiente, donde tenemos el color #aa44bb y hemos añadido un par 77, que es aproximadamente un 46% de transparencia. Más abajo, tenemos su equivalente en hexadecimal abreviado:

.element {
  background-color: #aa44bb77;
  background-color: #a4b7;
}

Actualmente, el soporte de esta característica es bastante buena en los diferentes navegadores, por lo que se puede utilizar con seguridad.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev