¿Profesional de WordPress?  Suscríbete aquí

Calcula en 4 pasos el presupuesto que necesitas para tu proyecto

Sin registro de cuenta

Publica tu proyecto y compara presupuestos de profesionales sin compromiso

Contacta hoy mismo con profesionales y especialistas en WordPress de tu zona listos para trabajar en tu proyecto.

  • + Totalmente gratis
  • + Sin comisiones ni recargos
  • + Sin necesidad de registrarte
  • + Sólo profesionales destacados
  • + Ahorra tiempo buscando
  • + Publicación en sólo 4 pasos

¿Profesional de WordPress? Suscríbete y gana dinero todos los días creando desde pequeños encargos a grandes proyectos.


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

Última actualziación en diciembre 2019
  • 100% Gratis

    No cobramos ningún tipo de comisión por proyecto. Contrata sólo si quieres.
  • Ahorra tiempo

    No pierdas tiempo buscando en Google. Los profesionales te encontrarán a ti.
  • Ahorra dinero

    Compara varios presupuestos para la mejor relación calidad / precio.
  • Profesionales destacados

    Escoge entre decenas de profesionales el que mejor se adapte a tus necesidades.

  • Publicar proyecto
    (GRATIS)

    Sin compromiso de contratación ni recargos de ningún tipo

Elegir una buena combinación de colores para su sitio web puede ser algo que asusta, especialmente si no está seguro de su capacidad de coordinación del color, o si siente que no es un diseñador experto.

Mi esposo es un poco daltónico, lo que lo pone muy nervioso cuando trata de escoger un color para cualquier cosa

¿Qué hay de ti?

  1. ¿Qué color debe usar para su logo o titular?
  2. ¿Sabes cómo elegir colores complementarios que combinan bien?
  3. ¿Qué parte de su sitio web debe utilizar el color?

Escoger y mezclar colores puede ser un juego complicado.

El resultado puede parecer armonioso, o como una escena directamente de una película de terror!

Si usted evita cualquier color, su sitio web puede parecer poco inspirador y olvidable. Si usas demasiado color en tu sitio web, te arriesgas a que parezca de mal gusto.

Mejores colores para páginas web profesionales



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:

  1. 12 Mejores herramientas para combinar paletas de colores
  2. Elija el color dominante adecuado para su sitio web y su marca.
  3. Combine colores complementarios para crear su combinación perfecta de colores.
  4. Elija un color de fondo que funcione para usted.
  5. Utilice el color en los lugares correctos de su sitio web, como un profesional.

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

colorhexa webapp

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

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 cuentagotas ColorPick

colorpick chrome addon

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

coolors webapp

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. Aplicación Palettte

color palettte 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. Colores UI del material

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. Suministro de color

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. Seguro para el color

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. Caza de colores

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

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. Códigos de color HTML

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

adobe color cc webapp

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.

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.
how to pick website color - cokeFuente:
www.coca-colacompany.comIt 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.

website color picking - coca colaFuente: us.coca-cola.comCuando
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.

El 85% de los compradores consideran que el color es la razón principal por la que compran un producto en particular.
80% de aumento en el reconocimiento de la marca cuando se utiliza el color. El reconocimiento de la marca está directamente relacionado con la confianza del consumidor.

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.

psychology of color for websites

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!

personality of color for websites

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?

color influence on gender

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.

color-of-brand-attract-different-customerMuchas veces, la gente compra productos o servicios específicos ya que subconscientemente 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.

where to use dominant color on website

#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:
how to choose color for websites
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

how to choose color for websites
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.
how to choose color
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.
how to choose colorFuente: color.adobe.com

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
adobe color cc 5Fuente: color.adobe.comStep2
: 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.
adobe color cc 6Fuente: color.adobe.comPaso 3
: Ajuste su esquema de color moviendo el selector de color alrededor de la foto.
how to use adobe color cc Fuente: color.adobe.comStep4
: 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.
adobe color cc 8Fuente: color.adobe.com
adobe color cc 4Fuente: color.adobe.com

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.

where to use accent color on your websiteFuente: Wix.com

#3 Elija el color de fondo de su sitio web

How to choose website background color¿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?
eCommerce Website

sitio web de comercio electrónico (drinksoma.com)

eCommerce Websitesitio web de comercio electrónico (stikwood.com)
Food BlogBlog de comida (pinchofyum.com)
Film Production CompanyCompañía de Producción Cinematográfica (dingobill.com)

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.

how to choose website background color corporate website branding
justactions.org
how to choose website background color business website brandingsbjdanebury.com

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.

how to choose website background color business service
zengenti.com
how to choose website background color business servicecharddevelopment.com

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.

how to choose website background color restuarant
theeddynyc.com
how to choose website background color creativecafefrida.castudiolovelock
how to choose website background color design.com gillemore
.
how to choose website background color luxury

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

Conclusión y principales conclusiones

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.

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.

Web design couleur 60-30-10

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!

2PGMekn / 2RwQCV8 / 2FlsmA7

Tienes un proyecto y ...

¿Buscas profesionales?


Publicar proyecto
(GRATIS)


Sin compromiso ni registros • Profesionales destacados
Eres un profesional y ...

¿Buscas clientes?


Suscribirse
(10€ / MES)



Cuota fija al mes • Sin permanencia ni comisiones

¡Ayúdanos a mejorar!

Si tienes cualquier duda, propuesta, sugerencia o
simplemente quieres saludar, nos encantará leerte en:

hola@presupuestowp.com

presupuesto wordpress