Diseño de Paginas Web

Selección de la paleta de colores para un diseño web

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 3,00 de 5)
Cargando...

La elección de la paleta de colores puede hacer que un diseño sea un éxito o un fracaso. La selección de colores debe seguir una serie de reglas preestablecidas, que damos a continuación.

La selección de una adecuada paleta de colores para el diseño de una página web, puede ser factor decisivo en el éxito o el fracaso. Si bien es cierto que los colores y sus combinaciones dependen en cierta medida de la moda y de factores subjetivos, existen ciertas reglas elementales que deben conocerse.

La combinación de colores intenta provocar una reacción emocional en el observador. No todas las personas tienen el mismo gusto por los colores, aunque es posible establecer una tendencia de acuerdo con el grupo social al que el posible usuario pertenece.

Dentro de la selección de los colores de una página, hay que tener en cuenta varios factores, como el tipo de página, la estructura del diseño y la temática de la misma. Cada uno de estos factores puede alterar sustancialmente los criterios para la selección.

Como se podrán imaginar, la página de una empresa de seguros y otra de ventas de juguetes deben emplear combinaciones de colores basados en criterios muy diferentes. Otro factor a tener en cuenta es la armonía de los colores que se desea emplear. Los tipos de armonía son varios, y cada uno de ellos arroja resultados muy dispares.

Tipos de combinaciones de color

Las combinaciones del color ha sido motivo de investigación por parte de artistas y diseñadores por milenios. Desde las primitivas pinturas rupestres puede verse la preocupación de los artistas y diseñadores de todos los tiempos por armonizar y combinar los colores para lograr los efectos deseados en el observador.

Combinaciones monocromáticas

La primera y más sencilla de las combinaciones de color es la monocromática. En estas combinaciones las únicas variaciones están dadas por la luz.

Si se toma un color base y se le agrega blanco o negro (que es la forma de agregar o quitar luz) en diferentes proporciones, se obtiene una gama del mismo color. Estas combinaciones pueden abarcar al blanco y el negro, dando una gama de grises, algo que es posible apreciar en algunas páginas web.

Combinación monocromática

Las combinaciones monocromáticas empleadas en el diseño web, suelen emplearse en páginas en la que se busca un efecto de sobriedad y de elegancia. Evidentemente si lo que se pretende es llamar la atención de los usuarios, este tipo de combinaciones no son las indicadas. Se emplean en páginas en las que se desea provocar una sensación de tranquilidad y seriedad. Analicemos el ejemplo siguiente:

Combinación monocromática

Esta página corresponde a la edición digital de un periódico. La paleta de colores empleada tiene como base el color azul, cuyos matices pueden verse en el color de fondo, el encabezado, el menú y la tipografía.

Posiblemente el motivo de la selección de esta combinación se deba a que se desea presentar un diseño sobrio (el ejemplo lo es en extremo) y elegante. Esto puede deberse a varios motivos.

  • El primero es que posiblemente su público esté conformado por personas de mediana a avanzada edad y con tendencias más o menos conservadoras.
  • Otro efecto conseguido con el establecimiento de una paleta de colores monocromática es que el contenido gráfico y textual adquiere una relevancia mucho mayor al no verse opacado por la coloración del diseño.

Combinación de colores análogos

Se denominan colores análogos a aquellos que, ubicados en la rueda de colores, se encuentran en lugares próximos. Este tipo de combinaciones se dan muy frecuentemente en ambientes naturales. Si se observa un bosque o una pradera, veremos que los colores que se combinan son amarillos, verdes y celestes, colores que se encuentran próximos en la rueda de colores.

Combinación de colores análogos

Es frecuente encontrar este tipo de paleta de colores en páginas web destinadas a los productos naturales o se desea exaltar la vinculación de lo que se publica con los ambientes naturales. En el ejemplo siguiente, se utiliza una paleta de colores que incluye naranja, amarillo y verde como base (con diferentes grados de luminosidad) para dar un toque natural al estilo.

