Entendiendo el código de los colores hexadecimales #nnnnnn

Los colores hexadecimales, como por ejemplo #890A4D, son importantes en el diseño gráfico y web. Entender cómo armarlos es muy fácil.

Mucha gente parece horrorizarse ante la sola mención de utilizar valores hexadecimales para asignar colores ya sea en el diseño web o el diseño gráfico. De la misma manera en que un caballero medieval se horrorizaría ante la mención de un dragón, varias personas suelen aterrarse a la hora de intentar entender como funcionan exactamente los números hexadecimales como si estos en sí mismos fuesen un monstruo.

No obstante, nada está más lejos de la realidad, y los mismos son muy simples de entender. Ocurre un fenómeno similar que con los modos de fusión o blend modes (en ingles) en Photoshop. Al principio nos resultan algo indescifrable, como si se tratasen de jeroglíficos egipcios. No obstante, una vez entendidos, su utilización se hace en extremo simple.

A continuación como se asignan los colores hexadecimales.

El sistema numérico hexadecimal

Los números hexadecimales se desarrollan ante la necesidad de «empaquetar» más información en menor cantidad de caracteres, o mejor dicho bytes, equivaliendo 1 carácter a byte. Es por esto que se ideó un sistema de letras y números donde en menor cantidad de bytes entren números más grandes. Para esto se aplica la siguiente regla, que se repite a lo largo de todo el sistema:

Valor decimal

Síguenos en nuestras redes sociales:

00
01
02
03
04
05
06
07
08
09

Valor haxadecimal

00
01
02
03
04
05
06
07
08
09

En los números decimales normales al llegar a 09 instantáneamente seguiríamos con 10, pero no es así con los hexadecimales. Como hemos dicho su sentido es empaquetar más información en menor cantidad de caracteres. Es por esto que al llegar a 9 se continúa con caracteres: A B C D E y F, (es decir 6 dígitos más, un número en base 16) teniendo esto en cuenta seguimos con nuestro conteo:

Valor decimal

10
11
12
13
14
15
16
17
18
19

Valor hexadecimal

0A
0B
0C
0D
0E
0F
10
11
12
13

Como vemos es muy simple. Una vez que el número que indica la decena llega a 9 es seguido por una A.

Aplicando los valores hexadecimales al color

Ahora ¿cómo se aplica esto al color? Es muy simple, supongamos que tenemos el siguiente valor:

#890A4D

Ese valor pareciera humanamente imposible de comprender, salvo que es muy simple. Es el color dividido en tres partes de dos bytes cada una (para el rojo, el verde y el azul). En este caso los tres valores son: 89 – 0A – 4D, como cada uno de estos representa a dos dígitos hexadecimales, y un dígito hexadecimal posee 16 valores, entonces vemos que con solo dos dígitos tenemos los 256 valores de intensidad (16 x 16 = 256) para cada color que van de 0 a 255.

En el ejemplo que dimos 89 representaría la cantidad de rojo, 0A la cantidad de verde y 4D la cantidad de azul. Si queremos cambiar el color a, por ejemplo, algo con menos rojo y un poco más de Azul, simplemente debemos utilizar el sistema hexadecimal que aprendimos más arriba bajando los dos primeros dígitos y aumentando los dos últimos dígitos.

También sabiendo esto ahora podemos saber por qué negro en hexa es #000000 (es decir ningún color), y blanco #FFFFFF (es decir el máximo de los 3 colores aplicados simultáneamente saturando y formando el blanco). Si queremos un color totalmente rojo seria #FF0000, etc.

Como porcentajes

Para facilitar aún más la tarea de asignar colores hexadecimales veamos cuanto representa a nivel porcentaje cada valor:

100% = FF
80% = CC
60% = 99
40% = 66
20% = 33
0% = 00.

Es decir que si formamos el color #CC3366 será un color con un 80% de rojo, un 20% de verde y un 40% de azul (sí, es más de 100% la suma total pero debemos recordar que estamos hablando de cantidades relativas y no absolutas).


Más sobre diseño digital

El formato gráfico GIF, explicación e historia

Explicación simple de los gráficos bitmap y vectoriales

Cómo agrandar imágenes en Photoshop utilizando fractales