Cómo elegir una buena combinación de paletas de colores para el diseño de una página web WordPress + 23 Mejores Herramientas

Elegir una buena combinación o paleta de colores para su sitio web puede ser algo que asusta, especialmente si no está seguro de su capacidad de combinar colores de forma efectiva, o si no cuenta con la ayuda de un diseñador experto.

1. ¿Qué color debe usar para su logo o titular?
2. ¿Cómo elegir colores complementarios que combinen bien?
3. ¿Qué parte del sitio web debe utilizar cada color?

Escoger y mezclar colores puede ser un juego complicado.

El resultado puede parecer armonioso y incitar a la venta si se hace de forma correcta, o crear un escenario de terror que no haga más que hacerte perder visitas, lectores y ventas.

Si evitas usar el color, su sitio web puede parecer simple y poco memorable. Si usas demasiado color en una misma página web, te arriesgas a que parezca de mal gusto.

¿La solución?

Mejores colores para páginas web profesionales

• COLOR AZUL: Mejores ejemplos de inspiración para diseño de páginas web azules en 2020

• COLOR AMARILLO: Inspiración y ejemplos para diseño de páginas web amarillas en 2020

• COLORES PASTEL: Inspiración y ejemplos para diseño de páginas web

Además de no entender cómo elegir el diseño de plantilla adecuado, aprender a utilizar el color en su sitio web es uno de los mayores retos a los que se puede enfrentar cualquier propietario de un sitio web de bricolaje.

Esto es especialmente cierto si usted no tiene una aptitud natural para el color y el diseño.

Si usted está dibujando un espacio en blanco sobre qué y cómo utilizar el color en su sitio web de la manera correcta, este post puede ayudarle.

El uso del color puede simplificarse una vez que conozca los pasos correctos a seguir.

Por lo tanto, hemos elaborado esta guía para mostrarle, paso a paso, cómo hacerlo.

¡Vamos a empezar!

Por cierto, si aún no tiene un sitio web y está buscando el constructor de sitios web adecuado, eche un vistazo a nuestra tabla de comparación de constructor de sitios web donde desglosamos y puntuamos a cada constructor de sitios web. Vea cuál podría funcionar bien para usted.

Llevamos a cabo nuestra propia investigación para decidir qué constructor de sitios web es el mejor para diferentes propósitos.

Tome nuestra prueba para obtener una recomendación que es personalizada a sus necesidades.

Las 23 mejores herramientas para elegir y combinar paletas de colores para diseño web

Elegir la combinación de colores perfecta no debería ser una tarea miserable. Todo lo que necesita son las herramientas adecuadas para el trabajo y un ojo para el diseño.

No puedo ayudar a desarrollar tu ojo para escoger colores, pero puedo compartir un montón de herramientas de color útiles que probablemente mejorarán tu ojo a medida que las uses.

Todas estas herramientas son 100% gratis, por lo que son fáciles de marcar y reutilizar una y otra vez. También pueden trabajar para web, móvil, impresión o cualquier otro medio que necesite colores increíbles.

1. ColorHexa

Recientemente estuve navegando por la web y me encontré con ColorHexa. Es una de las herramientas de color más geniales que he visto en mi vida.

Esto no es técnicamente un generador de color o una herramienta de diseño de esquemas. En su lugar, es una biblioteca de información sobre todos los colores con ideas de degradado sugeridas, tonos relacionados y docenas de códigos de color (por ejemplo: hex, RGB, CMYK, CIE-LAB, HSL y más).

Nunca encontrará una lista más completa de información sobre el color. Esto es súper útil para todos los diseñadores, incluidos los diseñadores web, y es un gran lugar para empezar a investigar los colores para sus proyectos.

2. Colors.css

Si investigas un poco sobre la psicología del color, aprenderás cómo se combinan los diferentes colores y qué tipo de estado de ánimo dan. Esto contrasta con ciertos tipos de colores y la forma en que funcionan juntos.

Todos los navegadores vienen con colores predeterminados que a menudo son demasiado duros. Colors.css corrige eso.

Es una librería CSS gratuita que rediseña la paleta de colores por defecto. Esto significa que puede utilizar nombres de color como «azul» y «rojo» con valores totalmente diferentes.

Incluso tienen toda una página de accesibilidad llena de ideas para combinar esquemas de color que mejorarán la legibilidad de su sitio.

3. Extensión de Google Chrome ColorPick (cuentagotas)

¿Con qué frecuencia encuentra un sitio con una hermosa combinación de colores? Encuentro sitios increíbles todo el tiempo y es difícil exportar esos colores de la hoja de estilo.

Puedes usar Chrome DevTools, pero esto requiere que busques en el código para elegir los colores hexadecimales. En su lugar, puede utilizar la extensión ColorPick Eyedropper, creada exclusivamente para Google Chrome.

Sólo tienes que hacer clic en la ventana de conmutación en el panel de extensiones y desplazarte por cualquier color que desees estudiar. Esto le da el código hexadecimal completo junto con un enlace de «copia» para copiar el color exacto a su portapapeles.

Bastante guay, ¿verdad? Y es un plugin gratuito, así que no hay nada que perder al probarlo.

4. Coolors.co

El sitio Coolors es un gran generador de esquemas de color. Puede encontrar docenas de generadores en la web, pero este es un poco diferente ya que soporta los programas de Adobe con su propio complemento.

También puedes obtenerlo como una extensión de Chrome o incluso como una aplicación iOS personalizada para tu teléfono.

Realmente el verdadero valor está en el navegador webapp que auto-genera esquemas de color sobre la marcha.

A continuación, puede mezclar y combinar colores, cambiar la configuración, ajustar el daltonismo y aleatorizar sus propios esquemas en función de determinados criterios.

Es una gran aplicación, pero viene con una pequeña curva de aprendizaje. No le tomará más de 15 a 20 minutos descubrir cómo funciona todo.

5. Color Palette App

Palettte es una herramienta de edición y remapeo de color. Le permite crear esquemas de color que fluyen de uno a otro y ajustar con precisión las muestras de color individuales. También puede importar, analizar y editar esquemas de color existentes. El creador ha escrito más sobre las motivaciones detrás de esta aplicación de color.

6. Material UI Colors

Con una rápida búsqueda en Google encontrarás un montón de herramientas de diseño de materiales en la web. Parecen interminables y muchos de ellos confían en los estilos de color que normalmente se encuentran en las aplicaciones Android.

Con el webapp de Material UI Colors puedes encontrar esquemas de color perfectos que coinciden con las directrices de material de Google.

Cambie fácilmente el matiz de todos los colores con el control deslizante situado en la esquina superior izquierda de la pantalla. O aleatorice sus selecciones para que coincidan con las opciones de color de un sitio existente.

También puede cambiar entre hexadecimal y RGB dependiendo del formato que desee. Una gran aplicación para los amantes del diseño de materiales.

7. Color Supply WebApp

El sitio web de Color Supply es bastante único pero también muy extraño. Le ofrece un montón de herramientas de color interesantes para combinar esquemas de color, elegir los fondos y fondos, además de diferentes maneras de comparar cómo se verían esos colores en una página.

Pero esto no tiene ninguna guía o propósito específico. Actúa como un generador de combinaciones de colores que tienes que aprender a medida que avanzas.

Se imprimirán diferentes colores con códigos hexadecimales cerca de la parte inferior de la página a copiar. Además, le mostrará cómo funcionan esos colores en un degradado, en iconos y con texto. Bonita herramienta, pero viene con una curva de aprendizaje incómoda.

