Acerca de HTML

Colores HTML - Hexadecimal

En HTML se puede agregar color a elementos visibles como textos, enlaces, bordes, formularios, etc.

Un color en HTML se puede expresar de dos maneras:

- Opción 1: Con el nombre del color en inglés

- Opción 2: Con un numero hexadecimal de seis dígitos

La primera opción parece sencilla, y de hecho lo es, pues si queremos un color rojo simplemente tendremos que poner "red" o si queremos azul "blue", etc, pero encontramos un pequeño inconveniente, pues existe una infinidad de colores, entonces, ¿se podrá llamar a cada color por su nombre? ¿todos los colores tienen nombre?

Por ejemplo, ¿podrías decirme el nombre de este color?

Seguramente dirías que es verde ¿cierto?, pero si colocáramos green (verde) en nuestro código HTML nos saldría este otro color:

Entonces el primer color no es verde (green), mas bien es una tonalidad mas clara del verde, en este caso, el color si tiene un nombre, se llama lime (lima en español), pero no siempre vamos a hallar un nombre para un color, pues en HTML disponemos de una amplia paleta de 16,777,216 colores, por esto tenemos la Opción 2 con la que escribiremos números hexadecimales para representar los colores en HTML.

Pero para entender bien bien pienso que es necesario conocer el sistema numérico hexadecimal y su importancia en HTML, por esto me parece buen momento para hacer una pequeña explicación del sistema hexadecimal para aquellos que lo desconozcan.

Hexadecimal:

Es un sistema de numeración de base 16, es decir que utiliza 16 símbolos para la representación de cantidades numéricas, estos símbolos son las 10 números o cifras del sistema decimal (0-9) y 6 letras del abecedario (A-F), siendo el 0 el de menor valor y la letra F el de mayor valor. Comparándolo con el sistema decimal podemos observar el valor de cada cifra en la siguiente tabla:

Número en DecimalEquivalente en Hexadecimal
00
11
22
33
44
55
66
77
88
99
10A
11B
12C
13D
14E
15F

Entonces se puede observar que con una sola cifra hexadecimal se pueden formar 16 números, que van desde el 0 decimal hasta el 15 decimal, para formar números mas grandes se tendrá agregar mas cifras de manera similar a como se hace con el sistema decimal. A modo de ejemplo y para aclarar mas el tema les dejo una tabla con los primeros números del sistema hexadecimal que se pueden formar con dos cifras.

0123456789ABCDEF
101112131415161718191A1B1C1D1E1F
202122232425262728292A2B2C2D2E2F
303132333435363738393A3B3C3D3E3F
404142434445464748494A4B4C4D4E4F
505152535455565758595A5B5C5D5E5F
606162636465666768696A6B6C6D6E6F
707172737475767778797A7B7C7D7E7F
808182838485868788898A8B8C8D8E8F
909192939495969798999A9B9C9D9E9F
A0A1A2A3A4A5A6A7A8A9AAABACADAEAF
B0B1B2B3B4B5B6B7B8B9BABBBCBDBEBF
C0C1C2C3C4C5C6C7C8C9CACBCCCDCECF
D0D1D2D3D4D5D6D7D8D9DADBDCDDDEDF
E0E1E2E3E4E5E6E7E8E9EAEBECEDEEEF
 F0  F1  F2  F3  F4  F5  F6  F7  F8  F9  FA  FB  FC  FD  FE  FF 

Un total de 256 números posibles con dos cifras que van desde el 0 hasta el 255 decimal. Ahora vamos a ver como se utiliza esto en HTML.

Volvemos a los colores HTML:

Entonces en lugar de colocar el nombre del color en ingles tendremos que escribir el hexadecimal del color deseado, algo como esto:#4488FF lo que da como resultado el siquiente color:

Pero que significan #4488ff?

Bueno pues son seis dígitos que representan el color, estos seis dígitos se dividen en tres pares (44-88-FF), con los cuales podemos representar un color por medio de los colores primarios Rojo, Verde y Azul haciendo uso de la paleta de colores RGB (Red, Green, Blue), el primer par (44) corresponde a la R (Red o Rojo en español) el par de en medio (88) corresponde a la G (Green o Verde) y los últimos dos (FF) son representativos de la parte Blue/Azul (#4488FF), entonces con estos 3 colores primarios vamos a formar el color deseado, indicando con cada par de números la cantidad de rojo, la cantidad de verde y la cantidad de azul necesaria para formar cualquier color, entonces mientras mayor sea el numero formado por un par de dígitos correspondientes a un color, mayor será la cantidad o intensidad de ese color, entonces si yo colocara #000000 (ausencia de colores) tendría como resultado un color negro, y si colocara #FFFFFF (la mayor cantidad de color) tendría como resultado un blanco. justamente en la siguiente imagen podemos observar el efecto de estos tres colores primarios al combinarse:

Efecto de los colores primarios al combinarse

Ahora bien, estos códigos de colores HTML se usan como propiedades de atributos de algunas etiquetas, como las etiquetas para los enlaces o etiquetas relacionadas con el texto para indicar colores de letra, en fin lo importante es entender el significado de los códigos de colores para poder aplicarlos más adelante.