Psicología del color: Qué es y cómo usar la teoría del color en marketing y

diseño
Bego Romero | 11 septiembre, 2018
¿Has oído hablar de que los colores
transmiten emociones y hablan por sí
mismos?
En nuestro día a día no tenemos en
cuenta cómo el color afecta a nuestra
vida cotidiana, y para nosotros es algo
secundario a la hora de comprar. Pero, ¿y
si te digo que esto no es así?
La teoría del color está presente en el
marketing, la publicidad y el diseño,
transmitiendo a la persona que lo vea
unas sensaciones u otras, de ahí a que la
psicología del color tenga que tenerse siempre en cuenta si queremos llegar al éxito con nuestra marca.
Hemos oído hablar de colores cálidos, que transmiten cercanía, ternura, positividad, alegría, etc. y de colores
fríos, que aportan tranquilidad, seriedad, frescura, etc., pero hoy vamos a ver cuál es el significado de los
colores uno por uno.

Cuál es el significado de cada uno de los colores + Datos curiosos sobre la psicología del color
Es muy importante que aprendas qué significa cada color, puesto que la simbología del color
será esencial para que nuestro público objetivo capte bien lo que queremos transmitir y comunicar.

Voy a empezar por qué es la psicología del color y luego veremos los significados y simbologías de
los colores uno por uno.

Í N D I CE D E L A R T ÍC U LO
 Qué es la psicología del color y para qué sirve
 Cuál es el significado de los colores en la psicología y marketing
 Datos curiosos sobre la psicología del color
 Consejos para utilizar la psicología del color en publicidad y diseño
 ¿Debo tener en cuenta el color para mi diseño?
Qué es la psicología del color y para qué sirve
La psicología del color es un campo que estudia lo que producen los colores en las emociones y
conductas de las personas.

Cada color tiene un significado, y por ello debemos saber qué es la teoría o psicología del color, para
descifrar qué puede llegar a sentir nuestro público con la imagen visual de nuestro proyecto.

El mismo color también puede tener diferentes significados que dependerán de factores como
nuestra educación, valores, sexo, cultura, etc.

Te voy a poner un ejemplo.

Si yo me dirijo a un público objetivo de chicas jóvenes españolas, de unos 25 años, en función de lo
que queramos hacerles sentir deberemos escoger un color u otro.

Si yo quiero que estas chicas me perciban como una marca seria, que les va a proporcionar madurez y
elegancia, quizás el negro sea una muy buena opción. Pero si yo quiero que sientan con mi marca cierta
vitalidad, fuerza, alegría, quizás un tono rosado sea la mejor opción.

Debemos de tratar que nuestro público sienta algo con nuestra imagen, y la vista es un factor
fundamental para ello. La percepción que tengamos sobre ese color determinará gran parte de la
confianza que sientan con nosotros y la compra, y esto, es un proceso del subconsciente que quizás no
tengas en cuenta.

Por ello, en el proceso de compra de un producto, el color es un factor que debemos tener muy en
cuenta, ya que guiará al usuario a la compra o quizás al abandono.

Y si no crees esto, ¿por qué no probar?

Te reto a que hagas un Test A/B de dos colores y veas cuál es el que más te convierte (y ya de paso,
compartirlo con nosotros en los comentarios).
También puede interesarte:
Paletas de colores
Qué es y cómo hacer una infografía
Cuál es el significado de los colores en la psicología y marketing
Vamos a ver qué significa cada uno de los colores más importante que encontramos en la rueda cromática, su
simbología y ejemplos de marcas que los utilizan para que puedas guiarte y tener clara tu decisión si
estás buscando un color.
Quizás pueda interesarte: Cómo elegir tu paleta de colores

Conforme la sociedad va evolucionando, la simbología y la comprensión del color es distinta, cobrando mayor
relevancia o menor. Pero esto también va con la evolución personal, ya que no percibimos de la misma forma
los colores cuando tenemos 20 años a cuando hemos cumplido los 40.
Por ello, la percepción del color evoluciona con nosotros, está presente en nuestro subconsciente y
nos guía en nuestras decisiones de compra.
Significado del color azul

El color azul se asocia al mar y el cielo. Es un color relajante que transmite estabilidad,
calma, armonía, confianza y seguridad.
Este es el color favorito de la gran mayoría, de ahí a que las marcas lo utilicen tanto.
Por otro lado, tiene significados también negativos, ya que es un color frío que se asocia
a la lejanía y frialdad.

Significado del color rojo

El rojo es el color del fuego, de la llama, de la fuerza. Es un color poderoso y muy visual,
que representa el amor y el odio al mismo tiempo.
Un color que llama a la acción a primera vista (por encima de otros), y que se asocia
a la energía, estimulación, valor, etc. Pero a la vez, tiene asociaciones negativas como:
peligro, tensión y sangre.
Es una opción muy buena para las llamadas a la acción o CTAs en marketing, ya que lo
veremos por encima del resto de colores.
Pero ojo, es un color que hay que utilizar con moderación y en su justa medida, ya que es demasiado
impactante y puede llegar a saturar.