8. Color Safe WCAG App

El WCAG trabaja duro para lograr una web más accesible. El color es una de las formas más fáciles de construir tu accesibilidad sin perder tiempo probando.

Color Safe es una aplicación web gratuita que puede probar sus opciones de color. Usted elige entre un pequeño conjunto de fuentes y tamaños, y luego elige los colores que desee para su primer plano y fondo.

A partir de ahí obtendrá una clasificación de accesibilidad junto con sugerencias sobre cómo mejorar sus opciones de color (si es necesario).

Una herramienta realmente genial para cualquier persona preocupada por la accesibilidad en la web.

9. Color Hunt WebApp

Para una galería de esquemas de color curados por el usuario, eche un vistazo a Color Hunt.

Este proyecto gratuito fue lanzado hace un par de años y sigue siendo una fuente de inspiración para el diseño. La gente somete sus propios esquemas de color en el sitio, luego otros votan sobre esos esquemas de color.

Usted puede ordenar por el más nuevo o por el más popular e incluso votar por sus favoritos. Bastante guay, ¿verdad?

Es una aplicación web extremadamente simple, así que no esperes demasiadas funciones. Es sólo una forma ordenada de navegar visualmente a través de muchos patrones de color diferentes a la vez.

10. Open Colors WebApp

¿Buscando algo un poco más amigable con la web? A continuación, consulte la biblioteca Abrir color.

Se trata de una colección masiva de opciones de color de código abierto creada en torno a la accesibilidad y la compatibilidad con el navegador. Cada color ha sido optimizado para una fácil combinación, independientemente del diseño de su diseño.

Echa un vistazo a la reposición de GitHub para más información y para descargar una copia de los estilos.

11. HTML Color Codes Generator

HTML Color Codes es otro webapp en color centrado en la información.

Esto le permite extraer todas las formas de código HTML/CSS para sus opciones de color directamente desde la aplicación. Puedes buscar cualquier color que quieras, o seguir sus recomendaciones. Además, tiene una herramienta para generar paletas de colores que puede descargar como archivos de Adobe Swatch.

No dejes que el nombre te engañe: esta aplicación es para algo más que para el color HTML.

Es una herramienta brillante para diseñadores digitales de todo tipo que quieran acceder fácilmente a códigos de color y paletas reutilizables.

12. Adobe Color CC

No puedo pasar por alto el increíble webapp de Adobe Color CC.

Esta herramienta gratuita solía llamarse Adobe Kuler, pero ha pasado por varias iteraciones a lo largo de los años.

Sigue siendo un selector de color gratuito, pero la interfaz ha cambiado para que sea más fácil para los diseñadores construir y guardar esquemas de color.

Si usted es un usuario de Adobe, vale la pena marcar esta herramienta. Soporta hasta 5 colores diferentes en un mismo esquema, e incluso puede subir imágenes para extraer automáticamente esquemas de color dinámicos.

13. Brand Colors

Si alguna vez te has preguntado sobre las paletas de colores que usan las marcas más populares o has querido robar la paleta de colores de tu marca favorita, BrandColors es un sitio web que vale la pena mantener como favorito.

Cuenta con una colección masiva de paletas de colores utilizadas por las marcas más populares.

14. ColorMind

Colormind es otro generador de paletas de colores para principiantes que incluye una función muy interesante que le permite obtener una vista previa en vivo de su paleta de colores aplicada a un diseño de ejemplo.

También le permite elegir entre diseños de color de material y de papel, así como la posibilidad de cambiar entre diseños de sitios web y de plantillas.

Además de generar paletas de colores con un solo clic, Colormind también le permite crear paletas de colores a partir de imágenes.

15. Color Designer

Color Designer es un generador de paletas de colores ligeramente avanzado que incluye muchas herramientas únicas para crear paletas de colores profesionales.

La herramienta le permite crear paletas de colores utilizando tres sistemas diferentes: Muestras, selector de color y editor de masas.

Cada opción le proporciona sus propios beneficios.

Una vez que haya elegido los colores base, también puede llevarlos al siguiente nivel explorando diferentes tonos, tonalidades y armonías de color de una extensa lista.

16. Paletton

Paletton es otra herramienta avanzada de diseño de esquemas de color que viene con un conjunto más complejo de opciones para crear paletas de color.

A primera vista, la herramienta puede parecer bastante difícil de entender.

Sin embargo, es una de las pocas herramientas que le permite crear paletas de colores basadas en los principales tipos de paleta de colores, incluyendo monocromática y tríada.

Esta herramienta es la más adecuada para diseñadores avanzados a los que les gusta experimentar y probar diferentes tipos de paletas de colores y esquemas de colores.

17. Canva Color Palette

El generador de paleta de colores de Canva tiene una funcionalidad muy básica, pero hace su trabajo perfectamente.

La herramienta es simple, sólo tienes que subir una foto o una imagen al sitio y la herramienta genera automáticamente una paleta de colores basada en los colores principales de la imagen.

A continuación, puede copiar los códigos de color con un solo clic.

Aunque la herramienta ofrece características limitadas, es ideal para encontrar los colores base para crear una paleta de colores natural.

18. Khroma

Khroma es un moderno generador de paletas de colores que utiliza tecnología AI para crear paletas de colores creativas.

Primero, tienes que seleccionar 50 colores diferentes para entrenar a la IA a generar paletas de colores basadas en tus elecciones.

Entonces usted podrá elegir entre muchas combinaciones de colores generadas por la IA para encontrar la paleta de colores adecuada para su proyecto.

10. ColorSpace

ColorSpace es otro generador de paletas fácil de usar que le permite crear paletas de colores con un solo clic.

Todo lo que tienes que hacer es introducir un código hexadecimal de color principal en el sitio web y luego pulsar el botón Generar.

A continuación, la herramienta genera diferentes estilos de paletas de colores junto con los degradados correspondientes.

19. Herramienta de color

Color Tool es un avanzado creador de paletas de colores diseñado para diseñadores web y de interfaces de usuario.

La herramienta le permite crear paletas de colores de diseño de materiales basadas en la interfaz de usuario y las categorías de accesibilidad.

Una característica útil de esta herramienta es cómo ofrece una vista previa en vivo a medida que selecciona los colores para la paleta.

20. Collor

Collor es otro sencillo generador de paletas de colores que ofrece una experiencia más sencilla en la creación de paletas de colores.

Simplemente seleccione los colores principales y secundarios y se generará una selección de paletas de colores para que usted elija y personalice.

La única desventaja de usar esta herramienta es que requiere que Flash esté habilitado en su navegador.

21. ColorLovers

ColourLovers presenta una colección de paletas de colores creadas por otros diseñadores.

Puede elegir una paleta prefabricada de la lista o crear una paleta propia.

El creador de la paleta de colores también ofrece opciones para crear paletas básicas y avanzadas, así como una opción para extraer colores de una foto.

22. ColorCode

Colourcode es un sencillo creador de paletas de colores que puede utilizar para crear combinaciones de colores únicas con sólo mover el cursor del ratón por la pantalla.

Una vez que encuentre un color, simplemente haciendo clic con el botón izquierdo lo selecciona y luego puede pasar al siguiente color.

La herramienta también le permite encontrar colores basados en monocromo, analógico, tríada y otros tipos también.

23. Data Color Picker

Este selector de colores es también una gran herramienta que puede utilizar para crear paletas de colores.

Le permite elegir colores que encajan con fondos claros y oscuros y también ofrece opciones para seleccionar un solo tono y esquemas de color divergentes

