Entradas etiquetadas ‘color web’

Descripción y esquemas de color Web

16 de Enero de 2011

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.

amarillo


Combinación de colores monocromáticos

monocromaticos

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
monocromaticos_2

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
analogos

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
analogos_2

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

Combinación de colores complementarios
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.
complementarios_2
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
triadicos

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
triadicos_2

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
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.