Significado del color verde

El verde está relacionado lo ecológico, ya que se asocia el verde para simbolizar la naturaleza. Pero, por otro
lado, también significa dinero, esperanza, armonía, paz…
Suele utilizarse en marcas muy vinculadas al medio ambiente o relacionadas con
productos destinados a la naturaleza como es la jardinería.
Es un color perfecto para utilizar en este tipo de marcas, ya que, además, es un color
muy relajante y que nos tranquiliza.

Significado del color amarillo

El color amarillo se usa para simbolizar la felicidad, la juventud y el optimismo.

Pero no siempre este color tiene connotaciones positivas, ya que se puede percibir como
el engaño y advertencia, además de que muchos supersticiosos lo ven como un símbolo
de mala suerte.
Es un color que llama la atención y que se puede utilizar en determinados puntos de tu
diseño para ayudar a los ojos de tus usuarios a que vean lo que quieres señalar y a asociar
tus productos a algo positivo.
No hay que abusar de él, puesto que causa un efecto de fatiga visual, por lo que utilizarlo en su justa medida
es la mejor opción.

Significado del color naranja

El naranja es una combinación del rojo y el amarillo que representa la creatividad, calidad
y calor; y como variante de los anteriores colores, es muy estimulante.
Se utiliza mucho para sustituir al rojo en las llamadas a la acción, ya que no satura tanto
y captura nuestra vista desde el primer instante.
Por ello, es uno de los colores más utilizados en la publicidad, que ayuda a estimular las
compras.
Significado del color negro

El color negro significa elegancia, poder, glamour y sofisticación.

Sin embargo, también tiene asociaciones negativas como tristeza, soledad, frialdad, etc.
Es un color muy utilizado en las marcas de alto prestigio dirigidas a un público de clase
alta, ya que es un color muy autoritario, que estiliza y con el que se pueden crear efectos
muy minimalistas.
Por otro lado, la simbología de este color también puede asociarse a la muerte y la pérdida.

Significado del color blanco

El color blanco se asocia a la limpieza, pureza, claridad, simplicidad, inocencia, etc.

Suele ser el más utilizado para los fondos, ya que da una absoluta percepción de espacio y
amplitud.

Significado del color violeta

El color violeta o púrpura está asociado al poder, el lujo, la sabiduría y la calidad.

Sin embargo, en función del tono de morado que utilicemos será lo anterior o será una
asociación de algo barato y de mala calidad, por lo que hay que tener mucho cuidado con
sus tonalidades.
Se suele utilizar en productos de belleza femeninos.
Significado del color rosado o rosa

El color rosa transmite calidez, feminidad, amor y sexualidad. Simboliza el encanto y el

cariño.
Aunque es una variante del rojo, no es un color muy estimulante, sino que más bien
calma, a no ser que utilicemos un tono fresa llamativo.
Es un color psicológicamente muy poderoso, sobre todo para el público femenino, por lo
que resaltar elementos del diseño para que llame la atención de nuestros ojos con este
color es una muy buena opción.

Datos curiosos sobre la psicología del color

Por si aún no te he convencido de que el color es un factor importantísimo a tener en cuenta, te voy a dejar
unos datos reales del efecto que producen.
¿Cuánto crees que afecta el color en tu decisión de compra?

Según Color Marketing Group, casi el 93% de los clientes compra un producto basado en su color, por lo
que toman decisiones en segundos basándose en esta teoría.
Tan solo necesitamos 90 segundos para que nuestro subconsciente analice el producto y lo tenga presente
para la compra o para no prestarle un segundo de tu atención, siendo el color un factor fundamental.

¿Te has preguntado alguna vez por qué en marketing y publicidad se utilizan mucho los azules y
naranjas?

La compra compulsiva suele darse más en productos con estos colores debido a su efecto de llamar la atención,
de ahí a que estas tonalidades sean las favoritas de muchos marketeros.
El color naranja está muy cerca del rojo, color que nos da vitalidad y llama a la acción sin ser conscientes de
ello.
¿Has pensado por qué tantísimas marcas utilizan el color azul como su color principal?