4 consejos para crear paletas de colores profesionales

Antes de llegar a la lista, aprendamos los conceptos básicos para crear paletas de colores más efectivas.

1. Diferentes tipos de paletas de colores

En primer lugar, usted debe estar al tanto de los cuatro tipos principales de paletas de colores que existen.

• Monocromático: Las paletas de colores monocromáticos son las que usted crea usando diferentes tonos del mismo color.

  Estos son bastante fáciles de hacer y son comúnmente utilizados por muchas marcas populares.

• Análogo: Las paletas análogas consisten en colores cercanos entre sí en la rueda de colores.

  Si usted escoge el color principal, entonces los colores al lado pueden ser escogidos como colores secundarios para este tipo de paletas.

• Complementario: Al igual que las paletas análogas, las paletas Complementarias están compuestas de colores que son opuestos entre sí en la rueda de colores.
• Triádico: Las paletas triádicas están hechas de tres colores principales.

  Estas paletas de colores son las mejores para crear un contraste claramente visible en los diseños.

Además, usted también debe aprender y entender la teoría del color.

Algunos de estos generadores incluso le ayudarán a encontrar paletas de colores basadas en diferentes tendencias como el color plano y el diseño del color del material.

También incluyen código hexadecimal que puede copiar para agregar códigos de color adecuados al diseñar sitios web.

Lo mejor de todo es que su uso es completamente gratuito.

2. Considere la psicología del color

Hay un cierto factor de psicología involucrado en los colores.

Según la psicología del color, los diferentes colores tienen un fuerte efecto en la evocación de emociones específicas en los humanos.

Por ejemplo, el color negro se asocia con la elegancia, el misterio y la autoridad.

Esta es la razón por la que el color es utilizado principalmente por las marcas de lujo.

Considere la posibilidad de aplicar la psicología del color al elegir los colores para su paleta de colores.

3. Uso de las tendencias de color

También es importante tener en cuenta las tendencias de color al crear una paleta de colores.

Especialmente si estás haciendo un diseño para una marca moderna o una startup, las tendencias juegan un papel importante a la hora de atraer a las audiencias actuales.

Las tendencias están cambiando constantemente y hay muchas tendencias diferentes que puede aplicar a sus paletas de colores como la tendencia de colores planos, colores de diseño de materiales, colores de metro, y más.

4. Inspiración a partir de fotos reales

Los mejores colores se encuentran en la vida real.

Si prefiere una paleta de colores más realista e inspirada en la naturaleza, puede utilizar fotos reales para encontrar inspiración para su paleta de colores.

Existen herramientas y aplicaciones que le permiten generar paletas de colores basadas también en fotos e imágenes.

Cómo el color puede mejorar su sitio web y la identidad de su marca

Cuando te pido que pienses en Coca-Cola, ¿qué es lo primero que te viene a la mente?

Bueno, querer una botella de Coca-Cola fría puede ser una de ellas.

Entonces, una imagen del emblemático logo de la coca roja puede venir a tu mente.
Fuente: www.coca-colacompany.com

Es bastante difícil pensar en Coca-Cola sin ver el color rojo. El color rojo es parte de Coca-Cola tanto como su famoso refresco.

¿Sabías que la decisión de Coca-Cola de usar el rojo como color de su marca no fue accidental?

El color rojo sirve para dos propósitos críticos:

#1 El rojo de los camiones de bomberos permite a Coca-Cola destacarse de sus competidores en los estantes de las tiendas; y

#2 Cada color tiene sentimientos o emociones diferentes. Cuando la gente ve el color rojo, desencadena respuestas emocionales como excitación, audacia, amor y pasión. Estos son precisamente los sentimientos que Coca-Cola quiere que usted asocie con su soda.

Fuente: us.coca-cola.com

Cuando eliges el color adecuado para tu sitio web, estás haciendo mucho más que hacer que luzca atractivo – Estás creando una marca memorable.

A estas alturas, ya deberías estar pensando «¡Wow, el color es como magia! ¿Por qué no hay más gente usándolo en su beneficio?»

Bueno, porque la mayoría de la gente no sabe cómo.

Así que, en la siguiente sección, le mostraremos 3 sencillos pasos que puede seguir para empezar a utilizar el color a su favor en su sitio web.

3 pasos para usar el color en su sitio web – de la manera correcta

Hay 3 colores principales que debe tener en cuenta cuando diseñe su sitio web:

1. Elegir un color dominante como el color de su marca
2. Elegir de 1 a 2 colores de acento para crear una combinación de colores para su sitio web
3. Elegir un color de fondo para completar su diseño

No se preocupe, le mostraremos cómo escogerlos junto con algunos ejemplos – ¡sigamos adelante!

#1 Elija su color dominante

El color dominante es el color de su marca, como el rojo del camión de bomberos de Coca-Cola.

Este color ayudará a sacar a relucir ciertas emociones o sentimientos cuando la gente llega a su sitio web – al igual que la pasión, la emoción, la audacia y el amor por la Coca-Cola.

Este es el color que usted quiere que su público recuerde cuando piense en usted.

Si ya tiene un logotipo, asegúrese de que uno de los colores primarios de su logotipo sea el color dominante (si no está seguro de cómo crear un buen logotipo, consulte esta guía).

Sin embargo, si aún no tiene en mente un color de marca dominante, he aquí cómo elegir uno:

Significado de los colores: Cómo elegir el color adecuado para usted

Las grandes empresas no eligen sus colores dominantes / marca por accidente. Es estratégicamente elegido para ser utilizado como parte de sus iniciativas de marca y marketing.

Los diferentes colores tienen la capacidad de atraer a tipos específicos de compradores, e incluso pueden alterar el comportamiento de los consumidores.

También puede utilizar varios colores a su favor para poder atraer al tipo de cliente que desea.

Hemos creado una práctica infografía para ayudarle a elegir su color dominante perfecto. Vea si puede encontrar el color que mejor represente lo que usted representa!

Ahora que tiene una buena idea de lo que significan ciertos colores, ¿cuál es el que mejor se ajusta a su negocio, o cómo quiere que se sientan los visitantes de su sitio web cuando vean su marca?

Si aún no está seguro, eso significa que debe tomarse un tiempo para reflexionar sobre su marca y el tipo de clientes que desea atraer.

¿Está tratando de atraer a clientes más jóvenes y enérgicos? ¿O individuos sofisticados con más ingresos disponibles? ¿Sus productos/servicios están dirigidos a hombres o mujeres y son más adecuados para un determinado grupo de edad?

No todos los colores son adecuados para su negocio, por ejemplo, si usted está vendiendo esterillas de yoga, el uso de púrpura (riqueza, regalías) o negro (poder, lujo) podría no ser la mejor opción. Es posible que desee considerar el uso de verde (salud, tranquilidad), gris (simplicidad, calma), azul (paz, calma) o incluso rojo (pasión, energía).

Tómese unos minutos para anotar algunas ideas.

Las diferencias entre chicos y chicas – Sus preferencias de color

Bien, los diferentes colores atraen a diferentes tipos de personas, pero ¿sabía usted que los hombres y las mujeres generalmente prefieren colores diferentes también?

¿Cuál es el género al que se dirige su negocio o sitio web? – ¿Son mujeres? ¿Hombres? ¿O ambos?

Usted puede crear un color de marca muy poderoso y enfocado estudiando la tabla de arriba.

Al usar combinaciones de colores que son favorecidas por hombres, mujeres o ambos, usted puede alterar sus percepciones de su marca – subconscientemente.

