HTML 5 y CSS 3

Diseño Web Responsivo
#5

Colores html. Código hexadecimal


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)

Color #ff0000
Color #00ff00
Color #0000ff
Color #ffff00
Color #00ffff
Color #000000
Color #ffffff

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>


Cada uno de los colores lo hemos colocado en un div.
Acto seguido hemos declarado una clase divcolor para dar algún estilo en la hoja de estilos externa.
Luego hemos puesto un CSS en línea con el background del color de fondo que queremos mostrar.
Finalmente, hemos declarado el color del texto. Por defecto, se pone en negro. Nosotros hemos declarado el color del texto (blanco o negro) en cada uno de los casos para asegurarnos de que se lea bien. El texto que hemos colocado para mostrar en pantalla es el del código hexadecimal de cada color que queremos mostrar.

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.

Código hexadecimal reducido


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.

Color #3af. Letra: #fcb
Código empleado:
	<div class="divcolor" style="background-color:#3af; color:#fcb">
		Color #3af. Letra: #fcb
	</div>
Hemos puesto a mostrar en pantalla tanto el color del fondo como el color del texto empleado.

Y ahora lo compruebo con la escritura completa del código:

Color #33aaff. Letra: #ffccbb
Código empleado:
	<div class="divcolor" style="background-color:#33aaff; color:#ffccbb">
		Color #33aaff. Letra: #ffccbb
	</div>
Hemos hecho lo mismo. Mostramos en pantalla tanto el código del color de fondo como el código del color del texto.

Colores RGB


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:

Color rgb(255, 0, 0)
Color rgb(0, 255, 0)
Color rgb(0, 0, 255)
Color rgb(255, 255 , 0)
Color rgb(0, 255 , 255)
Color rgb(0, 0 , 0)
Color rgb(255, 255 , 255)

Código empleado:

	<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>

Colores RGB con transparencia


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).

Color rgb(0, 0, 255, 1)
Color rgb(0, 0, 255, 0.9)
Color rgb(0, 0, 255, 0.8)
Color rgb(0, 0, 255, 0.7)
Color rgb(0, 0, 255, 0.6)
Color rgb(0, 0, 255, 0.5)
Color rgb(0, 0, 255, 0.4)
Color rgb(0, 0, 255, 0.3)
Color rgb(0, 0, 255, 0.2)
Color rgb(0, 0, 255, 0.1)
Color rgb(0, 0, 255, 0)

Código empleado:

	<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>

Colores HSL


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:

Color hsl(0, 100%, 50%)
Color hsl(120, 100%, 50%)
Color hsl(240, 100%, 50%)
Color hsl(300, 76%, 72%)
Color hsl(339, 100%, 50%)
Color hsl(248, 53%, 58%)
Color hsl(248, 53%, 58%)
Color hsl(0, 100%, 100%)

Código empleado:

	<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>

Colores HSL con transparencia


Añadiendo un cuarto parámetro al final. Desde el 1.0 (no transparencia) al 0.0 (total transparencia)
Color hsl(9, 100%, 64%, 1.0).
Color hsl(9, 100%, 64%, 0.9).
Color hsl(9, 100%, 64%, 0.8).
Color hsl(9, 100%, 64%, 0.7).
Color hsl(9, 100%, 64%, 0.6).
Color hsl(9, 100%, 64%, 0.5).
Color hsl(9, 100%, 64%, 0.4).
Color hsl(9, 100%, 64%, 0.3).
Color hsl(9, 100%, 64%, 0.2).
Color hsl(9, 100%, 64%, 0.1).
Color hsl(9, 100%, 64%, 0.0).

Código empleado:

	<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.

Código empleado en la hoja externa aplicable a los div en los que se muestran los colores:

.divcolor {
	height: 30px;
	font-weight: bold;
	padding: 8px;
	margin: 4px;
}

Lo explicaremos más adelante, pero como ya lo hemos utilizado, lo adelanto.
Se llama a la clase con el punto . seguido por el nombre de la clase. En este caso, por tanto, .divcolor
Luego, se ponen las llaves de apertura { y cierre }.
Y entre ambas llaves, escribimos las propiedades con sus valores separados por ;
La primera, el height es la altura del div, de la caja. En este caso hemos puesto 30 píxeles.
La segunda font-weight es que hemos dicho que el texto se muestre en negrita bold.
Las tercera es el padding, el espacio vacío alrededor del texto. En este caso hemos puesto 8 píxeles.
Por último, el espacio externo vacío entre un div y otro margin que lo hemos puesto a 4 píxeles.

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.

Otras posibilidades


¿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

Página 1 Página 2 Página 3 Página 4 Página 5 Página 6 Página 7 Página 8 Página 9 Página 10 Página 11 Página 12 Contenidos
Icono de licencia Creative Commons

Ángel Ricardo Puente Pérez 2023

Icono del W3C Validator