Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_nlist() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 420

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230

Warning: ftp_pwd() expects parameter 1 to be resource, null given in /home/customer/www/appsourcing.net/public_html/wp-admin/includes/class-wp-filesystem-ftpext.php on line 230
¿Cómo escoger los colores indicados para su página web? - AppSourcing

¿Cómo escoger los colores indicados para un página web?

La importancia del color

blog-como-escoger-colores-pagina-web

Elegir los colores que uno va a utilizar ya sea para una página web o un logo, no es algo sencillo. Especialmente si no tenemos mucho conocimiento acerca de la teoría del color. Es normal dudar acerca de este tema, ya que es sumamente importante, y si no somos diseñadores no tenemos por qué tener este conocimiento.

Siempre elegir la gama de colores que vamos a utilizar para nuestro sitio web es peligroso, ya que se puede ver asombroso o, en el peor de los casos, horrible. Al iniciar nuestra página web podemos decidir no utilizar ningún color. Si elegimos un diseño sin ningún color, tomamos el riesgo de que nuestra página web sea aburrida y no llame la atención. 

Por el contrario podemos elegir un diseño policromático que, si no tenemos el conocimiento adecuado, puede que la página web se vea sumamente informal por la saturación de color. O que se vea mal porque simplemente los colores no forman una armonía.

Pasos para elegir los colores de nuestro sitio web

Seguir los siguientes pasos puede ayudarnos a elegir los colores ideales para nuestro sitio web:

  • Hay que escoger un color dominante para la página web. Normalmente elegimos el color dominante de nuestro logo.
  • Al haber elegido el color dominante vamos a elegir colores complementarios al principal. Esto le va a garantizar armonía
  • Es importante elegir un color de fondo. El color de fondo no debe ser un color muy llamativo ni saturado, ya que estos dificultan la lectura. La tendencia general es elegir el color blanco o el negro de fondo, para que no choque con los diseños ni las fotos del sitio.
  • Utilizar un patrón de color en el sitio web. Es decir, no elegir de forma aleatoria qué color poner a qué elementos. El patrón de color ayuda a que la página web se perciba como ordenada y armónica, lo que gusta al usuario.
  • Cuando elegimos el color dominante de nuestro logo y página web tenemos que ser conscientes de que cada color transmite algo. Y tenemos que tener una comunicación asertiva. Es decir, que los colores que elijamos vayan acorde con nuestro producto y con lo que queremos comunicar al cliente.  La cromatología es la ciencia que se encarga de estudiar como es comprendido cada color.

Significado de los colores

Rojo

El color rojo es el color del fuego y de la sangre, por lo que lo asociamos con el peligro. Muchas veces animales sumamente venenosos son de este color, ya que alerta peligro. Sin embargo, este color también tiene una connotación positiva, la cual es: la energía, la fortaleza, el amor, y la determinación.

El color rojo es un color muy intenso por lo que es sumamente llamativo. Por esta cualidad de visibilidad se utiliza para avisos importantes y prohibiciones.

Cuando colocamos un texto o una imagen con este color lo trae a primer plano, ya que resalta sobre los otros colores. Es recomendado para incitar a las personas a tomar decisiones rápidas durante su visita en un sitio web, como por ejemplo en un botón de acción (CTA).

En publicidad el rojo se utiliza para provocar sentimientos eróticos.

Símbolos como labios, uñas, zapatos, vestidos, etc.

Como está tan relacionado con la energía es recomendado para utilizar en anuncios de carros, motos, bebidas energéticas, juegos, deportes, entre otros.

Rosado: simboliza romance, amor y amistad. Representa pasividad.

Rojo claro: simboliza alegría, sensualidad, pasión, amor y sensibilidad.

Rojo oscuro: evoca energía, vigor, furia, fuerza de voluntad, cólera, ira, malicia y valor.

Café rojizo: es asociado con el otoño y la perdida.

Amarillo