Por ejemplo, en base a estudios, se puede ver que tanto a hombres como a mujeres les gusta el azul y el verde, y que a ambos géneros tampoco les gusta el naranja y el marrón; por lo tanto, si se dirige a ambos géneros, la investigación dice que sería más ventajoso considerar el uso del azul o el verde como su color dominante (o por lo menos el color de acento, más abajo).

Esto es inteligencia útil para tener!

Vamos a dar un paso más allá.

La forma en que usted utiliza el color para su marca o productos / servicios, también puede ser influenciada por las emociones que atraen a su público objetivo.

Déjame explicarte.

Conscientemente quieren proyectar una cierta personalidad a otros.

Ser visto pavoneándose por la calle con un bolso nuevo y caro, o pasando el rato en una cafetería de moda, o siendo visto en un nuevo salón de moda, todo comunica en voz baja ciertas características de una persona.

¿Entiendes lo que digo? Muchas de las decisiones personales son un reflejo de lo que sienten que son y de lo que quieren que otros vean. Es una identidad con la que la gente se asocia y quiere que otros la conozcan.

Por lo tanto, si desea atraer a personas que se identifican con la naturaleza y la tranquilidad, utilice el verde. Si quieres atraer a los que quieren ser vistos como jóvenes u optimistas, prueba el amarillo.

Si su público objetivo quiere ser visto como poderoso o lujoso, pruebe el negro.

¿Lo entiendes?

Tómese unos minutos y piense en su audiencia ideal y en con qué aspiran a identificarse. ¿Qué quieren y cómo quieren ser vistos?

Hay mucha psicología aquí, pero es importante que la consideres cuando construyas tu marca.

Cómo usar su color dominante en su sitio web

Ahora que usted tiene un color dominante, usted quiere usar el color en los lugares correctos de su sitio web.

El color llama mucho la atención, por lo que no es conveniente insertarlo en todas partes.

He aquí una regla general:

Sólo utilice su color dominante en un número limitado de lugares en los que desea que los visitantes de su sitio web presten atención, o si desea que sus visitantes tomen ciertas medidas (como llamar a un número de teléfono, rellenar un formulario de contacto, suscribirse a un boletín, etc.).

Básicamente, su color dominante se supone que debe «estallar» – realmente destacando dónde quiere que se enfoquen sus visitantes.

#2 Elige los colores de tu acento

Es bastante aburrido tener un solo color en todo el sitio web.

Para hacer su diseño más interesante (y profesional), usted necesita colores de acento para resaltar las partes dignas de atención de su sitio web como citas, botones o subtítulos.

La mezcla y el emparejamiento de colores realmente asusta a mucha gente porque no siempre es fácil o intuitivo decir qué colores se mezclan bien entre sí sin una buena comprensión de la teoría del color, y un montón de ensayo y error.

Pero, ¿quién tiene tiempo para obtener un doctorado en teoría del color? – Yo no.

Gracias a Dios que hay un atajo que todo el mundo puede usar! es una herramienta de combinación de colores que te puede ayudar a combinar colores como un profesional!

Cómo utilizar una herramienta de combinación de colores para ayudarle a seleccionar los colores de su acento

Una vez que tenga su color dominante, es realmente fácil encontrar los colores de su acento utilizando herramientas de combinación de colores como la herramienta Adobe Color CC.

Adobe Color CC parece complicado, pero en realidad es una herramienta bastante sencilla de usar.

Hemos creado un breve tutorial para mostrarle cómo utilizarlo para crear su combinación de colores a partir de una de dos formas:

#1 Usando su color dominante preseleccionado para construir su esquema de color

Paso 1: Primero – obtenga el código de color de su color dominante en ColorPicker.com. El código de color se encuentra directamente encima de la caja cuadrada de color.

Una vez que tenga el código de color de ColorPicker.com, introdúzcalo en la casilla «HEX» de la herramienta Adobe Color CC Tool y asegúrese de introducirlo en la casilla HEX de la columna central.

Una vez hecho esto, la herramienta Adobe Color CC Tool mostrará su color, junto con algunos otros colores complementarios.

Paso 2: En el lado izquierdo de la herramienta Adobe Color CC Tool, verá las siguientes reglas de color:

• Análogo
• Monocromático
• Tríada
• Complementario
• Compuesto
• Tonos

Haga clic en las Reglas de Color para ver las diferentes combinaciones de colores y escoja la que más le guste. Todos los colores presentados funcionarán bien entre sí.

Paso 3: Ajuste su esquema de color arrastrando en cualquiera de los selectores de color.

Es importante que nunca mueva el selector de color del medio con una flecha pequeña para mantener constante el color dominante.
Paso 4: Copie los códigos de combinación de colores en la parte inferior de la herramienta.

Estos códigos de color hexadecimal son los códigos de color que puede utilizar para su sitio web – todos ellos funcionarán bien con su color dominante.

Los creadores de sitios web como WordPress, Wix, Squarespace, Weebly, etc, le dan la opción de insertar códigos de color HEX para darle estilo a ciertas partes del sitio web.

Usa una foto para crear tu combinación de colores

Si no tienes ninguna idea sobre el color que deseas, puedes crear tu esquema de color basado en una foto de tu elección.

Muchas veces, es más fácil encontrar una combinación de colores que te gusta en línea e imitarla.

Adobe Color CC le permite cargar cualquier imagen y generará automáticamente la combinación de colores basada en los colores de esa imagen.

Paso 1: Sube tu foto
: Elija entre 5 colores diferentes en el lado izquierdo de la herramienta:

• Colorido
• Brillante
• Silenciado
• Profundo
• Oscuro

Haga clic en los diferentes estados de ánimo de color y vea qué combinación de colores prefiere.
: Ajuste su esquema de color moviendo el selector de color alrededor de la foto.
: Copie los códigos de su esquema de colores en la parte inferior de la herramienta, que son los códigos de color para el color que puede utilizar para su diseño web en general.

Haga clic en el icono de la rueda de color para ver los códigos de color de su combinación de colores.

Los creadores de sitios web como WordPress, Wix, Squarespace, Weebly, etc, le dan la opción de insertar códigos de color HEX para darle estilo a ciertas partes del sitio web.

Cómo usar los colores de su acento en su sitio web

Ahora que tiene sus colores de acento complementarios, puede utilizarlos para resaltar la información secundaria en sus páginas web.

Estos son contenidos / ítems que no son los principales puntos focales de tu página, pero que aún así quieres que se destaquen.

Por ejemplo, pueden ser el subtítulo, botones secundarios, cuadros de información, color de fondo, etc.

Trate de limitar a sólo 1 o 2 colores de acento, ya que si hay demasiados colores de acento, crearán demasiados puntos focales que pueden confundir a sus visitantes.

#3 Elija el color de fondo de su sitio web

¿Has pintado alguna vez una casa?

Si lo ha hecho, entonces probablemente tendrá algo de experiencia en elegir un color de pared – y sabrá que elegir el color de pared adecuado puede ser un reto.

Usted quiere que el color de la pared haga que la habitación se sienta cómoda.

El color debe ser lo suficientemente relajante como para que pueda pasar horas en la habitación sin que el color lo abrume.

Al mismo tiempo, no quieres que el color sea tan aburrido que la habitación se sienta completamente estéril.

Elegir un color de fondo es realmente muy parecido a elegir un color de pintura de pared!

Usted quiere que los visitantes de su sitio web se sientan cómodos navegando por su sitio web.

