Descripción y esquemas de color Web

Hay cuatro colores básicos que se pueden utilizar para un sitio Web. Vamos a ir mostrando con imágenes la combanización de colores y cómo puede generar un esquema similar en Photoshop.

• Monocromáticos
  Es el uso de colores de la misma tonalidad. Pueden tener diferentes matices o tonalidades dependiendo de la cantidad de blanco o negro que podamos añadir.
• Análogos
  Son aquellos colores que se encuentran a ambos lados de cualquier color en el círculo cromático.
• Complementarios
  Los colores complementarios son los que quedan en el lado contrario del circulo cromático.
• Triádicos
  Estos colores están uniformemente espaciados en la rueda de color.

Vamos a utilizar como color base en todas las combinaciones el color amarillo.

Combinación de colores monocromáticos

Esta combinación de colores utiliza el amarillo mostaza de color base y se añade algo de blanco y negro al color y a la sombra.

• Superior izquierda – base de color # ffe500
• Superior derecha – se ha añadido un relleno de 50% de blanco para conseguir # fff280
• Abajo a la izquierda – se ha agregado un relleno de 75% de blanco para obtener fff8bf #
• Abajo a la derecha – se ha añadido un relleno de 50% de negro para obtener # 7f7200

Utilizar el esquema de color monocromático hará que un sitio web parezca más fluido y controlado.

Más esquemas monocromáticos

Se ha añadido a un cuadrado el 20% de negro para obtener más colores en el esquema. La adición de color negro o blanco a los colores puede crear un nuevo color a la paleta sin ensuciar el tono de la página.

Combinación de colores análogos

Este esquema de color toma el color base el amarillo y suma y resta 30 grados de la tonalidad en la paleta de color de Photoshop.

• Superior izquierda – base de color # ffe500
• Superior derecha – 30 grados para conseguir # 99ff00
• Abajo a la izquierda – 30 grados para conseguir # FF6600
• Inferior derecha – 100% blanco # ffffff

Los colores análogos pueden trabajar muy bien juntos, pero a veces puede entrar en conflicto.

Más colores análogos

Se ha añadido un cuadrado de 20% de negro para obtener más colores en el esquema.

Combinación de colores complementarios

A diferencia de otros esquemas de color normalmente sólo tienen dos colores. El color base y su opuesto en la rueda de color. Photoshop hace que sea fácil obtener el color complementario, sólo tiene que seleccionar el área de color que desea como complemento de y pulsar Ctrl-I. Photoshop lo invertira por nosotros. Asegúremonos de hacer esto en una capa duplicada, para no perder el color base.

• A la izquierda – base de color # ffe500
• Derecha – el complemento # 001aff

Los planes complementarios de color son a menudo mucho más llamativos que otros esquemas de color, por lo que hay que usarlos con cuidado. Suelen ser más utilizados para sobresaltar.

Más esquemas de colores complementarios.

Para obtener esta versión, de ha añadido un 50% blanco a la mitad inferior de los colores y el 30% de negro a la plaza central. Como podemos ver, nos da algunas opciones mas pero sigue siendo una combinación de colores complementarios.

Combinación de colores triádicos

Los esquemas triádicos color se componen de 3 colores más o menos equidistantes alrededor de la rueda de color.

• Superior izquierda – base de color # ffe500
• Superior derecha – 120 grados para obtener # e500ff
• Abajo a la izquierda – -120 grados para conseguir # 00ffe6
• Inferior derecha – 100% blanco # ffffff

Los esquemas triádicos color producen a menudo unas páginas web muy vibrantes. Pero al igual que las combinaciones de colores complementarios estos pueden afectar a las personas de manera diferente.

También podemos crear esquemas de color tetrádicos o 4 colores, donde los colores están igualmente espaciados alrededor de la rueda de color.

Más esquemas triádicos

Al igual que con los otros ejemplos, hemos añadido un cuadrado negro al 30% de los colores para obtener los tonos adicionales.

Esquemas de colores discordantes

Recordemos que la belleza siempre está en los del espectador. Los colores discordantes son colores que están más lejos que cerca de 30 grados de diferencia en la rueda de colores y no son complementarios o parte de una tríada.

Los esquemas de colores discordantes puede ser muy impactantes y sólo debemos utilizarlos para generar atención. Recordemos que estos colores suelen crear un choque para atraer la atención del espectador, pero no debemos olvidar que quien lo  reciba no sea lo que exactamente está buscando.