La gran mayoría de personas, tanto hombres y mujeres compartimos un color favorito: el azul. Y si no es el
tuyo, seguro que está entre los que más te gustan.
De ahí a que las marcas opten por este, debido a la simpatía que causa en todos ellos.
¿Significan los colores lo mismo en diferentes culturas?
Como te he dicho antes, el color dependerá de tu edad, sexo, cultura, educación y otra serie de factores.
Por ejemplo, la gran mayoría pensamos que el blanco como un color inocente, limpio y puro. Pero en Asia, el
blanco es un color asociado con la muerte.
¿Te habías fijado que la mayoría de marcas de alimentación no utilizan el color azul?
El color azul lleva a la paz y a la calma, y no a la acción de comer, por lo que quita el apetito. Para alimentarnos
el color rojo, amarillo y el verde son muy comunes, ya que estimulan el hambre.
Fíjate en McDonald’s, utiliza los colores amarillo y rojo en su marca. Se ha comprobado que estos colores
captan la atención de los clientes e incluso les hacen sentir hambre.
Es más, muchos dietistas aconsejan a sus pacientes a utilizar una luz en este tono en la nevera para que nos
quite ese impulso que tenemos cuando estamos aburridos. Curioso, ¿verdad?
¿Por qué el semáforo es rojo cuando tenemos que parar?
El color más fuerte y potente es el rojo, de ahí a que se utilice en los semáforos.
Hace que en nuestro cerebro se active una alarma de peligro, y llame la atención muy por encima del ámbar y
del verde.
Consejos para utilizar la psicología del color en publicidad y diseño
Por último, te voy a dar una serie de consejos para que tengas en cuenta la teoría del color en la publicidad,
diseño gráfico y diseño web, ya que la psicología de los colores es un campo que afecta considerablemente al
marketing y a la venta.
No utilices en exceso algún color llamativo y que fatigue a tus usuarios.
Utiliza colores como el rojo y el naranja para llamar la atención en los elementos más importantes de tu
diseño y que te hagan convertir.
Si tu color corporativo es muy fuerte, utiliza un color muy suave para rebajar su impacto.
Piensa siempre en tu público objetivo antes de elegir ningún color.
Realiza pruebas de Test A/B para ver qué colores te funcionan mejor en tus llamadas a la acción.
Utiliza siempre un mismo color para las llamadas a la acción de tu diseño web, y como mucho, un color
primario y otro secundario.
No elijas muchos colores que compitan por la atención del usuario, hay que ser muy metódico con esto y
ver que en la misma pantalla en la que estemos no hayan 2 colores a la vez que llamen la atención y desvíe del
objetivo principal.

Fíjate en esta imagen, 4 colores están compitiendo por la atención, algo que no se debe de hacer si
lo que queremos es convertir.

Utiliza los colores para destacar los mensajes de texto que vendan, los textos también pueden ser
una llamada a la acción.
¿Debo tener en cuenta el color para mi diseño?
Si aún no te ha quedado claro, la respuesta es: SÍ.

El color vende, y no solo sirve para llamar la atención y convertir, sino para comunicar.
Debes elegir el color en función de lo que quieras transmitir a tu público, pero también en función de lo que
signifique o represente a tu marca.
No solo debemos tener en cuenta la percepción del color en el diseño, sino en la moda, la arquitectura, el arte,
la publicidad, etc.
Por lo tanto, como ves, no se trata algo solo de este sector, sino que afecta en todos los sectores en los que
este elemento sea fundamental para su éxito.
¿Crees que el color afecta sobre tu decisión de compra?
¿Tienes alguna experiencia personal en la que el color haya afectado?¡Cuéntanosla!
Paleta de colores: La guía para
la combinación de colores
perfecta
Bego Romero | 9 enero, 2018

Twitter
LinkedIn
Facebook
Buffer
5 (99.05%) 21vote[s]

La vida no es como la pintan, es

como tú la coloreas

¿Cuántas veces hemos tenido dudas a la hora de elegir los colores?

Para pintar nuestra habitación, escoger el color de la ropa en esa noche

tan especial, para nuestra página web o incluso para la imagen
corporativa de nuestra empresa.
 A veces una decisión tan simple, nos llena de dudas y preguntas, por no
saber qué colores serían los perfectos para nosotros.

Y es que, las tendencias del diseño están siempre presentes en nuestras

decisiones, algo que no debemos pasar por alto para saber qué colores
tendremos que elegir.

¿Cuántas veces nos hemos visto en la situación de probar y seguir

probando y no dar con la combinación adecuada?

ÍNDICE DEL ARTÍCULO

 15 mejores generadores de paleta de colores online y gratis
 Mezclador de colores online y gratis
 Herramientas para generar paleta de colores a partir de una imagen
 Paletas de colores tendencia para diseño web en 2018
 Colores en HTML y CSS para una página web
 ¿Cómo ver el color que utiliza una página web o imagen?
 Combinación de paleta de colores para páginas web [+Ejemplos
reales]
 ¿Qué paleta de colores debo escoger para mi web?
La combinación de colores es una decisión muy importante, ya que
determinarán si estamos a gusto con algo o no.

Si el logotipo de tu blog tiene un color que no te gusta, acabarás por

