Teoría de color aplicada al diseño de páginas web.

2. El color en el diseño web
El color es el medio esencial para tocar las emociones de los visitantes de tu sitio web pues crea
una reacción física y emocional en los espectadores. Los colores son capaces de establecer el tono
adecuado para llevar el mensaje a los visitantes: pueden calmar, excitar, estimular a las acciones…
Los propietarios de las web que no conocen los principios generales del diseño eligen el color para
sus webs de acuerdo a sus gustos personales, pero no todos llegan a una correcta solución.
El color es extremadamente poderoso. Cuando se establece un esquema de color para el diseño
2

3. El círculo cromático

4. El círculo cromático
El círculo cromático es una herramienta indispensable
para diseñadores y artistas. Permite seleccionar
seleccionar colores de forma armoniosa. Consiste en 6
colores básicos (rojo, naranja, amarillo, verde, azul y
violeta) y las mezclas entre los que se sitúan más
próximos dentro del círculo.
Para elegir una gama o mezcla armoniosa, hay que
elegir dos colores opuestos entre sí (por ejemplo 1 y 2); y
tres igualmente espaciados entre sí (p.e. 2, 3 y 4),
formando un triángulo (o un cuadrado si se escogen dos
pares de colores opuestos). El esquema de color
armonizará cualquiera que sea el ángulo en el que
establezcamos la relación.
4

5. Diferentes círculos cromáticos
5

6. Círculo cromático de 6 colores
6

7. Círculo cromático de 12 colores
7

8. Círculo cromático de 24 colores
8

9. Círculo cromático degradado
9

10. Hexaedro cromático degradado
10

11. Colores primarios, secundarios y
terciarios

12. Colores primarios
Son el rojo, el amarillo y el azul. El resto de los
combinando estos tres. Mezclando dos colores
obtiene un color secundario.
Colores secundarios
Naranja, verde y violeta
Colores terciarios
Se obtienen mezclando un color
primario con otro secundario
12

13. ¿Cuáles son los colores primarios?
Los colores primarios son aquellos que no se pueden obtener mediante la mezcla de ningún color, es decir, son colores
absolutos con características plenamente diferenciadas entre sí.
De la mezcla de dos colores primarios en iguales proporciones surgen los colores secundarios. Consecuentemente, de la mezcla
de tres colores primarios o de un color primario con otro secundario surgen los colores terciarios.
Existen tres modelos de clasificación de los colores primarios: el RGB, el CMYK y el tradicional o RYB. Aunque cada modelo
tiene una clasificación diferente, coinciden en que los colores primarios son tres.
13

14. Modelo tradicional
El modelo tradicional, también conocido como RYB, se refiere a la
clasificación clásica de los colores primarios en rojo, amarillo y
azul (blue, yellow y red en inglés).
Puede ser considerado un antecedente del modelo CMYK.
El modelo RYB tuvo sus orígenes en el siglo XVI y sigue formando
parte del imaginario colectivo, aunque ya ha sido remplazado por
los sistemas RGB y CMYK, más especializados y precisos.
14

15. Sistema CMY o CMYK
En el sistema CMY o CMYK, los colores primarios o básicos
son cian, magenta y amarillo (cian, magenta y yellow en inglés).
En algunos casos se incorpora como apoyo el negro (black en
inglés, del que toma su última letra para completar el acrónimo
CMYK).
Este modelo, conocido también como síntesis sustractiva del color,
se basa en la teoría de los pigmentos, según la cual las mezclas
absorben las ondas que refractan colores.
Esto significa que, al contrario del sistema aditivo del color, este
modelo “elimina” o “sustrae” longitudes de onda de las luces
reflejadas. El CMYK es el usado en imprentas y materiales
concretos. Por eso, su uso es frecuente en las artes plásticas.
15

16. Sistema RGB
En el sistema RGB, llamado también “síntesis aditiva del color”, los
colores primarios son azul, verde y rojo (red, green, blue en
inglés, de donde surge en acrónimo RGB).
Este modelo se basa en la teoría del color como radiación de luz.
Así, el color resulta de la “suma” o “adición” de luces con diferentes
longitudes de onda, tal como funcionan los televisores y demás
pantallas electrónicas.
Este sistema es el utilizado en diseño web.
16

17. Equilibrio de color:
Colores complementarios,
análogos y tríada

