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 Decimal | Equivalente en Hexadecimal |
|---|---|
| 0 | 0 |
| 1 | 1 |
| 2 | 2 |
| 3 | 3 |
| 4 | 4 |
| 5 | 5 |
| 6 | 6 |
| 7 | 7 |
| 8 | 8 |
| 9 | 9 |
| 10 | A |
| 11 | B |
| 12 | C |
| 13 | D |
| 14 | E |
| 15 | F |
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.
| 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
| 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 1A | 1B | 1C | 1D | 1E | 1F |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 2A | 2B | 2C | 2D | 2E | 2F |
| 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 3A | 3B | 3C | 3D | 3E | 3F |
| 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 4A | 4B | 4C | 4D | 4E | 4F |
| 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 5A | 5B | 5C | 5D | 5E | 5F |
| 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 6A | 6B | 6C | 6D | 6E | 6F |
| 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 7A | 7B | 7C | 7D | 7E | 7F |
| 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 8A | 8B | 8C | 8D | 8E | 8F |
| 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 9A | 9B | 9C | 9D | 9E | 9F |
| A0 | A1 | A2 | A3 | A4 | A5 | A6 | A7 | A8 | A9 | AA | AB | AC | AD | AE | AF |
| B0 | B1 | B2 | B3 | B4 | B5 | B6 | B7 | B8 | B9 | BA | BB | BC | BD | BE | BF |
| C0 | C1 | C2 | C3 | C4 | C5 | C6 | C7 | C8 | C9 | CA | CB | CC | CD | CE | CF |
| D0 | D1 | D2 | D3 | D4 | D5 | D6 | D7 | D8 | D9 | DA | DB | DC | DD | DE | DF |
| E0 | E1 | E2 | E3 | E4 | E5 | E6 | E7 | E8 | E9 | EA | EB | EC | ED | EE | EF |
| 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 siguiente 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:
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.
Etiqueta BODY - Cuerpo de una página HTML