Al planificar el aspecto de su nuevo sitio web empresarial, tiene que decidir los colores que desea utilizar. Para causar un impacto positivo en los visitantes e influir en más ventas, su paleta de colores debe reforzar su marca, hacer que su sitio sea fácil de leer y navegar, y -sobre todo- tener un buen aspecto.
Pero, encontrar colores que «se vean bien» juntos no es tan fácil como parece. Son muchos los factores que contribuyen a cómo procesamos el color a nivel visual y emocional. Esto hace que sea difícil crear una combinación de colores efectiva y original para un sitio web desde cero, incluso si tenemos algún sentido intuitivo de qué combinaciones de colores funcionan bien y cuáles no.
Por suerte, no es necesario reinventar la rueda de colores para construir un gran sitio web. En este post, hemos elaborado una lista de las 21 mejores combinaciones de colores utilizadas en el diseño web que puedes probar tú mismo. De esta manera, puedes saltarte los debates de los compañeros de trabajo sobre si el verde y el naranja pertenecen a tu página de inicio, y estar un paso más cerca del lanzamiento.
- Rojo coral y vikingo
- Bahía Este, Moon Raker, y Ghost
- Viking y Karry
- Tan Hide, Vermilion, y Acapulco
- Botticelli, Nepal, y Ship Gray
- Verde Pérsico, Vista Blue, Mauvelous, y Sunflower
- Amarillo Marigold, Ice Cold, y Vista Blue
- Spice, Tuscany, Jaffa, Calico, y Yellow Metal
- Alto, Mandys Pink, Chestnut Rose, Stiletto
- Swiss Coffee, Schooner, Pharlap, y Mine Shaft
- Tulip Tree y Punga
- Swans Down, Monte Carlo, y Observatory
- Your Pink, Bittersweet, y Alizarin Crimson
- Pampas, Your Pink, y Melanie
- Mountain Meadow y Magnolia
- Terracotta, Gun Powder, Moon Raker, Acapulco, y Manhattan
- Bittersweet, Cosmos, Nile Blue y Seagull
- Malibú, Aero Blue, Picton Blue y Boston Blue
- Navajo White y Vivid Tangerine
- Dove Gray y Aero Blue
- Milano Red y Black Pearl
Por supuesto, un grupo de misteriosos nombres de colores no es de mucha ayuda sin verlos en acción. (¿Qué es «Pharlap», de todos modos?)
Así que, para cada esquema, he proporcionado un ejemplo visual. Todos los ejemplos han sido extraídos de sitios web aclamados por su atractivo visual. Siéntase libre de usar estos sitios como inspiración para su paleta de colores, diseño y estética general.
Rojo Coral y Vikingo
Códigos hexadecimales: #F93943, #7EB2DD
-3.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-3.jpeg)
Fuente de la imagen
Bahía del Este, Moon Raker y Ghost
Códigos Hex: #424874, #DCD6F7, #CACFD6
-Aug-13-2020-01-02-53-70-PM.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-Aug-13-2020-01-02-53-70-PM.jpeg)
Fuente de la imagen
Viking y Karry
Códigos hexadecimales: #7EB2DD, #FFE8D4
-1.png?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-1.png)
Fuente de la imagen
Piel de Bronce, Bermellón y Acapulco
Códigos Hex: #F98866, #FF420E, #80BD9E
-Aug-13-2020-01-02-55-13-PM.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-Aug-13-2020-01-02-55-13-PM.jpeg)
Fuente de la imagen
Nepal, Ship Gray y Botticelli
Códigos hexadecimales: #90AFC5, #3E363F, #C4DFE6,
-Aug-13-2020-01-02-54-32-PM.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-Aug-13-2020-01-02-54-32-PM.jpeg)
Fuente de la imagen
Verde Persa, Azul Vista, Mauvelous y Girasol
Códigos hexadecimales: #00A6A6, #98DBC6, #F18D9E, #E6D72A
-Aug-13-2020-01-02-54-49-PM.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-Aug-13-2020-01-02-54-49-PM.jpeg)
Fuente de la imagen
Amarillo Caléndula, Frío Hielo, y Azul Vista
Códigos Hex: #F6E278, #BCF4F5, #98DBC6
-Aug-13-2020-01-02-54-79-PM.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-Aug-13-2020-01-02-54-79-PM.jpeg)
Fuente de la imagen
Picante, Toscana, Jaffa, Calicó y Amarillo Metal
Códigos hexadecimales: #6E352C, #CF5230, #F59A44, #E3C598, #6E612F
-4.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-4.jpeg)
Fuente de la imagen
Alto, Mandys Pink, Chestnut Rose, y Stiletto
Códigos Hex: #D9D9D9, #F5B3B4, #D15656, #94353
-1.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-1.jpeg)
Fuente de la imagen
Café Suizo, Goleta, Pharlap, y Pozo de la Mina
Códigos Hex: #E1DCD9, #8F8681, #A67F78, #3E3C3C
-Aug-13-2020-01-02-53-32-PM.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-Aug-13-2020-01-02-53-32-PM.jpeg)
Fuente de la imagen
Árbol del Tulipán y Punga
Códigos Hex: #F2AB39, #563C16
.png?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update).png)
Fuente de la imagen
Swans Down, Montecarlo y Observatorio
Códigos hexadecimales: #D1EDE1, #7BC5AE, #028C6A
-Aug-13-2020-01-02-53-44-PM.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-Aug-13-2020-01-02-53-44-PM.jpeg)
Fuente de la imagen
Su rosa, agridulce y carmesí de alizarina
Códigos hexadecimales: #FFC2C3, #FE7773, #EA3238
-Aug-13-2020-01-02-54-95-PM.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-Aug-13-2020-01-02-54-95-PM.jpeg)
Fuente de la imagen
Pampas, tu rosa y Melanie
Códigos hexadecimales: #,F1EBE9, #FFC2C3, #E6CBDD
-Aug-13-2020-01-02-55-49-PM.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-Aug-13-2020-01-02-55-49-PM.jpeg)
Fuente de la imagen
Primavera y Magnolia
Códigos hexadecimales: #1B998B, #F8F1FF
-Aug-13-2020-01-02-55-31-PM.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-Aug-13-2020-01-02-55-31-PM.jpeg)
Fuente de la imagen
Terracotta, Gun Powder, Moon Raker, Acapulco y Manhattan
Códigos hexadecimales: #E07A5F, #3D405B, #DECDF5, #81B29A, #F2CC8F
.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update).jpeg)
Fuente de la imagen
Dulce de leche, Cosmos, Azul Nilo y Gaviota
Códigos Hex: #FE7773, #FFD8D8, #194049, #87CEEB
-Aug-13-2020-01-02-53-56-PM.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-Aug-13-2020-01-02-53-56-PM.jpeg)
Fuente de la imagen
Malibú, Azul Aero, Azul Picton y Azul Boston
Códigos hexadecimales: #4DD7FF, #AEFFF1, #32C3EE, #3B8FA1
-Aug-13-2020-01-02-54-03-PM.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-Aug-13-2020-01-02-54-03-PM.jpeg)
Fuente de la imagen
Blanco Navajo y Mandarina Vivo
Códigos Hex: #FFE0AC, #FF8C8C
Gris Paloma y Azul Aero
Códigos Hex: #666666, #B5FFE9
-2.jpeg?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-2.jpeg)
Fuente de la imagen
Rojo Milano y Negro Perla
Códigos Hex: #BA1200, #031927
-2.png?width=750&name=The%2021%20Best%20Color%20Combinations%20to%20Try%20on%20Your%20Website%20%5BBookmarkable%20Guide%5D%20(update)-2.png)
Fuente de la imagen
Añadir un toque de color
Al principio, podría parecer que encontrar la combinación de colores adecuada debería ser fácil e intuitivo. Después de todo, vemos usos efectivos del color a nuestro alrededor, desde el diseño de marcas, pasando por el arte y el entretenimiento, hasta los trajes de moda. La verdad es que todos estos diseños del mundo real han sido cuidadosamente planificados, probados y, al menos parcialmente, inspirados por diseños que vinieron antes.
Crear el diseño de color perfecto para su sitio web es un reto. Pero, si se ciñe a uno de los esquemas que le he proporcionado, su sitio servirá como otro buen ejemplo de diseño web de calidad en acción.