No querrás molestar a tus visitantes o hacer que sea un reto absorber tu contenido usando colores de fondo demasiado vivos o brillantes.

Al mismo tiempo, usted no quiere que su sitio web sea tan blasé que los ojos de su público sólo se esfumen sobre cualquier cosa importante que usted quiera decir.

¿Cómo elegir el color de fondo adecuado?

Si tuvieras que elegir los colores de la pared para una tienda de moda y una casa de verano, ¿elegirías los mismos colores para ellos?

Probablemente no porque cada espacio sirve para un propósito diferente, así que el color que usted elija debe ser diferente.

Por ejemplo, en una tienda de ropa al por menor, es posible que desee usar colores llamativos para atraer a los compradores a los estantes de ropa.

Usted quiere que el color de la pared contraste con los estantes de la mercancía para que los compradores puedan saber instantáneamente dónde buscar cuando entren a la tienda.

En contraste, usted probablemente querrá sentirse más relajado en una casa de vacaciones en una casa de campo. Usted desea que el color de su pared y la decoración tengan un efecto relajante y relajante. Usted quiere que todo se mezcle para que pueda enfocarse en la impresionante vista del paisaje desde la ventana de gran tamaño.

De una manera muy similar, el color de fondo de su sitio web depende de en qué quiere que se centren sus visitantes.

En pocas palabras, el color que elija como color de fondo depende completamente del propósito de su sitio web.

Tipo #1 – Sitios web con información intensiva de contenido y sitios web de comercio electrónico

¿Ha notado alguna vez que la mayoría de los sitios web de información o de comercio electrónico suelen utilizar un color de fondo blanco o neutro?

Esto se debe a que el propósito de este tipo de sitios web es promover ideas o productos.

La atención se centra en el contenido o los productos, más que en el diseño de la página web, y el color de fondo es sólo un telón de fondo para que el contenido sea más visible y legible.

La mejor combinación de colores para usar en sitios web de comercio electrónico y de información intensiva es un fondo blanco o claro, con colores de acento y dominante en negrita. Los colores de acento y dominante en negrita le dan personalidad y puntos focales al sitio web, mientras que el color de fondo plano mantiene a sus visitantes enfocados en su contenido o productos.

Tipo #2 – Sitios Web Corporativos / de Negocios

Los sitios web corporativos/de negocios suelen tener dos propósitos: promocionar la marca o sus servicios.

Dependiendo del propósito en el que su sitio web quiere enfocarse, su color de fondo será diferente.

Promoción de una marca

Cuando usted quiere construir una identidad de marca fuerte, debe usar varios tonos de su color dominante o de marca como su color de fondo.

Esto se debe a que el color está estrechamente ligado al reconocimiento de la marca (recuerde nuestro ejemplo de Coca Cola arriba?) Cuando usted utiliza una variación de su color dominante/marca como fondo, usted está reforzando su marca y la hace más memorable para su audiencia.

Si usted tiene un color de marca muy atrevido, usarlo como color de fondo puede ser demasiado abrumador. Si ese fuera el caso, considere elegir un tono menos intenso del color de su marca.

Utilice la herramienta Adobe Color CC para generar diferentes tonos y brillos de su color dominante.

Promoción de un servicio

Si desea que el valor de su servicio o su cartera de proyectos anteriores sea el punto central, utilice un color de fondo blanco o neutro.

Al igual que los sitios web de comercio electrónico y de contenido intensivo, usted no quiere que su color de fondo le quite el foco a su contenido o al mensaje que desea comunicar.

Al elegir un fondo neutro o blanco, su contenido se volverá naturalmente más llamativo.

Tipo #3 – Sitios web con estilo y creativos que son intensivos en gráficos

Para los sitios web utilizados en la moda, el diseño, el restaurante, la belleza y las industrias creativas, el mundo es su ostra.

Puede utilizar una barra de menú negra para crear más dramatismo; o puede utilizar todos los colores del arco iris para crear una imagen de fondo inspiradora.

Honestamente, aquí puedes romper todas las reglas y usar cualquier color que quieras, siempre y cuando tengas en mente esta regla: «Nunca elijas un fondo que dificulte la lectura de tu texto o contenido. “

Su color de fondo perfecto es uno que permite que su contenido sea el punto focal mientras trabaja armoniosamente con sus colores dominantes y acentuados, y hace que su audiencia se sienta bien mientras navega por su sitio web.

En caso de duda, use blanco o gris muy claro como color de fondo.

Aunque puede que no sea el color más inspirador, usted sabe que su contenido siempre brillará.

20 Mejores Colores para los sitios web de [año]

Una correcta combinación de colores puede hacer que el sitio web sea más memorable y también provoca una estimulación emocional.

Cuando un sitio web es colorido, hace que la experiencia sea agradable y placentera para el visitante.

Las combinaciones de colores incorrectas pueden hacer que el UX sea irritante.

Una experiencia agradable, a su vez, conduce a mayores tasas de conversión.

Además de una interfaz de usuario bien diseñada, el correcto esquema de colores contrastados ayudará a un visitante a navegar a través del contenido del sitio de forma rápida y sencilla.

Tonos suaves #1

Los tonos suaves están de moda y, como su nombre indica, los colores son elegantes y tranquilos.

Es la elección ideal si su marca pertenece a la industria de la moda o de la joyería.

Este simple tono es capaz de hacer maravillas.

Los tonos funcionan entre sí y hacen que el contenido de joyería o moda de la página destaque.

Sin embargo, el diseño es tan importante como la combinación de colores.

Por lo general, este tipo de sitios web tienen un texto mínimo.

En lugar de atiborrar varios productos en una sola página, el sitio adopta el enfoque de uno solo a la vez.

Un excelente ejemplo de este tipo de sitio web es Creations Namale.

Códigos de colores: #c5d5cb, #9fa8a3, #e3e0cf

#2 Equilibrado y colorido

Los tonos fríos y cálidos son una de las mejores combinaciones de colores.

La combinación tiene un efecto calmante en el visitante.

Desde una terracota terrosa hasta un verde azulado, esta combinación de colores es bastante atractiva.

Es adecuado para diseños modernos y juveniles.

Puede servir como una paleta de colores de sonido para los sitios web de salud.

Además, se recomienda un texto mínimo para estos sitios para evitar que se vea desordenado.

Active Theory es un sitio que ha hecho uso de tales tonos de color.

Códigos de color HEX: #E27D60, #85DCB, #E8A87C, #C38DE, # 41B3A3

#3 Gradiente de verdes y azules

Usando una escala de gradientes, tome los colores simples del color azul y luego mézclelo con varios tonos.

En caso de que su sitio web se vea anticuado y aburrido, puede intentar agregarle colores degradados.

Esto ofrecerá un aspecto moderno a su diseño.

El último sitio de Stripe está usando la paleta de colores.

Este es un software utilizado por los negocios de Internet para procesar el pago.

Para estar al día con las últimas tendencias, han introducido esta combinación de colores en su sitio web y le han dado un aspecto atractivo.

Códigos de color HEX: #7DF9FF, #0892D0, #23B2EE

#4 Combinación de colores de la red sutil y suculenta

Cuando se trata de diseñar un sitio web que se ve profesional y da un aspecto elegante y sutil al mismo tiempo, la combinación de colores sutil y suculenta es la que se debe buscar.

La mezcla de luz, y sin embargo de color elegante hace que este esquema de color sea ideal para mensajes profesionales y atractivos, especialmente para sitios web relacionados con el diseño de accesorios.

