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”, voy a explicar las novedades sobre colores en CSS3.

En el vídeo anterior, “CSS: colores”, vimos las distintas formas de especificar un color en CSS1 y CSS2. Recuerda que estas formas también siguen siendo válidas en CSS3.

En CSS3, el uso del color está definido en la especificación “CSS Color Module Level 3”. CSS3 hace oficial la lista extendida de los nombres de los colores que ya se usaban en CSS2. Por tanto, esto no es realmente una novedad.

En CSS3 se incluyen, principalmente, dos novedades sobre el color: la opacidad o transparencia del color y el modelo de color HSL.

La opacidad se puede incluir en el esquema RGB, añadiéndole un cuarto canal conocido como alpha, que, con valores entre 0 y 1, donde 0 es completamente transparente y 1 completamente opaco, permite especificar la opacidad del color. En el ejemplo puedes ver un párrafo sobre el logotipo del curso con un color de fondo RGB, y ahora, gracias a la magia del cuarto canal, el mismo ejemplo con una opacidad del 75%, del 50%, del 25% y, finalmente, del 0% totalmente transparente. A diferencia de RGB, no hay notación hexadecimal para RGBA.

Vamos a ver ahora la otra novedad importante en el uso de los colores que incluye CSS3. HSL define los colores mediante Matiz, Saturación y Luminosidad. El modelo HSL mejora un punto débil del modelo RGB, ya que HSL es más intuitivo porque define los colores de la misma forma que lo hace el ojo humano. No obstante, también es un modelo criticado por ser dependiente del dispositivo.

La sintaxis es muy parecida a la del modelo RGB; la diferencia fundamental es que el matiz se mueve en un rango de valores entre 0 y 360, mientras que la saturación y la luminosidad son valores porcentuales. Si te lo estás preguntando, sí, puedes utilizar el canal alpha también para HSL, de la misma forma que lo haces para RGB.

Seguramente no te habrás fijado antes, pero en muchos cuadros de diálogo para seleccionar colores aparece la posibilidad de usar el matiz, la saturación y la luminosidad. No obstante, te recomiendo que utilices alguna herramienta específica para HSL, como esta que te muestro aquí y que está disponible de forma gratuita en la Web. Esta herramienta puede ser muy útil para construir paletas de colores, ya que sólo cambiando el matiz se pueden conseguir colores que combinan de forma armoniosa.

Ahora te recomiendo que veas el vídeo “CSS: ejemplo de uso de colores transparentes”. 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.

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.