En el documento anterior, hemos empleado un código nombre para referenciar los colores y utilizarlos en los estilos CSS.
No es la forma más utilizada.
Otra más habitual, es utilizar el denominado código hexadecimal.
¿En qué consiste este protocolo?
Para empezar, hay que saber que está fundamentado en la base dieciséis, es decir, contamos con dieciséis símbolos alfanuméricos que, de menor a mayor son:
0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f |
Nota: Que sean dieciséis y no otro número de caracteres no es casual. Es la potencia cuadrada de dos al cuadrado: 222
Como ves son las diez cifras del sistema numérico y, como tenemos que llegar a dieciséis, empezamos a emplear las primeras letras del alfabeto. Hasta la f que es el último símbolo.
Para cada color empleamos dos cifras. Luego esto sería la progresión desde el valor nulo (00) al valor máximo (ff).
00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 0a | 0b | 0c | 0d | 0e | 0f |
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 |
... | |||||||||||||||
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 |
En total se emplean seis cifras. Dos para el primer color, el rojo.
Seguido de otras dos para el segundo color que es el verde.
Y seguido de otras dos que son la cantidad de azul.
Se escriben precedidas por una #.
Así, el #ff0000 es el color rojo.
El #00ff00 es el color verde.
El #0000ff es el color azul.
El #000000 es el color negro.
El #ffffff es el color blanco.
Y, el resto, son combinaciones de los valores de rojo, verde y azul, colores RGB (del inglés Red Green Blue)
Código empleado para mostrar estos colores:
<div class="divcolor" style="background-color:#ff0000; color:#ffffff"> Color #ff0000 </div> <div class="divcolor" style="background-color:#00ff00; color:#ffffff"> Color #00ff00 </div> <div class="divcolor" style="background-color:#0000ff; color:#ffffff"> Color #0000ff </div> <div class="divcolor" style="background-color:#ffff00; color:#000000"> Color #ffff00 </div> <div class="divcolor" style="background-color:#00ffff; color:#ffffff"> Color #00ffff </div> <div class="divcolor" style="background-color:#000000; color:#ffffff"> Color #000000 </div> <div class="divcolor" style="background-color:#ffffff; color:#000000"> Color #ffffff </div>
La escritura de los códigos hexadecimales no es sensible a mayúsculas o minúsculas. Es decir, es lo mismo escribir #33ffaa que #33FFAA, pero las últimas recomendaciones aconsejan la utilización de minúsculas.
Hay muchas páginas web que ofrecen las muestras de colores hexadecimales, con lo que no es necesario la memorización de códigos, aunque al final, uno se va quedando con algún que otro código en la memoria.
Muchas veces, cuando no queremos afinar en matices de color o tono, podemos emplear la escritura de los códigos hexadecimales empleando solo tres caracteres alfanuméricos en lugar de los seis habituales.
Así, podemos escribir #fff en lugar de #ffffff.
O, #3af en lugar de #33aaff
Como puedes observar, el valor para un color escrito con una cifra equivale al color escrito con la misma cifra repetida.
<div class="divcolor" style="background-color:#3af; color:#fcb"> Color #3af. Letra: #fcb </div>
Y ahora lo compruebo con la escritura completa del código:
<div class="divcolor" style="background-color:#33aaff; color:#ffccbb"> Color #33aaff. Letra: #ffccbb </div>
Es un sistema muy parecido.
La sintaxis es colorRGB(valorRed, valorGreen, valorBlue)
Cada uno de los valores va desde 0 a 255.
Si observas, al final es lo mismo que en el código hexadecimal.
En hexadecimal hay 16 x 16 = 256 valores para cada color.
Igual que aquí que es 255 + el valor 0 = 256 valores en total.
Por ejemplo:
<div class="divcolor" style="background-color:rgb(255, 0, 0); color:rgb(0, 0, 0)"> Color rgb(255, 0, 0) </div> <div class="divcolor" style="background-color:rgb(0, 255, 0); color:rgb(0, 0, 0)"> Color rgb(0, 255, 0) </div> <div class="divcolor" style="background-color:rgb(0, 0, 255); color:rgb(255, 255 , 255)"> Color rgb(0, 0, 255) </div> <div class="divcolor" style="background-color:rgb(255, 255 , 0); color:rgb(0, 0, 0)"> Color rgb(255, 255 , 0) </div> <div class="divcolor" style="background-color:rgb(0, 255 , 255); color:rgb(0, 0 , 0)"> Color rgb(0, 255 , 255) </div> <div class="divcolor" style="background-color:rgb(0, 0 , 0); color:rgb(255, 255 , 255)"> Color rgb(0, 0 , 0) </div> <div class="divcolor" style="background-color:rgb(255, 255 , 255); color:rgb(0, 0 , 0)"> Color rgb(255, 255 , 255) </div>
Una de las ventajas de este sistema frente al hexadecimal es que podemos añadir un canal alfa que introduce un cuarto valor dentro de los parámetros de los colores. Este parámetro es un número decimal comprendido entre 1.0 (no transparencia) al 0.0 (total transparencia).
<div class="divcolor" style="background-color:rgb(0, 0, 255, 1); color:rgb(255, 255, 255)"> Color rgb(0, 0, 255, 1) </div> <div class="divcolor" style="background-color:rgb(0, 0, 255, 0.9); color:rgb(255, 255, 255)"> Color rgb(0, 0, 255, 0.9) </div> <div class="divcolor" style="background-color:rgb(0, 0, 255, 0.8); color:rgb(255, 255, 255)"> Color rgb(0, 0, 255, 0.8) </div> <div class="divcolor" style="background-color:rgb(0, 0, 255, 0.7); color:rgb(255, 255, 255)"> Color rgb(0, 0, 255, 0.7) </div> <div class="divcolor" style="background-color:rgb(0, 0, 255, 0.6); color:rgb(255, 255, 255)"> Color rgb(0, 0, 255, 0.6) </div> <div class="divcolor" style="background-color:rgb(0, 0, 255, 0.5); color:rgb(255, 255, 255)"> Color rgb(0, 0, 255, 0.5) </div> <div class="divcolor" style="background-color:rgb(0, 0, 255, 0.4); color:rgb(255, 255, 255)"> Color rgb(0, 0, 255, 0.4) </div> <div class="divcolor" style="background-color:rgb(0, 0, 255, 0.3); color:rgb(255, 255, 255)"> Color rgb(0, 0, 255, 0.3) </div> <div class="divcolor" style="background-color:rgb(0, 0, 255, 0.2); color:rgb(255, 255, 255)"> Color rgb(0, 0, 255, 0.2) </div> <div class="divcolor" style="background-color:rgb(0, 0, 255, 0.1); color:rgb(255, 255, 255)"> Color rgb(0, 0, 255, 0.1) </div> <div class="divcolor" style="background-color:rgb(0, 0, 255, 0); color:rgb(255, 255, 255)"> Color rgb(0, 0, 255, 0) </div>
Otra posibilidad, es referenciar los colores con los parámetros HSL, iniciales de "hue" tono en inglés, "saturation" saturación y "lightness" claridad.
El hue es un número comprendido entre 0 y 360. El 0 se corresponde al rojo, el 120 es el verde y el 240 el azul.
La saturación es un porcentaje. 0% significa ensombrecimiento total y 100% se corresponde con el color completo.
La "lightness" es también un porcentaje. El 0% es oscuridad, el 50% es el término intermedio y el 100% es el blanco.
Veamos unos ejemplos:
<div class="divcolor" style="background-color:hsl(0, 100%, 50%); color:hsl(0, 100%, 100%)"> Color hsl(0, 100%, 50%) </div> <div class="divcolor" style="background-color:hsl(120, 100%, 50%); color:hsl(0, 100%, 100%)"> Color hsl(120, 100%, 50%) </div> <div class="divcolor" style="background-color:hsl(240, 100%, 50%); color:hsl(0, 100%, 100%)"> Color hsl(240, 100%, 50%) </div> <div class="divcolor" style="background-color:hsl(300, 76%, 72%); color:hsl(0, 100%, 100%)"> Color hsl(300, 76%, 72%) </div> <div class="divcolor" style="background-color:hsl(339, 100%, 50%); color:hsl(0, 100%, 100%)"> Color hsl(339, 100%, 50%) </div> <div class="divcolor" style="background-color:hsl(248, 53%, 58%); color:hsl(0, 100%, 100%)"> Color hsl(248, 53%, 58%) </div> <div class="divcolor" style="background-color:hsl(0, 100%, 0%); color:hsl(0, 100%, 100%)"> Color hsl(248, 53%, 58%) </div> <div class="divcolor" style="background-color:hsl(0, 100%, 100%); color:hsl(0, 100%, 0%)"> Color hsl(0, 100%, 100%) </div>
<div class="divcolor" style="background-color:hsl(9, 100%, 64%, 1.0); color:hsl(0, 100%, 0%)"> Color hsl(9, 100%, 64%, 1.0). </div> <div class="divcolor" style="background-color:hsl(9, 100%, 64%, 0.9); color:hsl(0, 100%, 0%)"> Color hsl(9, 100%, 64%, 0.9). </div> <div class="divcolor" style="background-color:hsl(9, 100%, 64%, 0.8); color:hsl(0, 100%, 0%)"> Color hsl(9, 100%, 64%, 0.8). </div> <div class="divcolor" style="background-color:hsl(9, 100%, 64%, 0.7); color:hsl(0, 100%, 0%)"> Color hsl(9, 100%, 64%, 0.7). </div> <div class="divcolor" style="background-color:hsl(9, 100%, 64%, 0.6); color:hsl(0, 100%, 0%)"> Color hsl(9, 100%, 64%, 0.6). </div> <div class="divcolor" style="background-color:hsl(9, 100%, 64%, 0.5); color:hsl(0, 100%, 0%)"> Color hsl(9, 100%, 64%, 0.5). </div> <div class="divcolor" style="background-color:hsl(9, 100%, 64%, 0.4); color:hsl(0, 100%, 0%)"> Color hsl(9, 100%, 64%, 0.4). </div> <div class="divcolor" style="background-color:hsl(9, 100%, 64%, 0.3); color:hsl(0, 100%, 0%)"> Color hsl(9, 100%, 64%, 0.3). </div> <div class="divcolor" style="background-color:hsl(9, 100%, 64%, 0.2); color:hsl(0, 100%, 0%)"> Color hsl(9, 100%, 64%, 0.2). </div> <div class="divcolor" style="background-color:hsl(9, 100%, 64%, 0.1); color:hsl(0, 100%, 0%)"> Color hsl(9, 100%, 64%, 0.1). </div> <div class="divcolor" style="background-color:hsl(9, 100%, 64%, 0.0); color:hsl(0, 100%, 0%)"> Color hsl(9, 100%, 64%, 0.0). </div>
Y, como he comentado anteriormente, ponemos el código del CSS que se encuentra en la hoja externa y que, junto con el CSS en línea, acaba de configurar el estilo de cada div.
.divcolor { height: 30px; font-weight: bold; padding: 8px; margin: 4px; }
Entre los muchos sitios que ofrecen ejemplos de colores para la web, destaca el Color Picker del W3C. Todas las posibilidades con los códigos de los tres sistemas. Altamente recomendable.
¿Más?
Pues de momento no están operativas completamente, pero el W3 Consortium ya ha creado y está experimentando con otras tres alternativas por si estas nos parecían insuficientes. Son las siguientes