De hecho, un visitante tiende a comprobar estos esquemas de color desde la parte superior de la página web hasta la parte inferior.

Otra vez.

un excelente ejemplo de este tipo de sitio web es la refinada combinación de colores de Creationsnamale.

El diseño de la página web es muy atractivo debido a sus colores profundos, pero no demasiado vibrantes.

Códigos 7 />

Códigos de color HEX: #acb7ae, #acb7ae #acb7ae, #c2b490

#5 Elegante y Moderno Rosa y Negro

Si quieres crear un sitio web con un diseño moderno y elegante, puedes optar por el negro azabache y el brillante.

Le da al sitio web un aspecto moderno.

Utilice el tono suave del rosa como fondo para que el negro destaque.

También, agregue rosa brillante en algunos lugares sutiles.

Cowboy ha hecho un buen uso de esta paleta de colores.

La mayoría de la gente tiende a usar el color rosa para dirigirse a las clientas femeninas.

Sin embargo, si echa un vistazo a Cowboy, notará que no tiene nada de femenino.

Puede ser atractivo para ambos géneros.

Es el momento de deshacerse de los estereotipos y elegir esta combinación de colores para su sitio web de comercio electrónico.

Códigos de color HEX: #000000, #C39EA0, #FA255E, F8E5E5, #C39EA0

#6 Striking and Simple Electric Blue con Negro

Es un reto cambiar tu atención cuando te encuentras con un diseño minimalista como el de este sitio web llamado Bert.

Por lo general, este tipo de sitios tienen fondos ahumados y oscuros combinados con tonos de azul eléctrico.

Esto hace que el sitio web tenga un aspecto llamativo y, por lo tanto, es una combinación de colores ganadora para varias agencias de servicios, consultorías y proveedores de soluciones.

Códigos de color HEX: #0B0C10, #1F2833, #C5C6C7, #45A29E, #66FCF1

#7 Tonos de rojo y naranja

El 2019 ha visto un regreso de los colores retro.

Varias marcas están usando colores populares de los años 80 y 90 para su sitio web.

Sin embargo, han incorporado un giro moderno.

Echa un vistazo a la página de inicio de Spotify.

Notará que el tono rojo y el naranja tienen una vibración de retroceso.

Los colores cálidos que le dan a la gente la nostalgia de su adolescencia y su infancia.

El color de lunares de Spotify parece inspirado en los años 90.

Sin embargo, el diseño está de moda y utiliza una escala de gradiente que es muy moderna para mezclar los colores.

Tenga en cuenta que es necesario asegurarse de que tiene una idea justa de a quién se dirige usando estos colores.

Códigos de color HEX: #10EE67, #FECB00, #F5B842

#8 Contraste magnífico

A veces, un sitio web puede no parecer tan atractivo con las combinaciones de colores normales.

El negocio o tema que impulsa puede necesitar algo más nítido.

Aquí es donde el contraste de colores puede hacer que el sitio web sea exponencialmente atractivo.

La combinación de colores consiste en dos colores opuestos como el oscuro y el claro, dando la combinación perfecta de fondo oscuro con texto claro y vibrante o viceversa.

Esto hace que el texto y la página web se destaquen debido a los colores, lo que lo hace más notable.

Por ejemplo, ReputationSquad utiliza una sencilla paleta de colores y un esquema de diseño.

Códigos de color: #61892F, 86C232, 222629, 474B4F, 6B6E70

#9 Tonos de piel elegantes con colores elegantes

Esta es una mezcla única de color.

Los tonos de piel con colores elegantes como el rubí y el azul imperial oscuro son buenas combinaciones de colores para los sitios web que tienen un mensaje matizado para transmitir.

Es reservado pero accesible y sofisticado pero divertido.

Estos son los tipos de mensajes del área gris que se envían eficazmente con una combinación atractiva.

ChordSurfer ha hecho un buen uso de estos tonos de color.

Códigos de color HEX: #EFC7B7, #BAB2B5, #EEE2DC, #123C69, #AC3B61

#10 Gris y amarillo suave con un vibrante verde profundo

Echa un vistazo al sitio web del Grupo QED.

Ofrece servicios tanto a individuos como a empresas para mejorar los desarrollos organizacionales con la aplicación de la economía del comportamiento y la psicología.

Se puede decir que el modelo de negocio de QED es único.

En este sentido, han utilizado algunos de los modernos tonos de color del sitio web.

Si echa un vistazo a la página de inicio, notará que la combinación de colores está un poco más ocupada que las que se han mencionado anteriormente.

Sin embargo, han soportado bastante bien este diseño.

Generalmente, la gente siente que los tonos verdes, amarillos y púrpuras pueden ser difíciles para sus ojos.

Sin embargo, al usar tonos grises y más claros en el fondo, pueden añadir colores brillantes y contrastantes.

Códigos de color HEX: #dddfd4, #fae596, #3fb0ac, #173e43

#11 Dark Horse

Una combinación de tonos oscuros y terrosos como el gris, la pizarra y el plateado, que se combinan con tonos amarillos más brillantes, da un gran atractivo visual al sitio web.

Cada texto se ve claro con fuentes simples sobre fondos oscuros.

Hace que el diseño web parezca elegante y moderno.

Echa un vistazo a la página web de IndianScouts.

Usted notará una combinación oscura, cálida y hermosa de aspecto brillante y oscuro.

El color es excelente para el sitio web de automóviles y mecánica.

Códigos de color HEX: #feda6a, #feda6a, #feda6a, #feda6a

#12 Metales preciosos

El uso de tonos metálicos sobre fondo blanco no sólo luce elegante y nítido, sino que también aporta un aspecto real y premium a la página web.

Esto es algo que ha sido puesto en uso por KAE.

La empresa no sólo ha utilizado la brillante combinación de colores en el sitio web, sino también en su papelería y otros productos.

Si quiere darle un aspecto caro y de élite al sitio web, esta combinación de colores puede hacerlo fácilmente.

Esta combinación de colores se basa principalmente en un fondo blanco con el uso de tonos de colores metálicos para el texto.

Códigos de color HEX: #bd8c7d, #bd8c7d, #8e8e90, #49494b

#13 Amarillo Audaz contra Gris Oscuro

El amarillo vivo y el naranja de Portland contra el gris oscuro grita para llamar la atención.

Su audiencia notará inmediatamente lo que usted tiene que decir en el sitio web.

Esta combinación de colores está llena de energía.

Por lo tanto, es perfecto si quieres conseguir un look atrevido y contemporáneo.

ASSIKO es un sitio web dedicado a los festivales y fiestas.

La combinación de colores encaja perfectamente con el diseño.

Códigos de color HEX: #FF652F, #272727, #747474, #FFE400, #14A76C

#14 Cargas de rojo con tonos apagados

Cuando vea las combinaciones de colores que hemos discutido hasta ahora, notará que el color más popular es el rojo.

Esto se debe a que el rojo es el color más potente pero desafiante para usar cuando se trata de un sitio web.

Psicológicamente, es el color más atractivo.

Por eso siempre lo verá asociado a marcas de gran consumo como KFC o McDonald’s.

Una de las aplicaciones más útiles de este color es usarlo contra un pop de colores.

Otra buena manera es emparejarlo con algunos colores apagados como el gris y el marrón arena.

Cinco/Cuatro ha hecho uso de estos tonos.

De hecho, una porción significativa del sitio web utiliza el rojo, y es exitoso porque han utilizado tonos apagados para las partes restantes del sitio web.

Por si acaso, habrían emparejado el rojo con el azul claro, naranja brillante.