cambiarlo. Y en el caso de tu diseño web, sucederá lo mismo.
¿Por qué no ahorrarnos este cambio y elegir ya el color que más
se adapta a ti?

Elegir los colores perfectos es esencial para el éxito de la estrategia

de tu página web, ya que va a dar personalidad a la marca, influyendo

sobre nuestros usuarios.

Para no equivocarnos en la elección, te voy a enseñar 15 generadores
de paletas online que te ayuden en tus combinaciones, junto
con tendencias para crear la combinación de colores perfecta
y ejemplos de otras empresas.
15 mejores generadores de paleta de
colores online y gratis
Cuando estamos bloqueados a la hora de elegir combinaciones, podemos
utilizar herramientas para generar combinación de colores que nos
ayuden a tomar la decisión final.

Son herramientas fáciles de utilizar y que nos van a facilitar mucho la

vida a la hora de probar las combinaciones.

Voy a explicarte una por una.

También puede interesarte: Mejores tipografías gratis y online
Programas para editar fotos gratis
Psicología del color
Coolors

Coolors es una de mis herramientas para generar colores favoritas.

Una vez accedemos a su página web, es tan sencillo como ir pulsando en
el teclado el botón del espacio, y nos irán apareciendo diferentes
combinaciones.
En el caso de que uno de los colores ya lo tengamos claro, y busquemos
la combinación que cuaje con ese color, incluiremos el código de color en
una de las columnas, y pulsaremos sobre el candado.

De esta forma, cuando volvamos a dar sobre la barra de espacio, nos

dará combinaciones para ese color asignado.

TRUCO: Podemos bloquear con el candado todos los colores que

Además, existe
queramos la opción
hasta llegar de ir buscando
a nuestra el color perfecto
combinación favorita. de forma
manual, apretando a la opción de los ajustes, e ir buscando la tonalidad.
Podremos crear colores nosotros mismos.
Color Wheel de Adobe Color CC

La rueda de Adobe se caracteriza por poder utilizar reglas a la hora de

seleccionar los colores.
Es decir, para seleccionar nuestra paleta deberemos indicar qué tipo de
colores utilizará la herramienta. Tenemos los siguientes:

Colores análogos
Los colores análogos son colores vecinos en la rueda cromática, es decir,
que están pegados unos con otros.

Colores monocromáticos
Los colores monocromáticos son diferentes tonalidades que componen un
color, por lo que derivan de un tono base.

Tríada de colores
La tríada de colores son combinaciones de colores que forman un
triángulo en la rueda cromática.
En la imagen de la herramienta, puedes ver como las combinaciones
forman un triángulo, esto es porque se trata de una tríada de colores.

Colores complementarios
Los colores complementarios son combinaciones de colores totalmente
opuestos unos con otros.

Colores compuestos
Los colores compuestos son los formados por la unión de otros colores
principales.

Por ejemplo, el naranja está compuesto del color rojo y amarillo.

Colores de los mismos tonos

La rueda de Adobe selecciona colores muy parecidos entre sí, que forman
una combinación muy lineal y similar.

Colores personalizados
Esta opción es para que seleccionemos los colores libremente uno por
uno, sin necesidad de que sean ni un color complementario, ni
compuestos, entre otras mezclas.

Si ya tienes creada una cuenta de Adobe, podrás guardar tus paletas e

incluso compartirlas.

Paletton
Paletton es una herramienta con una función muy útil en cuanto a elegir
colores para tu página web.
Se trata de escoger una combinación de colores y automáticamente
te crea una página web de ejemplo con los colores elegidos para
que veas cómo combinan entre ellos online.
Además, nos da la opción de probar esta combinación de colores en
páginas claras o blancas y en páginas de fondos negros y oscuros, una
ventaja muy grande.

Si tenemos ya la combinación de colores seleccionada, podemos ir a esta

herramienta y ver cómo quedarán en esta web ejemplo, y decidir si
debemos cambiar algo.

Color Hex Palettes

Color Hex no es una herramienta para crear combinación de colores,
sino una página donde te muestran casi 50.000 distintos tipos de
paleta de colores hex.
Si en el buscador ponemos el nombre del color en inglés, por ejemplo,
red, tendrás todas las combinaciones de colores con el color rojo.

Pero además, podemos buscarlo a través de su código de color RGB,

CMYK, etc.

¿Sabías que aun teniendo tu código de color, podría verse

distinto en los diferentes dispositivos?
Pues una de las ventajas que tiene esta herramienta es que, una vez
tengamos localizado el color final, nos da toda su información como
sus códigos de color HSL, HSV, RGB… o colores complementarios.
Te enseño un ejemplo del color de mi blog.
Con estas especificaciones, voy a tener el color en los diferentes formatos
sea cual sea.