18. Colores complementarios
Son los opuestos en el círculo cromático:
• Rojo y verde
• Azul y naranja
• Violeta y amarillo
Estas combinaciones dan el contraste más fuerte.
tenemos un fondo rojo y le ponemos un texto
casi cegador.
18

19. Colores análogos
Colores adyacentes en el círculo cromático.
Combinan perfectamente, comunican tranquilidad.
Use estos colores cuando quiera que sus usuarios
cómodos viendo su página web.
19

20. La fórmula tríada
La paleta de colores tríada consiste en escoger
unilateralmente equidistantes en el círculo
Este esquema tríadico es más popular que el
que los colores neutrales suelen ser más
20

21. Paleta monocromática
Una paleta monocromática usa solamente un color y
juega con la opacidad para conseguir los diferentes
matices. Son paletas de colores uniformes y sin apenas
variación, pero muy equilibradas y agradables para el
ojo.
ELIGIENDO UNA PALETA CON LA QUE “PINTAR”
21

22. Paleta análoga o fórmula armónica
La paleta de colores análogos se obtiene cuando
combinamos colores que están colindantes en el
círculo cromático, es decir colores vecinos. Los colores
análogos funcionan muy bien juntos porque cuentan
con similares colores de origen. Como los colores
monocromáticos, los colores análogos son muy
equilibrados, pero éstos sí cuentan con algo más de
contraste entre los colores.
ELIGIENDO UNA PALETA CON LA QUE “PINTAR”
22

23. Paleta complementaria
La paleta de colores complementarios está formada
por colores que se encuentran a lados opuestos del
círculo. Según la teoría del color, si escogemos los
colores de esta manera, garantizaremos mucho
contraste entre ellos, pero nos aseguraremos al mismo
tiempo que la combinación es cromáticamente
armoniosa y equilibrada. Los colores complementarios
cuentan con un contraste más alto, por lo que se suele
producir una paleta de colores más vibrante.
ELIGIENDO UNA PALETA CON LA QUE “PINTAR”
23

24. Paleta tríada
La paleta de colores tríada consiste en escoger tres
colores unilateralmente equidistantes en el círculo
cromático. Aquí nos convendrá estudiar y validar que
los colores escogidos cuentan con armonía y funcionan
bien juntos. Sólo por si acaso.
ELIGIENDO UNA PALETA CON LA QUE “PINTAR”
24

25. Otros modelos
Aunque los anteriores modelos son los más
extendidos, existen diversas variantes de ellos, como la
“split-complementario” o la “rectangular tetrádrico”,
por ejemplo.
ELIGIENDO UNA PALETA CON LA QUE “PINTAR”
25

26. La temperatura del color

27. También se pueden clasificar los colores por temperaturas. Aquí se aplican
algunas reglas generales:
Los colores cálidos parecen más dominantes cuando se combinan
con colores fríos. De esta manera, también se puede transmitir una
sensación de profundidad. Los colores fríos, en cambio, parecen más
lejanos que los cálidos. Los colores de calidez intensa también pueden
hacer que los colores fríos parezcan aún más fríos.
El gris así como los tonos de gris, el blanco y el negro, pertenecen al
grupo de los colores neutros. El beige y el marrón también suelen
asignarse a los colores neutros. Personalmente, solo estoy de acuerdo en
parte, porque un tono de gris puede parecer cálido o frío. También tiendo a
considerar el beige y el marrón como tonos cálidos. Los colores neutros se
definen para mí como el blanco y el negro y todos los tonos de gris entre
ellos, a los que no se ha añadido ningún otro color.
27

28. Los colores neutros parecen poco interesantes por sí solos,
por lo que necesitan al menos un color para destacar. Las
excepciones confirman la regla, ya que hay algunos diseños
minimalistas en blanco y negro que se las arreglan sin ningún
otro color. El marrón y el beige también pueden resultar muy
atractivos como color dominante, por ejemplo, en un diseño
monocromático.
Los colores primarios contrastan entre sí. Hay otra forma de
crear contraste: observando los colores que están a unos 3
cuadros de distancia en la rueda de colores. Estos
emparejamientos pueden crear fácilmente desarmonía. Esto es
porque "se matan entre sí". Sin embargo, si se utilizan
correctamente, por ejemplo, como llamada a la acción (Call-to-
Action), pueden dar a tu diseño un contraste interesante.
28