El amarillo simboliza la luz del sol. Representa la felicidad, la inteligencia y la energía. Al ser un color cálido da la sensación de calor, lo cual provoca alegría, estimula la actividad mental y genera energía muscular. Está muy relacionado con la comida, como por ejemplo McDonald’s.

El amarillo, como color primario, llama mucho la atención. Por eso en algunos países los taxis son de ese color.

Con el color amarillo hay que tener cuidado, ya que en exceso puede ser molesto y/o desesperante.

El color que más destaca sobre fondo negro es el amarillo, por lo que si se quiere llamar la atención, se puede utilizar esta dupla de colores. 

Por ejemplo, en un sitio web se puede utilizar el amarillo para resaltar aspectos de los cuales queremos llamar la atención.

En publicidad es utilizado para provocar sensaciones agradables. Es utilizado en productos para niños y de ocio.

No es recomendado utilizar este color para promocionar productos de mucho valor, ya que es relacionado con lo poco formal. Tampoco es recomendado para promocionar seguridad o estabilidad, ya que es un color muy variable y espontáneo.

Amarillo pálido: Es relacionado con la muerte o el más allá. También representa precaución, deterioro, enfermedad, envidia y celos.

Amarillo claro: Se simboliza con la inteligencia, originalidad y alegría.

Anaranjado

El anaranjado es la unión del amarillo con el rojo, por lo que combina la felicidad del amarillo con la energía del rojo. El color naranja tiene una alta visibilidad, por lo que es recomendado para captar la atención del visitante a su página web.

El color naranja, al igual que el amarillo y el rojo, es un color cálido, sin embargo no presenta las cualidades agresivas del rojo.

El anaranjado produce la sensación de mayor aporte de oxígeno al cerebro, por lo que hay más estimulación cerebral.

Es un color muy recomendado si el público meta es gente joven. Por lo que se recomienda utilizar para venta de juguetes.

Además, si el producto es comida, el anaranjado es el color ideal ya que es asociado con la buena alimentación y abre el apetito.

Naranja oscuro: refiere a desconfianza.

Naranja rojizo: evoca deseo, pasión, dominio y agresividad.

Dorado: Produce sensación de prestigio. Significa sabiduría, alta calidad  y riqueza.

Blanco

El blanco es asociado con la luz, la bondad, la inocencia y la pureza. Es considerado como el color de la perfección. El color blanco transmite seguridad, pureza y limpieza, por lo que en publicidad lo utilizan para transmitir frescura y limpieza. Si el producto que vamos a vender es de limpieza o medicina, el blanco con el azul es una buena dupla.

El color blanco también es utilizado para publicidad productos de tecnología finos, para comunicar elegancia y simplicidad. 

Este color, como significa bondad y luz, es recomendado si tenemos una empresa de beneficencia.

Por último, el color blanco es asociado con la pérdida de peso. Por ejemplo, en muchos anuncios de productos light los participantes están vestidos de blanco, porque nos transmite salud y frescura. Al igual que muchas marcas de productos bajos en calorías o lácteos, lo utilizan en sus logos.

El color blanco es un buen color para utilizar en el fondo de nuestra página web, ya que cualquier color colocado por encima va a resaltar de manera no chocante.

Morado

El morado es la combinación del azul y el rojo. Transmite la estabilidad del azul y la energía del rojo.

El morado simboliza poder, nobleza, lujo y ambición. Es un color extravagante.

El morado es también asociado con la sabiduría, la creatividad y la independencia.

En la publicidad el color morado es muy asertivo para productos para niños. Esto es debido a que es un color asociado a la magia y el misterio. Según estudios el color morado es el color preferido del 75% de los niños antes de la adolescencia.

También es un color útil para productos dirigidos a las mujeres.

Morado claro: produce nostalgia y romance.

Morado oscuro: evoca melancolía y tristeza.

Azul

El azul es el color del cielo y del mar, es asociado por este motivo con la estabilidad, la profundidad, tranquilidad y calma.