El color rosa de mi blog, está compuesto con un valor de 255 (un

53.22%) del color rojo, un 99 (20.67%) de verde y un 125 (26.10%) de
azul.

Además de enseñarnos a leer el color, nos indica unos trucos para

utilizar en CSS3 con este color, como crear cajas, añadir sombras del
color a nuestros textos, etc.
Como ves, Color Hex nos da un montón de información. Es una
herramienta muy completa.

Colormind
Colormind es una herramientas para hacer paletas de color que
funciona de una manera muy similar a Coolors.
Vamos generando paletas hasta que demos con el adecuado y
bloqueamos hasta llegar con la combinación perfecta.

Si hacemos un poco de scroll en la página y bajamos hacia abajo, nos

suele dar paletas de colores relacionadas con la época del año en la que
estamos.

Con esta herramienta también podemos subir nuestras imágenes y sacar

las paletas de colores de estas fotografías.

Color tab
Color Hunt Tab es una extensión de Google Chrome que, una vez
habilitada, cuando abramos nuevas pestañas en el navegador, se nos
abrirán distintas combinaciones de paletas de colores.
Podemos dejar instalada esta extensión para ver si nos aporta inspiración
en nuestros colores sin necesidad de ir buscando.

¿Quien sabe si dentro de 3 días ves una paleta que te encanta, sin
haberte calentado la cabeza?

Colour Lovers Palettes

Esta web de colores consiste en que los usuarios suben sus propias
paletas de color para recibir feedback en forma de likes o comentarios.
Si nos fijamos, arriba a la derecha de Colour Lovers, tenemos la opción
de CREAR.

Sería cuestión de combinar las gamas de colores, subirla a la web y

esperar a que nos llegue el feedback de otros usuarios.

En esta página podemos filtrar las combinaciones por temáticas,

facilitandonos la tarea a la hora de tomar la decisión.

Colourcode
La herramienta Colourcode es parecida a las anteriores.
La diferencia de esta es que, una vez vas pasando el cursor por encima
de los colores, te va dando ideas de paletas distintas.

Según la opción que le hayamos puesto, la combinación será análoga,

monocromática, etc.

Sería una mezcla entre la herramienta de Adobe y la de Coolors.

Pinterest
Pensarás que Pinterest no es una herramienta para crear paletas de
color, ¿verdad?
Pues tienes razón, no lo es.

Pero es que en Pinterest podemos sacar ideas muy creativas para

elegir tu paleta de colores, que seguro que te ayudan a decidirte.

Podemos utilizar Pinterest para elegir la paleta de color adecuada.

Escribe en el buscador “paletas de colores”. ¡Encontrarás un montón

de ideas!
Lo que más me gusta de sacar de Pinterest es que, normalmente, vienen
las paletas con ejemplos de hogares, naturaleza, fotografías
impresionantes e incluso de objetos que nunca hubiésemos imaginado.

Colrd
Colrd es un creador de paletas de colores muy completo, ya que no solo
tiene esta funcionalidad.
La herramienta aporta multitud de fotografías muy cuidadas con sus
respectivos colores para aportar ideas a los usuarios de su web. Además,
podemos buscar estas imágenes por temáticas.
Si vamos a la opción de crear, podemos hacer combinación de
degradados de colores o de paletas de una forma muy sencilla.
También tenemos la opción de generar la paleta de color cargando una
imagen en la propia herramienta.

Material Design Palette

En Material Design Palette, a raíz de dos colores primarios que
seleccionemos, la herramienta genera una paleta de colores
automáticamente cogiendo estos dos como base.
Podemos ir jugando con los dos colores primarios hasta dar con las
combinaciones adecuadas.

Cohesive Colors
Cohesive Colors irá generando paletas de colores en función de la
intensidad que le seleccionemos.
Podemos guardar uno a uno el color, o copiar la paleta entera y
guardarla.

Color Picker
Mediante el selector de colores de Color Picker, haremos clic e iremos
buscando el color que más nos guste.
Al igual que en Adobe Color CC, habrá que seleccionar si queremos que
los colores sean análogos, complementarios, etc. En función de esto, la
herramienta generará una paleta de color.

Además, podemos buscar la gama o tono mediante los valores RGB, Hex,
HSL o CMYK y agregarlo a nuestra paleta.

ColorHexa
Colorhexa es una herramienta con unas funcionalidades muy similares a
Color Hex.
Incluimos el color, y nos da toda la información acerca de él.

Aporta también las que serían las perfectas combinaciones de colores

para el código que le hayamos pedido, dándonos ideas si tenemos ya el
color principal claro.

Udcube

Este círculo cromático de Udcube funciona de una forma muy parecida

al de Adobe.
Si pulsamos sobre Harmony, se nos abrirán las opciones para las
combinaciones de colores del círculo, es decir, colores complementarios,
colores análogos, 3 colores, 4 colores, etc.