Combinación de colores análogos

Combinación de colores opuestos

Cuando lo que se desea generar es un alto impacto visual a través del color, una de las formas de lograrlo es utilizando una paleta de colores que incluya colores opuestos.

Los colores opuestos son aquellos que se encuentran en oposición dentro de la rueda de colores, como por ejemplo rojo y celeste, verde y violeta, amarillo y azul.

Estas combinaciones suelen emplearse en el diseño de carteles para la vía pública, dado que consiguen atrapar la atención de los usuarios de las mismas.

El siguiente es un ejemplo de utilización de colores opuestos en la paleta de una página web. En este sencillo pero llamativo diseño, se pretende atraer la atención del público hacia los contenidos con fuertes colores opuestos, además de distinguir claramente unos de otros gracias a que los colores opuestos también generan contraste.

Combinación de colores opuestos

Otra forma de emplear los colores opuestos es hacer una tríada de colores, empleando dos colores complementarios y uno opuesto de forma que se obtiene las ventajas de ambos sistemas, aunque el impacto visual conseguido es algo menor que en el empleo de combinaciones de opuestos.

Tal es el caso de la web que hemos tomado como ejemplo, donde la combinación incluye dos colores análogos, como el naranja y el amarillo, que se encuentran opuestos al verde, incluido en la paleta de colores de este sitio.

Combinación de colores opuestos y análogos

Modelos de paletas de colores

A pesar de que las posibilidades de combinar los diferentes colores son casi infinitas, no todas las combinaciones resultan efectivas en su utilización en el diseño de páginas web. Existe una gran cantidad de paletas de colores cuya efectividad y atractivo se encuentran probados gracias a su uso.

Dentro de las posibilidades de aplicación del color, también se debe distinguir algunos elementos que son importantes. Por ejemplo, los colores pueden ser tomados tal como se encuentran en el círculo de colores, dando como resultado una combinación de colores vivos muy llamativos.

Sin embargo, también es posible emplear matices con variaciones en la luminosidad, dando colores pasteles o apagados.

Otras formas de combinación emplean el blanco y el negro, ya que ambos colores se combinan con mucha facilidad con cualquiera de los demás colores. Esta facilidad de combinación del blanco y el negro ha hecho que sean incluidos en la mayoría de las paletas de colores.

A continuación, les mostramos algunos ejemplos de paletas de colores de las muchas posibles, aunque animamos a la experimentación como método de obtener las paletas adecuadas para el sitio web que se encuentra en creación:

Paletas de colores

¿Cómo hacer que la paleta de colores tenga el efecto deseado?

Una vez definida la paleta de colores para la página, debemos ver como hacemos para lograr que estos colores tengan el efecto visual deseado.

No basta con colocar el color en los diferentes elementos de la página web, sino que además debemos hacer que estos elementos sean fácilmente visibles, empleando uno de los principios básicos del diseño web: el contraste.

Para ello es absolutamente necesario el empleo de otros colores, que pueden ser neutros u opuestos a los colores que integran la paleta.

Por ejemplo, si empleamos imágenes con colores fuertes, estas imágenes pueden ser distribuidas sobre un fondo negro o de colores pálidos, haciendo que sea sencillo contrastar y separar cada uno de los elementos.

En el siguiente ejemplo hemos tomado una página de juegos para niños, la cual está diseñada con elementos de colores fuertes y llamativos.

Página para niños

Para lograr que estos elementos se destaquen y sean de sencilla visualización, el diseñador ha empleado un fondo que va desde el blanco hasta el gris pálido, lo que hace que los elementos, sobre todo las imágenes, se vean perfectamente definidas.

En una palabra, además de definir el tipo de color de nuestra página, debemos pensar en como resaltar los elementos coloreados empleando colores opuestos para, por contraste, marcar, definir y resaltar cada uno de los elementos.

Deja una respuesta