Hola, soy Sergio Luján Mora, profesor de informática de la Universidad de Alicante, y en este vídeo que forma parte del curso “Introducción al desarrollo web”, te voy a explicar cómo usar los colores en CSS.

En arte, diseño y otras especialidades, se utilizan varios métodos para describir el color. Algunos de los más conocidos son CMYK, HSV, HSB y RGB. Cada uno tiene sus ventajas y desventajas, pero el análisis de estas ventajas y desventajas se escapa de los objetivos de este vídeo.

¿Se pueden usar todos en las páginas web? Lo veremos a continuación. En este vídeo vamos a ver cómo se emplean o empleaban los colores en CSS1 y CSS2. Te puedes preguntar el interés que puede tener esto, si en la actualidad lo que se emplea es CSS3.

Bueno, te recuerdo que normalmente, repito, normalmente, en el desarrollo web cuando aparece una nueva versión de una tecnología suele incluir todo lo desarrollado en las versiones anteriores. Sin embargo, en algunos casos sí que puede ocurrir que algunas características se queden obsoletas y desaparezcan en versiones posteriores.

En la especificación de CSS2, la sección 4.3.6 se dedica al uso de los colores en CSS. Por un lado, la recomendación indica que se puede emplear un nombre de color. En la recomendación se definen 17 colores, aunque los navegadores reconocen muchos más nombres de colores que provienen de los terminales X11 y de SVG. Pero saberse los nombres de los colores es poco práctico y además, ¿hay suficientes nombres para todos los colores?

La otra forma de representar un color es mediante RGB. Según la Wikipedia: la descripción RGB de un color hace referencia a la composición del color según la intensidad de los colores primarios con que se forma: rojo, verde y azul (en inglés Red, Green, Blue). Es un modelo con el que es posible representar un color mediante la mezcla por adición de los tres colores luz primarios.

El modelo de color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul, por lo que los mismos valores RGB pueden mostrar colores notablemente diferentes en distintos dispositivos que usen este modelo de color. Aunque utilicen un mismo modelo de color, sus espacios de color pueden variar considerablemente.

Los colores son importantes, pero no pierdas mucho tiempo en buscar un color concreto, porque cada usuario verá uno distinto al que tú ves. La idea es buscar una paleta o combinación de colores armoniosa y con buenos contrastes. Por paleta o combinación de colores, me refiero a dos, tres o cuatro colores; no necesitarás más para definir el esquema de color de tus diseños.

Los valores de cada canal, rojo, verde y azul, se pueden expresar de tres formas distintas: mediante un valor decimal entre 0 y 255, mediante un valor porcentual entre 0 y 100, y mediante un valor hexadecimal entre 00 y FF, que equivale a 0 y 255 en decimal.

En este ejemplo te muestro cómo un valor 0 para los tres canales da como resultado el negro y un valor 255 para todos los canales especifica el color blanco. Puede que al principio te resulte extraño que la suma de todos los colores sea blanco y la ausencia de color negro, pero estamos trabajando con un modelo aditivo (luz directa), que funciona de forma contraria al sustractivo (luz reflejada) al que podemos estar acostumbrados al observar en tintas o pinturas. Este mismo ejemplo, usando valores con porcentaje, sería de esta forma.

Pero en realidad, los desarrolladores web prefieren utilizar la notación hexadecimal. Las dos diferencias fundamentales con el primer esquema son que, en lugar de encerrar entre rgb y paréntesis los valores separados por comas, dichos valores se especifican tras el símbolo almohadilla o numeral, uno tras otro, sin espacios ni caracteres separadores; y que, en lugar de ser un número en base decimal entre 0 y 255, están en base hexadecimal.

No te preocupes, no es necesario dominar la base hexadecimal, aunque terminarás por acostumbrarte conforme lo vayas usando. De nuevo, en el ejemplo te muestro cómo codificar el negro (#000000) y el blanco (#FFFFFF). Además, existe una versión reducida con solo tres dígitos hexadecimales. En este caso, cada dígito representa una pareja cuando ambos dígitos son iguales, como es el caso del blanco (#FFF) y el negro (#000). Pero también se puede usar para otros colores, no te confundas.

Hasta ahora hemos visto las diferentes formas de especificar un color en CSS pero, ¿dónde se pueden utilizar los colores? Los colores se pueden aplicar a distintas partes de cualquier elemento de una página web.

Los colores se pueden aplicar a las distintas partes del modelo de caja: a la fuente (texto), dándole valor al atributo “color”; al fondo, especificando el código de color en el atributo “background-color”; o, modificando el valor del atributo “border-color“, al borde de la caja. En este ejemplo puedes ver el uso de los tres simultáneamente.

Este vídeo está basado en los vídeos “CSS: colores” y “CSS: Colores – Novedades en CSS3” de Guzmán Fernández que puedes encontrar en estas direcciones de YouTube. Ahora te invito a que veas el vídeo “CSS: colores en CSS3”, que explica las novedades que incorpora CSS3 respecto al manejo de los colores.

Ya para terminar, me gustaría recordarte algunos de los sitios web en los que puedes encontrar más información sobre mí y sobre mi trabajo, y dos formas de contactar conmigo, a través de mi correo electrónico sergio.lujan@ua.es y a través de mi cuenta en Twitter @sergiolujanmora. Recuerda que este vídeo forma parte del curso “Introducción al desarrollo web” que está disponible en la dirección idesweb.es.

Muchas gracias por tu atención.