29. La psicología del color

30. La psicología del color es la disciplina que estudia
cómo se perciben los colores y cómo afectan en
el comportamiento humano. Este campo se puede
aplicar en cuestiones cotidianas como, por ejemplo,
el color de las paredes de una casa, oficina o
consultorio médico, como en áreas profesionales
como el marketing y la creación de marcas.
La psicología del color para diseño web está en constante desarrollo. Sin duda alguna, su dominio es vital para los responsables de
vital para los responsables de los departamentos creativos y de creación de nuevos productos en las organizaciones.
Si bien existen factores subjetivos y culturales con respecto al significado de los colores, psicólogos, sociólogos, lingüistas e
investigadores de mercado han llegado a ciertas convenciones.
La psicología del color es indispensable para profesionales como diseñadores gráficos, ilustradores, expertos en marketing, publicistas,
etc. Es importante aplicar colores que despierten emociones en el público objetivo que estén de la mano a la personalidad que la
empresa, marca, producto o servicio quiera trasmitir. Es indispensable plantear estrategias coherentes que permitan alcanzar los
resultados de la forma más eficiente y eficaz.
30

31. 1. Identifica el público objetivo de tu página web
La importancia de elegir colores en base al público
dirigimos radica en que la mayoría de los colores
determinados grupos. La página, ante todo, tiene
convencer a los usuarios que visitan el sitio. Es por
seleccionar colores con los que se sientan
Si el público al que queremos llegar es a un público
podemos utilizar colores oscuros (como grises o
fríos (azules y verdes). El público femenino se
colores como violeta o púrpura; mientras que el
identifica más con colores planos y llamativos
verde.
31

32. 2. Enciende las emociones
Una de las propiedades de los colores es la de
sensaciones. Los colores estimulan nuestro cerebro
tranquilidad, seguridad, confianza, pasión,
interesante desde el punto de vista del marketing,
necesario dar argumentos para convencer sobre las
beneficios de un producto o servicio.
Sin embargo, asegúrate de aplicar los colores
público objetivo, ya que ciertas asociaciones tienen
cultural. Por ejemplo, vestir de negro es ir de luto
sociedad, mientras que en India el color del luto es
en cuenta en las relaciones internacionales de tu
32

33. 3. ¿Qué colores seleccionar?
Otro de los aspectos a la hora de escoger los
marca y para nuestra página web es el equilibrio.
colores y el equilibrio hace que un diseño sea más
¿Pero qué colores tenemos que seleccionar? Por lo
recomiendan respetar una de estas reglas:
• Colores de la misma gama cromática; es decir,
de un mismo color.
• Colores complementarios; aquellos situados
gama cromática.
• Colores opuestos: son aquellos situados justo en
de la gama cromática y que ayudan al contraste.
• Otra de las recomendaciones es no abusar de los
tres es suficiente y siempre es bueno que haya
predominante.
33

34. 4. Efectividad del color: el contraste
El contraste de color se produce al combinar dos
están relacionados. Esto permite, por ejemplo,
imágenes. Combina colores claros y colores
este efecto visual.
Es importante que el resultado sea armónico, no
Elige dos colores que “empasten” bien y no
espectador.
34

35. 5. Composición y peso de colores
Gracias a los colores y a las formas podemos dirigir
visita y así resaltar determinados elementos.
En la composición se dice que los colores cálidos,
pesan más que los colores fríos, claros o pesados.
y el equilibrio justo en el diseño de tu web.
Para ello puedes seguir estas tres reglas básicas:
• Crea un solo punto de impacto visual por
punto al que dirigir la mirada.
• Respeta la mirada del lector; es decir, de
de arriba hacia abajo.
• Deja aire y espacios en blanco para que la
35

36. 6. Utiliza un color vivo junto con un blanco y negro
Piensa en el color como un ingrediente importante
página web; al igual que con un sabor fuerte, un
mucho desagrada. Los colores vivos llaman la
también tienen el poder de consumir la energía
Si acabas de adentrarte en el mundo de los colores,
mejoras formas de acertar es dejando tu página en
introduciendo un toque de color que resalte.
Si eliges un color llamativo, estos serían los
web donde podrías utilizarlo:
• Títulos
• Enlaces
• Menú de navegación
• Botones
• Líneas horizontales
36

37. 7. Utiliza un color “principal” y uno “adicional”
Si te parece que con un solo color no es suficiente, utiliza dos. Sin embargo,
importancia a dos colores diferentes, el truco es elegir uno como tu “color
secundario”, lo que significa que se utilizará mucho menos.
De esta forma los colores toman la función de complementarse y no de
37

38. 8. Presenta tus colores a través
de tus imágenes
Además de utilizar colores para
fondos, rellenos, textos, etc.,
utilizar las fotografías de tu web
transmitir tus colores y
identidad de tu marca.
Emplea fotos que sigan la gama
y la estrategia de color que has
lugar de usar fotos “cualquiera”
pueden romper tu equilibrio.
38

39. El significado de los colores

40. 40

41. Rojo
Se asocia con audacia, entusiasmo y deseo. Es el color
del amor, la fuerza, la potencia, la energía, el liderazgo y la
emoción. Pero también tiene connotaciones negativas de
negativas de peligro (alarmas, semáforos, errores etc.)
41

42. Rojo
El rojo es el color del amor y la pasión. Las cajas de bombones son de
color rojo en el día de San Valentín. Algunas son de color rosa, que es
un aclarado del color rojo.
El rojo es también el color de la ira y de la sangre. Los colores rojo,
naranja y amarillo se encuentran todos ellos en el fuego.
Rojo también puede significar peligro. Las señales de detención son
de color rojo, y reciben toda nuestra atención pues nos dicen que
debemos tener cuidado y mirar antes de continuar.
Se debe utilizar para llamar la atención de la persona que entre en tu
web. Puedes crear mucha expectación con el rojo.
Botones y enlaces en rojo pueden ayudarte a generar un mensaje de
seriedad en el diseño de un sitio web. Aunque su uso excesivo puede
resultar agresivo.
Cuándo usarlo: utiliza el rojo para llamar la atención
sobre algún elemento del diseño. También se utiliza
para las alertas de error. Funciona muy bien en sitios de
deportes, moda y restaurantes.
Cuándo no: no abuses de él, demasiado rojo puede ser
negativo. No suele utilizarse en artículos de lujo ni en
sitios relacionados con la naturaleza.
42

43. Azul
Significa paciencia, paz, tranquilidad, integridad, amor, estabilidad.
Es uno de los colores más queridos, sobre todo por los hombres.
Se asocia con estabilidad y profundidad,
profesionalidad, confianza y honor.
43

44. Azul
Dependiendo del aclarado y oscurecimiento del azul, puede
representar diferentes sentimientos, pensamientos y emociones.
En las imágenes, azules con tonos oscuros pueden dar una sensación
de tristeza. El azul claro es el color del cielo y del agua, que puede ser
refrescante, libre y tranquilo. El azul puede representar frescura y
renovación, como cuando la lluvia lava la suciedad y el polvo.
El azul es un color frío, por lo que no siempre se debe abusar de él. Al
igual que no es muy recomendado utilizar demasiados tonos fuertes.
Al estar asociado a seriedad, lo utilizan muchas empresas grandes
relacionadas con la salud, tecnología, ciencia o entidades bancarias.
La tranquilidad del azul favorece la relajación.
Cuándo usarlo: funciona muy bien para sitios de salud,
ciencia, tecnología, política y servicios públicos.
También se utiliza para las alertas de info.
Cuándo no: si te pasas con el azul puedes conseguir que
tu página tenga un aspecto frío.
44

45. Amarillo
El color amarillo es asociado con la vivacidad. Es energético y
transmite el sentimiento de felicidad. También se asocia con
curiosidad, diversión, alegría, inteligencia, brillo, precaución.
45

46. Amarillo
Junto con el rojo y el azul, forman los tres colores primarios. De los
colores vivos, es el más claro.
El amarillo se asocia con el sol y el calor. Cuando se utiliza junto con el
naranja, se crea una sensación de diversión relacionada con el verano.
Cuando se combina con el negro, se puede generar gran cantidad de
atención.
El amarillo puede estar asociado con la sed, y se puede encontrar en
las paredes de muchas tiendas de refrescos.
El amarillo también puede estar asociado con la cobardía y el miedo,
que proviene de la antigua expresión de alguien está “pálido y
amarillo”.
A la hora de diseñar una web, se pueden utilizar tonos fuertes de
amarillo para transmitir esa felicidad de la que les hablamos arriba.
Incluso tonos más suaves para una felicidad más calmada.
Cuándo usarlo: funciona muy bien en sitios infantiles, si
utilizamos tonos suaves también funciona en sitios de
decoración y belleza. Dependiendo del color de fondo,
puede dar buenos resultados para botones de llamada a
la acción.
Cuándo no: si abusamos de él puede cansar la vista.
46

47. Naranja
Significa alegría y creatividad. Puede ir asociado con
amistad, confianza, alegría, valor, constancia.
47

48. Naranja
Para hablar de alegría o diversión lo mejor es utilizar tonos naranjas.
Transmite: energía, vida, ambición, calor, emoción o entusiasmo. El
naranja representa el calor, pero no es tan agresivo como el rojo.
El naranja puede retratar un ambiente divertido porque es enérgico y
crea una sensación de calor sin connotaciones de peligro y de sangre,
como ocurre con el color rojo.
El naranja puede estar asociada con la salud, como por ejemplo la
vitamina C, que se encuentra comúnmente en las naranjas.
Cuando diseñamos un e-commerce, el naranja suele ser muy
recurrido, ya que llama bastante la atención de los posibles clientes.
También es una buena alternativa para webs de automoción,
tecnología, ocio y entretenimiento.
Cuándo usarlo: llama mucho la atención, así que es
ideal para la llamadas a la acción (por ejemplo, en los
botones). También se utiliza para las alertas de
advertencias. Funciona muy bien en sitios de
automoción, entretenimiento, tecnología, infantiles y en
gastronomía.
Cuándo no: le pasa lo mismo que al rojo, si abusamos
de él puede resultar cargante.
48

49. Violeta
Tradicionalmente asociado con poder, nobleza, y riqueza.
Significa sabiduría, realeza, independencia, nobleza, lujo,
ambición, dignidad, magia y el misterio.
49

50. Violeta
Asociado por el color de las vestimentas reales, el morado o violeta se
relaciona con la realeza.
Es el color de la calma, la creatividad, el misterio, la magia y la
meditación. También se considera el color de la sensualidad, la
realeza, la nobleza y el lujo.
El violeta es el color que debes utilizar si deseas invocar la sensación
de riqueza y lujo en un espacio.
Los morados con más rojo pueden estar asociados con romances,
intimidad, suavidad y confort.
Extravagante, singular, vanidad, femenino, la magia, lo oculto,
fantasía, misterio, espiritualidad, lo utópico, sexualidad, frívolo, original,
lo antinatural, artificial, ambigüedad, lo inadecuado.
Es el color que menos aparece en la naturaleza, por eso siempre se
asocia más a lo inmaterial, lo divino o espiritual.
Cuándo usarlo: usa tonos oscuros de morado para crear
una sensación de lujo y riqueza, y los tonos más claros
para felicidad y romance. El morado también puede ser
perfecto para productos de belleza, astrología, masaje,
yoga, salud, espiritualidad y contenido relacionado con
chicas adolescentes y marcas femeninas.
Cuándo no: el morado puede ser relajante, lo cual
normalmente es una mala opción para llamar la
atención. Utilizar tonos oscuros puede hacer que tu
página se vea oscura y distante.
50

51. Verde
Es el color de la armonía, la naturaleza, la vida y
frecuentemente se asocia con dinero.
51

52. Verde
El verde es el color del dinero y la esperanza, por lo que en nuestra
cultura se asocia con la riqueza.
Como la mayoría de las plantas son de color verde, también se asocia
con el crecimiento y la salud.
Transmite sensaciones de: serenidad, armonía, crecimiento, fertilidad,
dinero, salud, generosidad, paz, buena suerte o naturaleza.
Se utiliza para mostrar que los productos son naturales y saludables.
También puede tener una connotación de pérdidas y ganancias.
Combinado con azules, el verde perpetúa la salud, la limpieza, la vida
y la naturaleza.
Son la mejor opción cuando queremos un diseño web para ciencia,
turismo, medicina, sostenibilidad o medioambiente.
Cuándo usarlo: funciona muy bien en sitios de turismo,
también en e-commerce de productos relacionados con
la salud. Se utiliza para las alertas de éxito y los
mensajes de validación.
Cuándo no: en productos de lujo o tecnológicos.
52

53. Marrón
Es el color de la relajación y la confianza. El marrón está
asociado con lo terrenal, la naturaleza, la durabilidad, lo tribal,
la comodidad, la fiabilidad, etc. Puede ser percibido como
sofisticado, sólido y convencional.
53

54. Marrón
El marrón es un color natural y cálido asociado con tierra, aspereza,
fiabilidad, estabilidad, amistad y naturaleza.
En diseño web evoca sensaciones severas, de madurez y rústicas.
Sería ideal para un bufete de abogados que pretenda vender
experiencia.
El color marrón se relaciona con la naturaleza, aquello hecho a mano
construido de forma natural con materias primas, es cálido y fuerte,
arraigado, terrenal y áspero. Representa valores como la
perseverancia y la amistad.
Pero cuidado, también se asocia con productos de concepciones no
tan nobles como los desechos orgánicos, el aburrimiento o lo
tradicional (algo que en el mundo digital se suele evitar).
Cuando quieras representar la tradición, la naturaleza o estimular el
apetito. Tiende a usarse en fondos
Cuándo usarlo: el marrón puede usarse para estimular
el apetito (como el café y el chocolate), lo que lo hace
apropiado para el contenido alimentario. También
puede venir bien para contenido de animales,
veterinarios y finanzas. El marrón normalmente se
emplea para fondos..
Cuándo no: el marrón puede ser aburrido y demasiado
conservador. No se recomienda para llamar la atención
y no debería aplicarse en botones de llamada a la
acción.
54

55. Gris
Transmite sensación de gravedad, conservadurismo y
tradicionalismo. En sus tonalidades más claras transmite las
sensaciones de pureza e inocencia. Puede estar asociado
con la seguridad, la fiabilidad, la inteligencia, la modestia, la
dignidad, la madurez, lo sólido y lo práctico, la vejez, la
tristeza, la calidad, lo aburrido, el sentido práctico, la
profesional, la durabilidad. Combina bien con colores vivos.
55

56. Gris
El gris se asocia con formalidad, profesionalidad, sofisticación, lujo,
equilibrio, atemporalidad y carácter sobrio.
Se trata de un color neutro, sin demasiada fuerza, pero con un gran
valor si sabes utilizarlo bien.
En caso de querer desarrollar una web sobre artículos de lujo, el gris
será tu color principal. También para páginas de profesionales, o webs
que quieran transmitir calma, serenidad…
En ocasiones puede resultar un color aburrido o soso, y a veces evoca
tristeza e indecisión, por lo que su uso en el diseño web se limita a su
combinación con otros colores.
Si se abusa de él, podría faltar personalidad a nuestra web. Ten claro
que para llamar la atención de la gente, el gris no funciona demasiado.
Cuándo usarlo: como complemento, es ideal para
conseguir equilibrio. Funciona muy bien en sitios de
artículos de lujo.
Cuándo no: en cualquier elemento del diseño que tenga
como objetivo llamar la atención. Mucho gris puede
resultar aburrido.
56

57. Rosa
Expresa ternura, romance, feminidad, verdad, pasividad,
buena voluntad, salud emocional, cuidado, afecto, madurez
emocional, nutrición, sabor y olor dulce, delicadeza.
57

58. Rosa
Posiblemente se pueda considerar como una tonalidad del rojo, pero
sus asociaciones son distintas.
El rosa representa sofisticación, sinceridad, romance y amor. No tiene
las notas violentas del rojo, y puede ser bastante apacible. No puede
asociarse a ninguna cosa negativa.
Es un color difícil de aplicar en el diseño web pues evoca romanticismo
y feminidad y puede fácilmente derivar a tonos excesivamente
anticuados. Ideal para consumidoras jóvenes y cosmética.
Se suele asociar el rosa a feminidad. Transmite: amabilidad, cariño,
amor, protección, entrega, generosidad, inocencia, delicadeza,
creatividad o sinceridad.
Lo utilizaremos mucho para webs dedicadas a mujeres, venta de
productos para chicas y adolescentes, dulces o moda.
Cuándo usarlo: el rosa es óptimo para productos o
páginas dirigido a mujeres y chicas adolescentes, como
blogs de estilo de vida.
Cuándo no: el rosa fucsia puede resultar muy chillón, y
los tonos más claros pueden ser muy dulces o
sentimentales para algunas páginas.
58

59. Negro
Es un color elegante asociado con
poder, sofisticación, formalidad… Es un excelente color
para añadir algo de misterio a tu web, pero ¡cuidado!, que
puede relacionarse con sensación de depresión cuando se
aplica a grandes áreas. Por otra parte, un fondo negro mejora
la perspectiva y la profundidad.
59

60. Negro
En muchas teorías se ha indicado que el negro no es un color en sí.
Se dice que el negro más bien es una falta de color. Se encuentra en
el extremo opuesto de la tonalidad de grises. Simboliza el silencio, y el
misterio.
El color que sirve para otorgar elegancia y distinción. También se
asocia con la muerte, especialmente en los países occidentales.
Mucha cantidad de negro en una imagen puede sugerir depresión y
desesperación, así como soledad. Sin embargo, a pesar de todas las
connotaciones negativas, cuando se combina con otros colores, como
el oro, puede representar lujo o sofisticación.
El negro nos puede servir para desarrollar una web moderna y
elegante. Se utiliza mucho en negocios de marketing, moda, lujo,
cosmética.
Ten claro que no debes abusar del negro, si no quieres que tu web
parezca demasiado siniestra o malvada.
Cuándo usarlo: junto con el blanco es uno de los
colores más versátiles. Utilízalo para generar contraste
con el resto de colores de tu página web. Funciona muy
bien en sitios de moda, lujo y marketing.
Cuándo no: dependiendo de lo que busques, tendrás
que dosificarlo. El negro en exceso poder resultar
amenazante.
60

61. Blanco
El blanco está asociado con la pureza, la sencillez, la
frescura, la bondad, la inocencia, la limpieza, lo fácil. Este
color es ideal para usar como fondo, facilita la lectura y
destaca otros colores.
61

62. Blanco
Se trata de un color que cuando lo utilicemos para nuestra nueva
página de internet, transmitirá: bondad, pureza e inocencia, paz,
humildad, limpieza, nobleza, sinceridad o seguridad.
El blanco está asociado a la claridad y la perfección. Se utiliza mucho
para medicina, enfermería, odontología y todas las profesiones
relacionadas con la salud. También en webs sobre tecnología, ciencia
o para moda. Incluso para negocios de lujo.
En realidad como se suele combinar con más tonalidades, su
utilización no suele causar demasiados problemas.
Eso sí, se debe tener cuidado, porque mucho blanco puede indicar
insensibilidad; o que algo está vacío y le falta contenido.
Cuándo usarlo: junto con el negro es uno de los colores
más versátiles. Funciona muy bien en sitios
relacionados con la industria de la salud. Si lo
combinamos con ciertos colores, como el negro, el
dorado o el gris, también funciona genial en artículos de
lujo.
Cuándo no: dada su versatilidad, podemos utilizarlo en
todo tipo de páginas web. Es el comodín de la psicología
del color en el diseño web.
62

63. Uso del color corporativo entre algunas marcas conocidas
63

64. Colores según zonas

65. Cuando escojas un esquema de color para una web de ámbito internacional, tienes que tener en cuenta de que el
mismo color tiene distinto significado en diferentes culturas. Esto te evitará cometer graves errores.
Por ejemplo el color rojo:
 En china es el color de las novias, significa buena suerte, celebración
 Entre los indios Cherokee , significa triunfo, éxito
 En india: pureza
 En Sudáfrica: color de luto
 En oriente alegría, lo llevan las novias combinado con blanco
 En occidente: excitación, amor, pasión, amor, bloqueo (stop)
 En EEUU: Navidad (con verde), Día de san Valentín (con blanco)
 En Japón: vida
 Entre los judíos: sacrificio, pecado
 Entre los cristianos: sacrificio, pasión, amor
 En Feng Shui: Yang, fuego, buena suerte, respeto, protección, vitalidad, dinero, reconocimiento.
65

66. 66

67. 67

68. 68

69. 69

70. 70

71. 71

72. Usos del color en las web

73. Botón de llamada a la acción (CTA)
El naranja es el color predilecto para las llamadas a
hemos visto está muy unido al cambio, por lo que
para convertir.
Colores como el marrón o el gris, se sienten
lo que no llaman la atención, y colores como el rojo
demasiado agresivos.
El naranja en el punto intermedio perfecto.
73

74. Segunda llamada a la acción (CTA)
A veces en tu web, además de una primera llamada
necesitamos de otras secundarias como pueden ser
"leer más", "publicar comentario"...
En algunos casos podemos mantener el color
también podemos usar uno complementario al
más en consonancia con nuestro color corporativo.
Siempre que se cree contraste con estas llamadas a
un buen momento para introducir el color
74

75. Color de los enlaces
A menudo usamos el color corporativo para links o
página web, pero cuidado! Si tu color tiene fuerza y
alto contraste, enhorabuena, puedes utilizarlo.
En el caso de que esto no sea así, lo siento, pero
diseño diferente para aplicar a los enlaces.
Podemos subrayarlo o ponerle fondo pero siempre
cuenta que no podemos perder la legibilidad del
Colores como el amarillo o el verde claro no suelen
(aunque depende de la tonalidad)
75

76. Fondo de la web
Para el fondo de la web tenemos varias opciones,
podemos usar una textura o patrón o un fondo
Sin embargo, antes de tomar una decisión debes
mejor combinación entre texto y fondo, la que crea
una legibilidad más alta es la del texto en negro y
blanco.
Eso es así, por mucho que nos duela. Los patrones
úsalos siempre como fondo en una web en la que
sobre blanco, en un diseño de tarjetas por ejemplo.
De la misma manera, trabajar sobre fondos negros
una buena opción. La legibilidad del texto sobre
peor y la vista tienda a cansarse con más facilidad.
76

77. Footer o menú
Si nuestros colores web son el blanco y el negro,
ultimo en el footer o en el menú, lugares donde
palabras, que por ejemplo, como fondo para los
77

78. Lecturas recomendadas

79. TEORIA Y PRACTICA DEL COLOR
JOSE MARIA PARRAMON
Nº de páginas:
112
Editorial:
PARRAMON
Idioma:
CASTELLANO
Encuadernación:
Sin formato definido
ISBN:
9788434210219
Año de edición:
2009
Plaza de edición:
BARCELONA
Fecha de lanzamiento:
01/08/2009
79

80. EL ARTE DEL COLOR
JOHANNES ITTEN
Nº de páginas:
136
Editorial:
GUSTAVO GILI
Idioma:
CASTELLANO
Encuadernación:
Tapablanda
ISBN:
9788425232848
Año de edición:
2020
Plaza de edición:
BARCELONA
Traductor:
ISABELHERNÁNDEZ
Fecha de lanzamiento:
05/10/2020
80

81. PSICOLOGIA DEL COLOR: COMO ACTUAN
LOS COLORES SOBRE LOS SENTIMIEN
TOS Y LA RAZON
EVA HELLER
Nº de páginas:
288
Editorial:
GUSTAVO GILI
Idioma:
CASTELLANO
Encuadernación:
Tapa blanda
ISBN:
9788425219771
Año de edición:
2004
Plaza de edición:
BARCELONA
Traductor:
JOAQUÍN CHAMORRO MIELKE
Fecha de lanzamiento:
04/10/2004
81

82. COLORPEDIA
SEAN ADAMS
Nº de páginas:
256
Editorial:
PROMOPRESS
Idioma:
CASTELLANO
Encuadernación:
Tapa dura
ISBN:
9788416851546
Año de edición:
2017
Plaza de edición:
ESPAÑA
Fecha de lanzamiento:
05/09/2017
82

83. TEORIA DEL COLOR
JOHANNES PAWLIK
Nº de páginas:
176
Editorial:
PAIDOS IBERICA
Idioma:
CASTELLANO
Encuadernación:
Tapa blanda
ISBN:
9788449302152
Año de edición:
1996
Plaza de edición:
ES
Traductor:
CARLOS FORTEA GIL
Fecha de lanzamiento:
01/03/1996
83

84. WWW.COLOR: 300 USOS DEL COLOR
PARA SITIOS WEB
ROGER PRING
Nº de páginas:
194
Editorial:
GUSTAVO GILI
Encuadernación:
Tapa blanda
ISBN:
9789688873854
Año de edición:
2001
Plaza de edición:
MEXICO
Fecha de lanzamiento:
02/04/2001
84

85. César Jodra
jodra.com