QUÉ ES EL SISTEMA HEXADECIMAL
Y cómo se utiliza para definir los colores en HTML
Posted by Bárbara Pérez
Hexadecimal es como se conoce al sistema de numeración (que se abrevia Hex), cuya base es el número dieciséis (16). Por lo tanto, un número hexadecimal se diferencia de un número decimal en que no sólo puede tomar valores del 0 al 9, sino que puede tomar hasta dieciséis valores distintos, de 0 a 15.
Como la base del sistema hexadecimal es dieciséis, se requieren dieciséis dígitos diferentes para la escritura. Por eso, además de los diez dígitos del sistema decimal (9, 8, 7, 6, 5, 4, 3, 2, 1 y 0), se usan las primeras seis letras del alfabeto latino: A, B, C, D, E y F. En este caso, A equivale 10; B, a 11; C, a 12; D, a 13; E, a 14; y F a 15.
En la actualidad este sistema suele utilizarse en informática ya que un byte, es decir, 8 bits, equivale a dos dígitos hexadecimales. Y desde hace muchos años, en cualquier ámbito relacionado con el diseño de imagen por ordenador se utiliza el sistema hexadecimal para especificar los colores.
Por ejemplo, una imagen de 1 bit solo tiene dos valores (blanco o negro) y una imagen de 8 bits, puede exhibir hasta 256 colores gracias a diferentes las combinaciones posibles de ceros y unos.
Un código hexadecimal de color, permite expresar los valores correspondientes a cada uno de los tres componentes al espacio de color RGB, y expresa un valor para el rojo, otro para el verde y otro para el azul.
El código hexadecimal debe comenzar con el signo almohadilla (#), tras el cual se colocan seis dígitos que pueden ir del 00 al ff o, en sistema decimal, del 0 al 255.
Dicho de otra manera, en cada uno de los tres valores podemos representar hasta 256 intensidades, donde el cero representa ausencia total de intensidad.
La cantidad total de colores que podemos representar con este tipo de código hexadecimal es 16.777.216, redondeando hacia abajo solemos decir unos «dieciséis millones de colores». Del mismo modo, haciendo referencia al sistema binario podemos utilizar un término más técnico y decir que podemos representar «24 bits de color» (donde 2 elevado a 24 son exactamente 16.777.216).
Entender un código hexadecimal de color no es difícil, aunque requiere ciertos conocimientos relacionados con la luz o bien un cierto grado de experiencia en el uso de herramientas digitales de pintura. Puedes consultar mi artículo Diferencias entre CMYK, RGB, HEX y PMS si quieres saber más sobre el modelo de color aditivo o de luz RGB.
Este modelo de color es el que utilizamos los programadores web para representar los colores en un sitio web. Imaginaos, por ejemplo, qué estáis viendo un círculo rojo en una página web. Vamos a ver un programador en HTML le dice a nuestro navegador que nos muestre ese color, y no otro.
Si pensamos en el proceso de trabajo de un pintor que se prepara para comenzar una obra, mezclará en su paleta colores básicos para hacer colores nuevos. Del mismo modo, para que una pantalla nos muestre un color, necesitamos hacer esa misma mezcla con nuestros tres colores primarios de luz: rojo, verde y azul, y así formar cualquier otro color.
El código #000000 representa el negro, que representa la ausencia de todo color o de luz. Y el contrario, #ffffff es el blanco, que es la suma del rojo, el verde y el azul en su máxima intensidad de luz.
Como estamos representado un color en el espacio RGB, «rojo verde azul», entenderemos que en un código hexadecimal los pares de dígitos pertenecen a cada uno de estos colores, los dos primeros representan la intensidad de color rojo, los siguientes dos la intensidad de verde y los dos últimos la intensidad de color azul.
Así pues, #ff0000 será el rojo más intenso que podemos representar, #00ff00 el verde más intenso y #0000ff el azul más intenso;
Del mismo modo que combinar dos colores en el modelo de color RGB, obtenemos un tercero, el código #ff00ff combinaría el rojo y azul puro para obtener amarillo puro.
Conversión hexadecimal a binaria
Por último, vamos a ver como convertir un código hexadecimal en una cadena binaria. Es tan sencillo como trasformar cada dígito hexadecimal en cuatro bits (0 o 1), los cuales van a tener un valor de: 8, 4, 2, o 1 (8+4+2+1=16 de hexadecimal), respectivamente.
Ahora podemos fácilmente traducir el código #FF0000, en una cadena de código binario:
Esta cadena la debemos escribir, como la escritura árabe, de derecha a izquierda:
8 4 2 1
1 1 1 1 =F (16)
0000 0000 0000 0000 1111 1111
0 0 0 0 F F
Otro ejemplo más sencillo, queremos convertir el código hexadecimal #50BF8F en binario. Procedemos del mismo modo:
8421
1101=D(13)
1000=8
1111=F(16)
1011=B(11)
0000=0
0101=5
Tenemos como resultado: 0101 0000 1011 1111 1000 1101
5 0 B F 8 D
En resumen, y para acabar, podemos afirmar que cuando vemos representado el color rojo en nuestra página web, tan solo estamos viendo la representación de una cadena de dígitos de ceros y unos en código binario 😊
entradas relacionadas
Tipos de Web según su finalidad
Ventajas de tener una Tienda Online
Principales Tipos de e-commerce
blog de ipnosix
BÁRBARA PÉREZ
Este blog es el cuaderno de bitácora del estudio creativo Ipnosix, ubicado en Madrid, especializado en Branding y Diseño Web.
En él, te voy a contar mis experiencias en el área del diseño gráfico y desarrollo web y el maravilloso viaje que es crear, diseñar, conceptualizar o desarrollar un proyecto. Con la idea de que descubras un montón de cosas interesantes y útiles.
¡Disfruta de él tanto como yo disfruto escribiéndolo!
síguenos
en redes sociales
categorías
por temática
- Branding (8)
- Desarrollo web (6)
- Dirección de Arte (7)
- Diseño corporativo (4)
- Diseño editorial (5)
- Diseño gráfico (21)
- Diseño publicitario (1)
- Diseño web (4)
- E-commerce (3)
- Ilustración (11)
- Ipnosix (4)
- Logotipo (4)
- Naming (1)
- News (4)
- Packaging (3)
- Tipografía (1)
- Web (7)
- Works (7)