Puede que haya sido demasiado para los visitantes.

Los colores más suaves van perfectamente con el rojo.

Sin embargo, si está usando estos tonos, debe evitar excederse con el color.

Úsalo sabiamente.

Códigos de color HEX: #5A7670, #B89F5D, #FA292A

#15 Primarias Futuristas y Pasteles

Cuando se trata de seleccionar una combinación de colores para los sitios web, es mejor seguir los pasos de aquellos que tienen suficiente experiencia.

No hay necesidad de reinventar la rueda.

Un ejemplo de ello es Anton e Irene.

Esta es una empresa de diseño profesional con sede en Nueva York.

Se especializan en productos digitales y diseño.

El sitio web tiene una paleta de colores muy moderna y de moda.

Una cosa buena de esto es la sensación de futurismo que sale a la luz.

Notará que el sitio utiliza más colores que los sitios web que se han discutido anteriormente.

En caso de que quieras un toque artístico para tu sitio web, necesitas usar diferentes combinaciones de azul claro, púrpura, gris, naranja y amarillo.

Código de colores: #bccbde, #c2dde6, #431c5d, #e6e9f0, #cdd422

#16 Tonos oscuros dinámicos y texturizados

Carbón vegetal, siena oscuro y una explosión de rojo pálido le darán a su sitio web una combinación de colores que es muy importante para los sitios web de diseño futurista y elegante.

La combinación de colores es bastante versátil y puede ser utilizada para varios proyectos con rangos que van desde el contenido editorial hasta informes corporativos de aspecto moderno.

Un buen ejemplo del uso de esta paleta de colores es HAUS.

Códigos de color HEX: #2F4454, #DA7B93, #2E151B, #376E6F, 1C3334

#17 Negro sobre Negro

Notará que el negro es un color estándar en muchos sitios web.

Sin embargo, se usa con moderación.

Se utiliza generalmente para el texto y los números como el fondo o el color primario.

Sin embargo, esto no significa que no pueda utilizar el negro en mayor medida para la combinación de colores de su sitio web, especialmente cuando utilice diferentes tonos de negro.

Si quieres comprobar cómo se ve, la página web de JY BH puede ser un buen ejemplo.

Cuando usted combina varios tonos de negro, tendrá un efecto de gradiente, que también notará en algunos de los primeros ejemplos de nuestra lista.

La paleta de color negro degradado ofrece al sitio un aspecto misterioso.

JY BH vende accesorios y prendas de lujo tanto para mujeres como para hombres.

Esta combinación de colores ha sido popular durante varios años y sigue siendo una elección común.

Códigos de color HEX: #151516, #090A0A, #151617

#18 Tonos azules energéticos y limpios

Si visita el sitio web de Avoconseil, notará que los tonos de violeta y azul son particularmente agradables a la vista.

Puede evocar paz y energía al mismo tiempo.

El azul celeste y el arándano se han combinado con la amatista.

Provocan una atracción psicológica y disminuyen la tasa de rebote instantáneamente.

Esto le da al sitio un aspecto refrescante y atractivo.

Es adecuado para todos los diseños que tienen como objetivo crear emociones positivas.

Códigos de color: 56809, #84CEEB, #8860Do, #C1C8E4, #5AB9EA

#19 Diversión y tonos juveniles de amarillo y malva

El colorido y el esquema juguetón del amarillo, malva y azul pueden dar un aspecto vibrante y juvenil a un sitio web.

Puede ser una excelente opción para sitios web de compras que buscan estar a la moda y atraer a un público más joven.

Un buen ejemplo es el sitio web del famoso músico Pharrell Williams.

Notará que tiene un fondo blanco, lo que hace que sobresalgan los tonos vibrantes como la mandarina, el turquesa brillante, la orquídea oscura y el amarillo.

Proyecta una emoción feliz y llena de juventud, llena de historias y experiencias.

Códigos de color HEX: #A64AC9, #FFB48F, #FCCD04, #17E9E0, F5E6CC

#20 Color de diseño plano

En caso de que no conozca la frase «diseño plano».

Es posible que haya visto antes este tipo de sitios web sin gradientes, caídas o pendientes.

Este tipo de sitios no tienen un elemento tridimensional.

Echa un vistazo a la página web de diseño plano de Render.

Los colores de diseño plano son generalmente muy super saturados y brillantes o super oscuros.

Render ofrece servicios de producción y edición de video, y su sitio web proporciona una sensación directa y aguda de profesionalismo.

Proporcionan una seriedad inmediata a su persona de negocios.

El usuario percibe una sensación de diligencia cuando su sitio web muestra un tono industrial estándar.

Códigos de color HEX: #00887A, #FFFFF, #D3E3FC, #FFCCBC, #777A6F7

La psicología detrás del color

¿El cielo azul te hace sentir relajado y tranquilo?

¿El amarillo brillante hace que su corazón se acelere un poco?

Si alguna vez has experimentado alguno de estos sentimientos, no estás solo.

El color es una herramienta para la comunicación, y se ha utilizado desde los albores de la civilización para expresar la influencia, la acción y el estado de ánimo.

Fue en 1666 cuando el científico inglés Sir Isaac Newton descubrió por primera vez que cuando la luz blanca pasa a través de un prisma, se separa en todos los colores visibles. Estos colores visibles no comunican las mismas cosas a todos.

La manera en que te sientes acerca de ciertos colores es algo profundamente personal que se deriva de tu propia experiencia o cultura.

Sin embargo, hay algunas «reglas» generales del color que podemos tomar de nuestra propia historia occidental.

Aquí están algunas de las asociaciones más conocidas con el color con las que probablemente esté familiarizado:

• Negro: Malvado
• Blanco: Pureza
• Rojo: Amor
• Azul: Calma
• Verde: Envidia
• Púrpura: Riqueza

Estos pueden parecer un nivel muy básico de comprensión del color, y eso es porque lo son.

El simbolismo más profundo detrás de estos colores se arraiga a lo largo de nuestra historia y cultura, y no están estancados.

Los colores pueden cambiar de significado en diferentes situaciones y a lo largo del tiempo.

Por ejemplo, ¿conoce la historia de por qué el púrpura simboliza la riqueza?

De hecho, la Reina Isabel I prohibió a nadie, excepto a la familia real, vestir de púrpura, ya que tenía un estatus de élite.

Hace cientos de años, el tinte púrpura era inicialmente increíblemente caro.

En la época de los fenicios, el tinte sólo podía encontrarse en un pequeño molusco en el mar Mediterráneo.

Como era tan costoso de recolectar, sólo era usado por la élite adinerada.

Hay una historia como esta detrás de casi todos tus colores favoritos.

Cuanto más entienda la historia de los colores, mejor equipado estará para usar estos colores a su favor.

¿Cómo utilizan las empresas el color hoy en día?

Como probablemente te habrás dado cuenta, hemos recorrido un largo camino desde el púrpura que simboliza la riqueza.

Los colores se han convertido en entidades complejas, y ahora son una herramienta utilizada por los profesionales del marketing y los diseñadores para crear una marca que resuene en el público.

Para entender cómo las empresas utilizan el color hoy en día, veamos algunas de las marcas más conocidas y los colores detrás de sus logotipos y diseños.

Rojo

Cuando se trata de marketing, se dice que el rojo desencadena la estimulación y el apetito.

También se utiliza comúnmente en las ventas de liquidación, ya que se sabe que llama su atención.

El rojo incluso ha demostrado que eleva la frecuencia cardíaca humana de manera mensurable cuando lo ven.