En función de nuestras necesidades vamos jugando hasta dar con la

paleta adecuada.

Mezclador de colores online y gratis

Cuando éramos pequeños, solíamos mezclar colores con ceras o lápices,
y veíamos el tono o matiz de color que salía en un momento.

Pero ahora es diferente, necesitamos mezclar colores online para que

el esfuerzo por conseguir esto sea el mínimo, por ello, te voy a enseñar
una herramienta para ahorrate el trabajo.
Pinetools

Con Pinetools seleccionaremos nuestro primer y segundo color con un

balance de 50, y aparecerá una salida que será el resultado de la mezcla
entre ambos colores.
Además, no solo podemos mezclar colores, sino que podemos aclarar y
oscurecer tonos de color del que hayamos asignado, invertirlo, modificar
un matiz, generar gradiente, etc.

Fácil, ¿verdad?

Herramientas para generar paleta de

colores a partir de una imagen
¿Te has preguntado alguna vez cómo sacar la paleta de colores de
una imagen?
En algunas de las herramientas anteriores tenemos la opción de crear la
paleta a través de una imagen o fotografía, como en Coolors, Colrd o
Adobe CC.

Pero existen otras que tienen también este tipo de funcionalidades y

seguro que no lo sabías.

Canva Color Palette Generator

Seguramente esta herramienta de Canva ya la conocías, y no
precisamente por sacar los colores de una imagen, sino por la posibilidad
de crear imágenes y editar fotografías.
Mi recomendación es que utilices programas para editar las
fotografías antes de subirlas para dar con los tonos adecuados.
Una vez la tengas editada, extraes la paleta y… ¡a dar rienda suelta a la
imaginación!

Pictaculous
En Pictaculous subimos directamente nuestra imagen, y la herramienta
nos devuelve la paleta de colores que utiliza cada fotografía.
Como ves, he subido una foto del mar con una puesta de sol y me ha
extraído una paleta de colores azules y naranjas del cielo y el agua.

Además, está vinculada a Colour Lovers, por lo que la herramienta nos

sugiere ideas parecidas a la que hemos extraído.

Coolors
Coolors es uno de los mejores generadores online de paletas de color.
Podemos ir al icono de la fotografía, donde seleccionaremos nuestra
imagen y extraerá la paleta de colores que tiene asignada.
Además, no hace falta que importemos la fotografía, sino que podemos
escribir su URL y la herramienta accede automáticamente a los colores de
la imagen.

Colrd
Una vez estamos en la página web de Colrd, vamos a crear e
importamos la imagen que queramos extraer sus colores.
Ya seleccionada la imagen, se cargará y nos extraerá la paleta con sus
tonalidades y matices.

Color Wheel de Adobe Color CC

La herramienta de Color Wheel nos permite también generar las propias
paletas de colores a través de fotografías que importemos.
Si te fijas, arriba a la derecha tienes un símbolo de una cámara de fotos.
Clicamos sobre ella y subimos el archivo.

Nos dará la paleta de colores y te indicará de dónde ha extraído cada

color de la imagen.

Paletas de colores tendencia para

diseño web en 2018
Cada año encontramos tendencias de colores en las revistas de moda,
revistas de decoración, de diseño gráfico, etc.

Muchas de estas tendencias vienen con la temporada del año en la que

estemos en ese momento y de lo que se va poniendo de moda.

Recuerda que, a la hora de seleccionar tu paleta, debes pensar en el

público al que se dirige tu página web, y ver con cuál de ellas
podríamos transmitirles más.
Pero ojo, el diseño tiene importancia, pero las marcas también tienen
otros potenciales.

Si tu marca ya es reconocida por tu público objetivo, ten cuidado con

cambiarla, ya que podría perder todo el reconocimiento (como pasó con
Segundamano y su nueva marca Vibbo).

Pantone dicta también unos colores que van a despuntar por épocas.

Según Pantone, el color tendencia del 2018 es el ultra violeta y todas

sus tonalidades.
Aun así, no me voy a centrar en la tendencia del color, sino en
tonalidades tendencia según el tipo de paleta que escojamos.

Paleta de colores tendencia según

Pantone Color Institute
Antes de pasar a enseñarte las paletas por tonos de colores, voy a decirte
cuáles han sido los tonos que Pantone dice que serán tendencia en este
año 2018.

Si Pantone lo dice, habrá que hacerle caso, ¿no?

Paleta de color ingeniosa: Compuesta de colores

