El color web o color hexadecimal
Círculo cromático mezcla aditiva
Cuando trabajamos el color en una web estamos trabajando con «color luz». La pantalla a fin y al cabo no es más que un dispositivo que emite luz, la cual perciben nuestros ojos. El negro se obtiene por la ausencia de luz. Los distintos colores se obtienen por la emisión de luz a través de 3 canales:
Red Green Blue
Estos canales funcionan igual que un ecualizador de sonido. Mediante la mezcla de ellos se obtiene el color concreto y la suma de todos ellos en su valor máximo genera el blanco.
En RGB los valores van desde 0 a 255. De tal manera que un elemento con valores rgb(0,0,0,) es negro absoluto y la luz blanca se obtiene rgb (255,255,255).
Un color hexadecimal crea el color RGB mediante una nomenclatura de 6 valores en lugar de 3 y con otros caracteres. En lugar de utilizar una escala de 0 a 255 utiliza la siguiente escala:
<h4 class="text-center" style="text-align: center;"> <a style="color: #000; font-size: 36px; font-weight: 900;">0, </a> <a style="color: #111; font-size: 36px; font-weight: 900;">1, </a> <a style="color: #222; font-size: 36px; font-weight: 900;">2, </a> <a style="color: #333; font-size: 36px; font-weight: 900;">3, </a> <a style="color: #444; font-size: 36px; font-weight: 900;">4, </a> <a style="color: #555; font-size: 36px; font-weight: 900;">5, </a> <a style="color: #666; font-size: 36px; font-weight: 900;">6, </a> <a style="color: #777; font-size: 36px; font-weight: 900;">7, </a> <a style="color: #888; font-size: 36px; font-weight: 900;">8, </a> <a style="color: #999; font-size: 36px; font-weight: 900;">9, </a> <a style="color: #aaa; font-size: 36px; font-weight: 900;">A, </a> <a style="color: #bbb; font-size: 36px; font-weight: 900;">B, </a> <a style="color: #ccc; font-size: 36px; font-weight: 900;">C, </a> <a style="color: #ddd; font-size: 36px; font-weight: 900;">D, </a> <a style="color: #eee; font-size: 36px; font-weight: 900;">E, </a> <a style="color: #fff; font-size: 36px; font-weight: 900;">F, </a> </h4>
Sacándolo así:
0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F,
Asimilando este concepto podremos crear colores hexadecimales de una manera más consciente.
NOTA: En casos en que trabajamos con colores como el blanco, negro o grises neutros (ni fríos ni cálidos) los valores hexadecimales se pueden resumir en CSS3 con tres dígitos. También da igual que lo pongas en mayúsculas que en minúsculas. Por ejemplo un blanco nos dará el mismo resultado poniéndolo de la siguiente manera:
.blanco-puro-seis-valores {
color:#FFFFFF;
}
.blanco-puro-tres-valores {
color:#fff;
}