Marcas rojas: Frito Lay, Nintendo, Netflix, ESPN, Coca-Cola y Lego.

Azul

El azul en el marketing se utiliza para simbolizar la profesionalidad y la fuerza.

Es el color favorito de mucha gente, por lo que a menudo se utiliza para demostrar confianza. Marcas azules: Facebook, Visa, Samsung, AT&T

Amarillo

El amarillo es sinónimo de optimismo y felicidad. Es excelente para captar la atención de los usuarios, por lo que se utiliza habitualmente para las marcas de comida rápida: McDonald‘s, Snapchat, Subway, IKEA.

Verde

El verde se ha utilizado recientemente para mostrar marcas ecológicas, pero también se utiliza para transmitir crecimiento con bienestar financiero.

El verde está relacionado con la salud, la relajación y la productividad.

Marcas verdes: Starbucks, Excel, Holiday Inn, Heineken y Land Rover.

Púrpura

El púrpura ha recorrido un largo camino, pero aún simboliza la realeza, así como la sabiduría y el éxito.

Esta es la razón por la que se utiliza normalmente para las marcas de lujo.

Marcas moradas: Crown Royal, Qatar Airways, Hallmark y Cadbury.

Negro

El negro como color también se ha desarrollado a partir de su simbolismo «maligno» original.

Hoy en día, transmite profesionalismo y se relaciona con la inteligencia y la autoridad.

Las marcas utilizan el negro para mantener la simplicidad o para mostrar una calidad de lujo. Marcas negras: Amazon, Disney, Chanel, Nestlé, Gucci, Hermes.

Multi-Color

Por último, a veces las marcas utilizan unos pocos colores para mostrar su diversidad y para diferenciarse de otras marcas.

Éstos son usados a menudo por compañías basadas en Internet o marcas globales que quieren mostrar conectividad.

Marcas multicolores: Windows, Google, NBC, eBay, las Olimpiadas.

¿Cómo te sentiste leyendo estas listas de marcas?

Si usted es como la mayoría de la gente, probablemente entendió la conexión sólo por sus sentimientos actuales acerca de estas marcas.

Estas marcas han sido creadas por expertos en marketing que utilizan colores para contar su historia.

Otras reglas y consejos para elegir la combinación de colores del diseño de tu página web

Entre los procesos que requieren una estrategia real está la elección del color. Contra todo pronóstico, es uno de los pasos del diseño web que requiere más tiempo y energía.

El diseño de la experiencia de usuario en su sitio web implica muchos procesos reflexivos.

Entre los procesos que requieren una estrategia real está la elección del color. Contra todo pronóstico, es uno de los pasos del diseño web que requiere más tiempo y energía. Los diseñadores a veces pueden pasar horas eligiendo la paleta de colores adecuada… Especialmente porque tienen un gran impacto en la experiencia de los usuarios de Internet.

En este artículo, descubra cómo elegir los colores de su interfaz para un diseño web profesional que sea coherente con su marca!

Aprenda la regla 60-30-10

Esta regla, o técnica, proviene del campo del diseño de interiores, por lo que a menudo se aplica a la decoración de una casa.

La idea es simple: para equilibrar la composición, los colores deben combinarse en una proporción de 60% – 30% – 10%. La mayor parte va a la sombra dominante, un tercio toma el color secundario y el 10% restante es útil para un color de acento. Este último a menudo viste su llamada a la acción o enlaces importantes.

Esta proporción se considera agradable al ojo humano, ya que permite que todos los elementos visuales se perciban gradualmente. Conocer las proporciones adecuadas permite a los diseñadores combinar con éxito los colores sin arriesgarse a convertir la interfaz de usuario en un desastre multicolor.

Contrast es tu amigo

El contraste de color es un elemento clave de cualquier composición visual. Subraya la individualidad de cada elemento del diseño web y lo hace más perceptible. Las interfaces de usuario que contienen sólo tonos de la misma familia de colores tienen menos probabilidades de atraer la atención de los usuarios de Internet.

Los diseñadores controlan el nivel de contraste de acuerdo con los objetivos que se supone que deben alcanzar.

Por ejemplo, si desea que los visitantes presten especial atención a un elemento específico del sitio, es aconsejable aplicar dos colores de alto contraste, como el azul y el rojo. El alto contraste se utiliza a menudo en el diseño de la llamada a la acción.

Sin embargo, si los colores de fondo son demasiado contrastantes, será difícil leer o escanear el texto. Es por eso que se recomienda que los diseñadores creen un ligero nivel de contraste y apliquen tonos realmente diferentes sólo para resaltar los elementos clave, de tamaño pequeño o mediano.

Tener en cuenta la psicología de los colores

Existe una rama de la psicología que muestra la influencia de los colores en el estado de ánimo y el comportamiento humano. Esta ciencia afirma que nuestra mente reacciona a los colores, aunque conscientemente no lo notemos.

Cuando los ojos humanos perciben un color, nuestro cerebro envía señales al sistema endocrino liberando hormonas responsables del estado de ánimo y las emociones.

Cada color tiene su propia influencia en nuestras mentes y el conocimiento de las posibles reacciones puede ayudar a los diseñadores a transmitir el mensaje correcto y a llamar a los usuarios para que tomen la acción esperada.

Lo que nos lleva al siguiente punto….

Elija el color adecuado

Para el público adecuado

Las mujeres se sienten atraídas por el azul claro, el azul real y el verde. Los hombres son más receptivos al azul claro, verde y negro.

Los colores brillantes como el rojo, el verde y el amarillo son muy útiles para captar la atención de los niños.

Para el tipo de producto adecuado

En el mundo de la restauración, el marrón es el color predominante para evocar el gusto y la degustación. El verde es el color de lo orgánico, lo natural.

En el sector de la seguridad, el azul es el color predominante, ya que tranquiliza e inspira confianza.

Para el mensaje correcto

El negro es el color del lujo, utilizado para promocionar artículos de marca.

Para la llamada a la acción, se requieren colores brillantes: amarillo, rojo, verde.

Para crear un clima de confianza y bienestar, utilice el color azul.

¿Quieres transmitir un mensaje de rendimiento, de dinamismo? Elija rojo o naranja.

El éxito de su sitio web depende en gran medida de los colores elegidos para su interfaz de usuario. Los colores adecuados ayudan a los usuarios a sentirse cómodos con un producto.

Haga sus elecciones sabiamente de acuerdo con su objetivo, su actividad y los valores que desea transmitir!

Conclusión

La elección de la combinación de colores correcta para su sitio web nunca debe basarse en su color favorito, o en una sensación de tripa.

Un buen diseño web es aquel que siempre pone a su público en primer lugar.

Elija un color y un diseño que atraiga a su público objetivo, para que pueda hacer una conexión memorable (subconscientemente) y diferenciarse de su competencia.

La selección de esquemas de color no debe ser aleatoria en absoluto.

En su lugar, debería ser una serie de ejercicios organizados, objetivos y de emparejamiento: (1) Emparejar su marca con el color dominante correcto; (2) emparejar el color dominante con colores de acento utilizando la herramienta de Adobe; y finalmente (3) emparejar el color de fondo con sus colores dominantes y de acento.

Siguiendo los 3 pasos anteriores, usted puede crear una buena combinación de colores para su sitio web – incluso si usted no tiene un buen sentido del diseño y la coordinación de colores!

No tenga miedo de inyectar un poco de color en su sitio web y diviértase con el proceso, sólo recuerde que no debe dejar que su color domine su contenido.