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
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