El color azul representa la lealtad, la confianza, la sabiduría, la inteligencia, la fe y la verdad.

En publicidad, el color azul está muy ligado a los productos de limpieza, ya sean del hogar o personal. Y también se utiliza para todo lo que esté relacionado con:

  • El cielo, como aerolíneas o aeropuertos
  • El aire, como aires acondicionados o deportes aéreos 
  • El mar, cruceros, hoteles de playa, vacaciones y deportes acuáticos
  • El agua, como aguas embotelladas, parques de diversiones con agua, piscinas

También es un color sumamente recomendado para promocionar productos de alta tecnología, ya que al ser un color frío es ligado a la inteligencia.

Si el producto que estamos vendiendo es alimenticio, el color azul no es el color para su logo o página web. Esto se debe a que el azul es un supresor de la comida o del apetito. Una cocina o un restaurante nunca debería ser azul.

El color azul con algún color cálido como amarillo, rojo o naranja funcionan muy bien juntos pues llaman la atención.

Azul claro: es asociado con la salud, la curación, el entendimiento, la suavidad y la tranquilidad.

Azul oscuro: es asociado con el conocimiento, la seriedad y el poder.

Verde

El verde es el color de la naturaleza. Representa armonía, crecimiento, fertilidad y frescura.

El verde es asociado con la seguridad. También es un color sumamente relajante, siendo el color que más relaja al ojo humano. Incluso puede ayudar a mejorar la vista.

En publicidad el verde es utilizado en productos médicos, productos de jardinería, turismo verde, actividades al aire libre, hoteles de montaña o productos ecológicos (todo lo relacionado con el reciclaje también es verde).

Verde oscuro: asociado al dinero, ideal para promocionar bancos.

Verde olivo: relacionado con la paz.

Verde agua: se asocia con la protección y la curación emocional.

Negro

El color negro representa poder, elegancia, formalidad, autoridad, prestigio, seriedad y fortaleza. También tiene sus connotaciones negativas como: muerte, misterio y su asociación con lo desconocido.

En una página web, el color negro puede representar una imagen corporativa de elegancia. Sin embargo, no es recomendado utilizarlo como fondo ya que complica la fácil lectura, y estaríamos fallando como comunicadores. Muchas páginas de empresas de juegos y páginas antiguas utilizaban el color negro como color de fondo.

Es recomendado utilizar el color negro de fondo cuando la página web es de un museo,  o de fotografía, ya que el negro contrasta con los otros colores y los hace sobresalir.

El negro en combinación con otros colores más vivos como el amarillo, naranja o rojo, produce un efecto bonito y elegante. Claramente se puede observar en el logo de National Geographic.

Círculo cromático

Esquemas de color

Existen esquemas de colores en el diseño los cuales se pueden utilizar en las páginas web o en los logos con la garantía de que se van a ver bien. Los esquemas de color son:

1. Monocromático 

Utiliza únicamente un tono. Las variaciones son de valor y saturación. Un mismo tono que se le agrega blanco, gris o negro.

2. Analogía 

Es cuando se utilizan 3 tonos que están vecinos en el círculo cromático (azul, morado azul, azul verdoso). Crea armonía y tranquilidad.

3. Triada 

Se da colocando un triángulo equilátero en el círculo cromático y eligiendo los valores de las puntas.

4. Tétrada 

Esquema de 4 colores, se obtiene rotando un cuadrado o rectángulo dentro del círculo cromático. Casi siempre son 2 parejas de complementarios.

5. Complementarios

Se decide por una pareja de complementarios.

6. Tonos cálidos

Solo utilizando tonos cálidos, un mínimo de 3.

7. Tonos fríos

Solo utilizando tonos fríos, un mínimo de 3.

8. Balance posicional

Busca crear un ritmo visual con colores. Se distribuyen y repiten algunos colores por toda la composición para lograr un efecto de equilibrio y ritmo visual. Se utilizan 3 colores como mínimo.

¿Necesita ayuda escogiendo los colores de su logo o sitio web?