El contenido es lo más importante, pero si queremos que los visitantes de nuestra página o blog lean las entradas más vale que su aspecto sea visualmente atractivo. Y un factor determinante para ello es el color.

Puede que este blog, como tantos otros, hable de palabras y frases, conjuntos de caracteres alineados en filas e impresos sobre un fondo de forma que permitan su lectura. Pero igual que la portada de un libro tiene una importancia determinante en nuestra decisión de leerlo o comprarlo, el aspecto de una página web juega un papel crucial para que continuemos recorriéndola o, por el contrario, la abandonemos y saltemos a otra cosa. Y una de las facetas de mayor importancia para que ese aspecto nos agrade es la paleta de colores que nos muestre.

La buena y la mala noticia es que en la mayoría de equipos informáticos disponemos de más de 16,6 millones de colores entre los que elegir. Se considera que los tricrómatas, que es como se conoce a las personas con visión de color normal, son capaces de distinguir más de un millón de colores diferentes. También hay una cantidad significativa de personas con afecciones visuales, entre las que destaca el daltonismo, una alteración que reduce en mayor o menor medida la capacidad de distinguir ciertos colores y que se estima que sufren el 8% de los varones y el 0,5% de las mujeres.

En cualquier caso, los visitantes de tu web o blog esperan que presente un aspecto visualmente sugerente, así que es recomendable que te preocupes de ofrecerles una combinación de colores atractiva. Y para ello hay muchos detalles a tener en cuenta.

Qué queremos transmitir

Los colores transmiten de por sí emociones. Algunas que se asocian de forma habitual con colores puros son las siguientes:

• Blanco: limpieza, inocencia, pureza.
• Negro: elegancia, misterio, control
• Azul: tranquilidad, fiabilidad, confianza.
• Rojo: pasión, velocidad, poder.
• Verde: seguridad, prosperidad, naturaleza.
• Amarillo: optimismo, energía, razonamiento.

Un libro antiguo (1994) pero muy completo, con numerosos ejemplos de combinaciones de colores que sugieren distintos conceptos (vitales, acogedores, refrescantes, etc.) es La armonía en el color, de Bride M. Whelan, disponible en SlideShare.

Elegir una paleta armónica

Las reglas de la teoría del color indican diferentes combinaciones recomendadas:

• Monocromática: Un color con diferentes tonalidades.
• Complementaria: Dos colores que se sitúan en extremos opuestos de la rueda de color. Presentan un fuerte contraste y pueden ser muy efectivos. Dos ejemplos serían azul y naranja o amarillo y violeta.
• Análogica: Tres o cuatro colores cercanos en la rueda de colores (separados por ejemplo por 30 grados). Transmiten equilibrio y tranquilidad. Presentan poco contraste y se recomienda que se usen solo colores cálidos o solo fríos. Un ejemplo: amarillo verdoso, verde y azul verdoso.
• Triádica: Tres colores equidistantes entre sí en la rueda de color. Es conveniente utilizar uno como color dominante y los otros dos como accesorios. Por ejemplo azul, amarillo y rojo o verde, naranja y morado.
• Tetrádica (palabro, lo sé): Dos juegos complementarios de dos colores que están separados entre sí por 60 grados en la rueda de color. Como en el caso anterior, es preferible usar uno de los cuatro como color dominante. Un ejemplo serían las parejas violeta-amarillo y azul-naranja.

Asegurar la legibilidad

No todas las combinaciones de colores para texto y fondo presentan la misma funcionalidad. Poner un texto en gris oscuro sobre un fondo negro no le va a facilitar las cosas a tus visitantes. Algunas reglas básicas:

• Buscar el mayor contraste posible.
• Es preferible utilizar colores oscuros sobre fondos claros ya que los textos en negativo se leen peor.
• Escoger colores que no sean opuestos/complementarios ni estén próximos en la rueda de colores.
• Si se elige el blanco como valor de fondo, se recomienda no utilizar blanco puro sino algún tono más matizado.

Combinaciones que ofrecen una buena legibilidad:

Una página que permite comprobar la legibilidad de los textos es la de WebAIM. Introduciendo el color del texto y el del fondo nos calcula el índice de contraste y nos presenta el resultado. Lo mismo puede realizarse en Colour Contrast Check.

Utilizando como referencia las directrices de accesibilidad al contenido web del W3C, se recomienda que una página dirigida al público en general cumpla con el nivel AA (contraste de 4,5 a 1 para texto de tamaño normal y de 3 a 1 para texto de tamaño grande), mientras que si está dirigida a un público con capacidad reducida, como ancianos o personas con disfunciones visuales, es conveniente que cumpla con el nivel AAA (contraste de 7 a 1 para texto normal y de 4,5 a 1 para texto grande).

No sobrecargar

Es recomendable utilizar un número reducido de colores, típicamente dos o tres. Y, en todo caso, usar varios tonos de dichos colores. Tampoco usar colores muy brillantes o saturados (o al menos utilizarlos sobre fondos suaves), los usuarios no acostumbran a llevar puestas las gafas de sol cuando acceden a tu página.

Aprovechar los recursos online disponibles

Generadores de paletas de colores

En esencia hay dos enfoques. En algunas páginas puedes ir creando paletas sucesivas que te va proponiendo el programa e ir bloqueando uno o más de los colores para que ya solo cambien los restantes hasta dar con la combinación que nos satisfaga. En otras, se selecciona una regla de armonía y el programa presenta paletas de forma autónoma o a partir de un valor de partida. La mayoría de los sitios permiten así mismo subir una imagen cualquiera para generar una o más paletas a partir de ella. En casi todos los casos se puede exportar la paleta generada en múltiples formatos (hexadecimal, RGB, CMYK, RAL, …) e incluso como código (CSS, HTML, XML).

Coolors. Tiene una interfase sencilla y potente. Puede elegirse la regla de armonía e ir bloqueando los colores. Diversos formatos de exportación.

Paletton. Selecciona una regla de armonía y modifica si lo deseas la distancia entre los colores. También puede exportarse en distintos formatos.

Colormind. Parecida a Coolors aunque con menos posibilidades. Permite ver la aplicación de la paleta sobre unas plantillas predefinidas.

Adobe Color. Más limitada. Permite usar diferentes reglas de armonía.

ColorSpace. Tecleando el valor de un color concreto, genera diversas paletas asociadas. También crea gradientes a partir de dos o tres colores.

ColourCode. Una interfase original. Permite crear una paleta sin más que mover el cursor. O elegir una regla de armonía e ir creando diferentes paletas moviendo el cursor.

Otras páginas

ColourLovers. Casi una red social dedicada al mundo de los colores. Necesitas registrarte para poder salvar tus creaciones. Tiene herramientas de generación de paletas (Copaso) y de creación de paletas a partir de imágenes (Photocopa).

ColorSchemer. Una página con diversas herramientas, relacionadas con los colores pero también con muchos otros temas (generadores, calculadoras y convertidores diversos).

En HtmlColorCodes puedes encontrar diversas herramientas y unos tutoriales básicos sobre como definir colores en HTML y en CSS.

A veces nos preguntamos cuál es el nombre de un determinado color. Name that color y Color name & hue nos brindarán el nombre (en inglés) del color más próximo al valor que hayamos indicado.

Color Blindness Simulator permite cargar una imagen cualquiera y ver su aspecto para las personas que sufran alguna de las deficiencias visuales conocidas.

Y no desesperarse

Si aún con toda esta información conseguimos hacer una página web que ofende a la vista, no hay que preocuparse demasiado. Seguro que no superaremos a The World’s Worst Website Ever.

Foto por Myriams-Fotos.