Son varias las propiedades en las que podemos aplicar un color determinado, ya sea como fondo, como color de texto, para una sombra, etc. pero en todos los casos las formas de definir el color son similares.
Las propiedades que se emplean para definir el color del texto son las siguientes:
- color: para indicar el color del texto.
- background-color: para indicar el color de fondo de diferentes elementos, entre ellos de un texto.
Formas de definición del color
Al empezar a trabajar con hojas de estilo, encontraremos que el método más sencillo para definir un color es mediante su nombre en inglés (especialmente si tenemos unas nociones básicas de inglés; en caso contrario encontraremos este método muy complicado).
Por ejemplo, para definir un texto de color rojo de una clase determinada utilizaríamos esta regla:
.parrafodestacado {color:red; }
Un título azul y con el fondo amarillo se conseguiría así:
h1 {color:blue; background-color:yellow; }
Y que toda la página tuviese un color lila, con fondo verde y sombra azul oscura, se consigue así:
body {
color:purple;
background-color: green;
text-shadow: midnightblue 2px 2px 4px;
}
El ejemplo anterior también nos arroja con crueldad otra realidad fundamental. Hasta ahora, usando negro sobre blanco, hemos podido elaborar páginas web con un cierto equilibrio estético pero, al comenzar a utilizar el color, todo esto se volverá mucho más complejo. Elegir unos colores que armonicen correctamente y que refuercen nuestro mensaje, en lugar de desvirtuarlo, es un verdadero arte. Para alcanzar el equilibro necesario, el mejor consejo posible es practicar, practicar y practicar. Y nunca conformarnos con el primer resultado.
Definir un color numéricamente
El sistema de nombres de color se nos quedará corto rápidamente y necesitaremos buscar alguna solución para definir colores de una forma precisa.
En los ordenadores, en las pantallas, se emplea un sistema de representación del color basado en tres parámetros. Un ordenador es capaz de representar varios millones de colores con tan sólo realizar combinaciones de tres colores básicos: el rojo, el verde y el azul.
Hay otros sistemas de representación de colores, pero el basado en estos tres, conocido como sistema RGB (son las siglas de los tres colores en inglés, red, green y blue) nos servirá perfectamente para diseñar nuestros propios colores.
La definición de un color en formato RGB consiste en indicar qué cantidad de cada uno de esos colores debe llevar el color resultante, sabiendo que el valor más bajo representa la ausencia de color y el color más alto el blanco absoluto.
El color más alto dependerá de la medida que estemos empleando. Podemos hacerlo mediante números decimales que van del 0 al 255 o mediante valores porcentuales.
Veamos algunos ejemplos:
- p {color:rgb (255,0,0); } representa el rojo puro. El valor de r está al máximo mientras los demás están al mínimo.
- p {color:rgb (0,0,0); } este color sería el negro; todos los valores al mínimo.
- p {color:rgb (190,190,0;)} éste sería un amarillo claro, pero no el más claro posible, que se obtendría con (255,255,0). La combinación de rojo y verde en una pantalla proporciona el amarillo.
- p {color:rgb (255,255,255;)} es el blanco.
- p {color:rgb (66,66,66;)} cuando los tres tonos se mezclan a partes iguales, obtenemos siembre un color gris, más o menos oscuro, dependiendo de lo elevados que sean los valores.
Colores hexadecimales
Empleando la lógica del formato RGB, se emplea con frecuencia la definición de colores basada en valores hexadecimales, en lugar de decimales. Es decir, en vez de utilizar valores que van de 0 a 255, utilizamos valores que van de 00 a FF. Los códigos hexadecimales emplean los valores del 0 al 9, más la A, B, C, D, E y F.
En este caso el número se precede del signo #. Los ejemplos anteriores quedarían así:
p {color: #ff0000; }
p {color: #bbbb00; }
p {color: #424242; }
Encontraremos este tipo de notación en muchos sitios. Produce unos códigos muy breves y que se descifran con rapidez, una vez que nos hemos acostumbrado a leerlos. De hecho, aún se pueden abreviar más, empleando un solo valor para definir cada color, pero reduce mucho el número de colores que podemos obtener, por lo que es mejor mantener el sistema de dos cifras para cada componente de color.