Saltar la navegación

3.1.3.- Colores.

En una guía de estilo deben figurar los colores a emplear en el sitio Web en todos los textos, fondos, e imágenes según sea su ubicación y finalidad. La información debe suministrarse aportando los valores para el modelo RGB tanto en hexadecimal como en decimal.

Ya vimos en el apartado Tipografía que la guía de estilos debe reflejar el color de la fuente y el color del fondo sobre el que va escrita según sea su funcionalidad. En muchos sitios Web, se utilizan colores distintos en los enlaces del sistema de navegación de su página principal. Estos mismos colores se emplean después para representar las diferentes secciones del sitio.

Ilustración de una composición realizada a partir de copias de pantalla de 5 páginas del sitio Web de la Junta de Castilla y León. En la parte central de la imagen, con forma elíptica, está la página principal del sitio. Ésta muestra en su centro los enlaces a las secciones más visitadas, cada una de un color diferente. Señalados mediante líneas de los mismos colores que cada una de las secciones, están situadas en las cuatro esquinas de la imagen, las páginas correspondientes a cada una de las secciones. Estas líneas señalan el menú de navegación de la sección y el título del contenido.

Por ejemplo, el sitio de la Junta de Castilla y León, que puedes ver en la imagen tiene en su parte central una zona de navegación que enlaza con las secciones más visitadas:

  • Medio Ambiente: tiene la fuente de color verde oscuro sobre un fondo de color verde claro.
  • Empleo: tiene la fuente de color blanco sobre un fondo de color oscuro.
  • Administración Pública: tiene la fuente de color blanco sobre un fondo de color púrpura.
  • Vivienda y Urbanismo: tiene la fuente de color blanco sobre un fondo de color rojo.

Cada una de las secciones mencionadas emplea los mismos colores o alguno de su misma escala en su zona de navegación y en el título del contenido propio de la sección. En este caso, la guía de estilos debería reflejar, entre otras, las combinaciones hexadecimales para el color de:

  • Las fuentes en el bloque central de la página principal (la que está en el centro de la imagen).
  • Los fondos de los títulos de las secciones de la página principal (mencionadas en el párrafo anterior).
  • Las fuentes del menú de navegación y del título del contenido en cada una de las páginas de las secciones (las cuatro que están alrededor de la principal).
  • Los fondos de las opciones del menú de navegación y de su título en cada una de las páginas de las secciones.

Por último, una serie de consejos que te pueden ser útiles:

  • Si vas a emplear los colores como sistema de codificación, es decir, para que el usuario haga una distinción de la finalidad de los elementos según su color, asegúrate de que sea fácil de comprender. Un ejemplo de esto es la imagen de la rueda de color, donde se han empleado iniciales de color azul, verde y marrón según la clasificación a la que pertenecía cada color. Para asegurar la comprensión de estas iniciales se incluyó en la imagen la descripción de cada clasificación utilizando los mismos colores.
  • Ser consistentes en el uso de los colores. Usar un color siempre para lo mismo.
  • No excederse en el uso de colores distintos.
  • Utilizar combinaciones de colores que transmitan armonía.
  • Utilizar correctamente el contraste de colores para destacar las partes relevantes del sitio.
  • Ten en cuenta la psicología del color.