complementarios como el azul y el naranja, es decir, una combinación
entre tonos cálidos y fríos.
Paleta de color discreta: Tonos claros, tranquilos y serios. Destacan
los tonos rosas palo por encima de los demás.
Paleta de color vegetal: Esta hace referencia a mezclas de tonos
verdes que nos recuerdan a las verduras, junto con tonos púrpura como
el de las moras.
Paleta de color juguetona: Tonos amarillos, colores brillantes y
paletas súper divertidas.
Paleta de color extraordinaria: Esta es una paleta de color en tonos
rosados, cálidos y que evocan a la naturaleza y sus colores tierra.
Paleta de color metálica: Los tonos metálicos son tendencia en este
2018. Además, las pasarelas de moda así lo demuestran.
Paleta de color intensa: Colores plateados, dorados o
negros aportan fuerza a nuestras paletas de color.
Paleta de colores cálidos tendencia

Las tendencias en colores cálidos están a la orden del día, pero es cierto
que cada vez estos tonos rojos, rosados o naranjas son más brillantes.

Estos suelen ser colores muy acogedores y más hogareños,

combinaciones de colores tierra o café.
Podemos utilizar tonos marrones y naranjas a la hora de hacer una web
para algo relacionado con restaurantes, casas rurales, hoteles, etc.

Estos colores transmiten confianza y cercanía, y tendremos ganas de ir a

probar esos sitios tan acogedores.

Como ves, la paleta de colores va en función de la temática que

tengamos en mente. Nunca hay que dejar esto de lado.
Paleta de colores fríos tendencia

Los tonos fríos aportan relajación al que los ve. Son tonalidades que
recuerdan al mar, que aportan tranquilidad y armonía entre ellos.

Con estos tonos no debemos descartar el color blanco, ya que aportaría

luz y sensación de un espacio limpio a nuestros estilos.

Otra opción sería la de hacer un contraste con un tono cálido, aportando

fuerza a nuestra paleta de colores de la web.

Usaría estos colores para marcas que se relacionen con el mar, ya sea
directa o indirectamente.

Aun así, podemos utilizarlo para todo lo que queramos, es una paleta
muy versátil.

Paleta de colores grises tendencia

Las paletas de colores grises son muy lineales y están muy de moda.

Mezclar los tonos grisáceos con un color más llamativo es una

opción de acierto seguro, ya sea para decorar tu casa, como para hacer
una página web.
Otra apuesta segura sería combinar los tonos grises con el color
negro. Parecerá apagada, pero una de las tendencias del diseño web de
este año es el minimalismo, por lo que, más limpio y sencillo imposible.
Dar luz con otros colores rompedores es algo que llamará la
atención del usuario, y aunque uses los tonos grises en su mayoría, hay
que romper con algún color.

Color tendencia del 2018: Paleta de

colores violeta
Según Pantone Color Institute, el color tendencia para el 2018 es el
violeta, por lo que tenemos que saber combinarlo a la hora de crear
nuestras paletas.
Yo opto por hacerlo con tonos grises o incluso un morado oscuro.

Pero estas combinaciones con tonos relacionados son realmente visuales

y modernas:

Combinación de colores llamativa

Las combinaciones llamativas como azul y naranja, amarillo y negro o
rosado y verde, están a la última moda.

Los colores intensos llamarán y captarán la atención de los

usuarios sin dejarles indiferentes con nuestros CTA llamativos.

Colores en HTML y CSS para una

página web
Pero ahora nos asalta una duda, ¿qué hacemos con estos códigos que
nos dan las paletas?

Con estos códigos se pueden representar los colores en los diferentes

lenguajes para que cualquier dispositivo pueda verlos.

Y esto se hace a través del código de color Hex.

El código de color Hex, nos indica lo que representan los colores Rojo,
Verde y Azul para formar nuestro color final.
Como te he explicado antes, el color rosa de mi blog se compone de un
53.22% de rojo, un 20.67% de verde y un 26.10% de azul, lo que forma
el color rosa con código #FF637D.

#FF637D
Si queremos incluir estos códigos de color en el HTML de nuestra página
web, será cuestión de insertar una etiqueta con el código de color.

Si lo que queremos incluir es el código en el lenguaje CSS, utilizaremos

esta misma nomenclatura de colores Hex entre los elementos que
diseñemos de nuestra página web.

¿Cómo ver el color que utiliza una

página web o imagen?
Pero, ¿y si llego a una web que me gustan sus colores? ¿cómo los copio?

Muchas veces llegamos a una página web y nos gustan los colores que
utilizan, pero no sabemos cómo dar con el tono indicado.

Para ello, existen técnicas que nos permiten sacar los códigos de color de
cualquier web que se nos ponga por delante.

Hay muchísimas herramientas para el diseño web que nos pueden

ayudar a extraer tanto las paletas como los colores.
Te voy a explicar algunas de ellas.

ColorPick Eyedropper
Colorpick es una extensión de Google Chrome que utilizo a diario para
extraer los colores de cualquier imagen, web o fotografía que vea por
internet.
Es muy fácil de utilizar, ya que en un clic tendrás el código de color para
utilizar en tus diseños.

Web Developer
Con esta extensión de Web Developer podemos extraer las paletas de
color de cualquier página web, además de hacer mil y una cosas más.
En la opción de Information y View Color Information se nos abrirá una
pestaña con la paleta que utiliza esa página web.

¿Por qué no utilizar la gama de colores de esa web que te gusta tanto?
Combinación de paleta de colores
para páginas web [+Ejemplos reales]
Todas estas combinaciones son muy chulas pero, ¿cómo quedarán en
nuestra web?

Combinar los colores para una página web no es fácil, ya que ese color
que elijamos va a quedar grabado en la mente de nuestro lector o
consumidor.

Por ello, la mejor opción es inspirarse en otras páginas webs e ir viendo

cuál de ellas tiene más nuestro estilo y podría encajar más con nuestra
marca o blog.

A la hora de determinar la paleta de colores de nuestros proyectos o

páginas webs, debemos tener en cuenta tanto nuestro gusto
personal como el punto de vista de las personas que queremos
llegar, es decir, nuestro público objetivo.
Inspirarse en las grandes marcas es una buena opción, ya que si
para estas empresas fue un acierto elegir esos colores, para ti también lo
puede ser.
Te voy a enseñar algunas marcas que han jugado muy bien con los
colores y saben cómo llegar al usuario de forma muy visual.

Paleta de Color de Burger King

Fíjate como Burger King juega psicológicamente con los colores.

¿A qué te recuerda esta paleta?

A una hamburguesa con su pan, tomate, queso y carne, ¿verdad?

Pues tú debes hacer lo mismo con tu web. Jugar con la psicología de los
colores.

Paleta de Color del Blog de Javi Pastor

Este es el ejemplo del blog de Copywriting de Javi Pastor.

Utiliza muy bien los tonos de colores, jugando con el verde y naranja que
dan sensación de frescura.

Además, sus llamadas a la acción son súper visuales gracias a estas

combinaciones de colores.

Vemos en muchos blogs combinaciones con azul y naranja, amarillo y

negro, etc. Pero esta llama la atención por su originalidad.

Paleta de Color de Elegant Themes

Elegant Themes sabe bien como destacar sus productos.

Utiliza una paleta de colores muy singular, un morado junto con un rosa
intenso, dando mucho color y luz a los elementos visuales.

Divi utiliza este morado en su interfaz, quedando muy chulo y visual.

Paleta de Color de M&M’s

M&M’s tiene colores complementarios que nos recuerdan a sus lacasitos.

Utiliza con fuerza el rojo y amarillo, dos colores que destacan por sí solos,
y además, el marrón, haciéndonos recordar el chocolate.

Paleta de Color de Starbucks

Starbucks utiliza muy bien las paletas de colores, ya que lo hacen por
temporadas.

Utilizan siempre su mítico color verde, combinado con el negro y el

blanco, pero según la época del año, incluye imágenes de sus productos
con tonos de otros colores.

En este caso, debido a la época navideña, utiliza el rojo, quedándole una

paleta realmente chula y acorde a esta temporada.

Paleta de Color de Mr. Wonderful

La famosa marca de productos “felices”, sabe bien como llegar con sus
mensajes y colores.

Utiliza tonos pastel, transmitiendo tranquilidad, frescura y paz con sus

mensajes y colores positivos.

Paleta de Color de The Black Turtle

Al igual que con Burger King, esta paleta no nos trae recuerdos de
hamburguesa, sino de una temática rústica.

Nos recuerda al campo, a la granja, a comida realmente apetitosa.

¿Verdad que te apetece ir a comer ahora mismo? ¡A mí también!

¿Qué paleta de colores debo

escoger para mi web?
Encontramos tantos generadores de paletas y webs donde sacar ideas
que es muy complicado quedarse con una sola.

Es cierto que deberíamos escoger la paleta de color en función de la

temática de nuestra página web, y equilibrar los colores entre sí.

Aun así, no hay una regla establecida para la elección del color.

La clave no está en elegir un color, la clave está en transmitir

sensaciones con ese color.

Por esto mismo mi recomendación es la siguiente:

No elijas una paleta de colores porque esté de moda aunque no te guste,

nunca llegarás a estar del todo cómodo con ella.

Si hay algo que he aprendido desde que tengo uso de razón y me gusta
la moda es que, si te gusta un color, olvídate de las tendencias, anímate
a utilizar ese color.

Mi blog es rosa y sé que es algo que no a todo el mundo le gusta, pero

yo me siento cómoda con él y es un color muy personal, con el que me
recordarás seguro, ¿verdad?

Elige colores que se adapten a ti, acordes a tu estilo, que te apetezca

mirar cuando estés trabajando.
No hay ningún color que no recomiende, ni mejores colores, hay que
mirar la intención de la página, la personalidad de una marca y de uno
mismo.