11 paletas de color para diseños de interfaz

Elegir la paleta de colores para una nueva interfaz es tan importante como elegir los iconos que vas a utilizar. La combinación de colores entre el fondo y los elementos de interacción te ayudará a contar la historia detrás de la página web o la aplicación que estás diseñando.

¿Pero cómo se elige una paleta de colores? Para empezar, hay que buscar inspiración y referencias. Probablemente, llegaste a este blog por esa misma razón, para encontrar las mejores paletas de colores para diseños de interfaz.

Bueno, aquí te mostramos 11 diseños de interfaz con paletas de colores interesantes. Inspírate en estos diseños para crear tus propias combinaciones de color.

Innocent Drinks – Web

Paleta de color de la web de Inocent Drink

Cuando entras a la página web de Innocent Drinks descubres que, al igual que sus zumos, está llena de colores. Pero en la sección donde comparten su historia emplean los colores originales de la marca. Esta interfaz está basada en tres colores, el granate del logo, un rosa en tono frambuesa y el blanco del fondo. Y se apoya con dos tonos complementarios de azul y verde azulado.

https://www.innocentdrinks.co.uk/a-bit-about-us

Agencia Neverland – Web

Paleta de color de la agencia Neverland

La paleta de colores en la página web de la agencia Neverland te acoge como una casita de muñecas llena de misterios. Para empezar, un rosa pálido que te lleva a descubrir los demás colores de la marca: azul brillante, turquesa en degradé y un toque de negro para completar. Más adentro de la página descubres otros colores como naranja y verde. Los colores de base son blanco y crema.

https://neverland.agency/

Barge 166 – Web

Paleta de color de la web Barge166

Lo primero que llama la atención en la página de Barge 166 es el fondo de color petróleo y las letras mostazas. La combinación es espectacular, pero algo le faltaba. Los diseñadores de la interfaz completaron la paleta con un rosa frambuesa para botones y otros detalles. Para las secciones de más información no se usa el color blanco sino un tono crema de calidad vintage que encaja perfectamente con los demás colores.

https://barge166.com/

Eco Recycling – App

Paleta de color de la App Eco Recycling

Este concepto para una aplicación de reciclaje y reutilización emplea los colores clásicos de diseños orgánicos o ecológicos: verde y marrón. Lo interesante de esta combinación en este caso es la textura del verde de fondo. Para crear más profundidad, añadieron otro verde más intenso y un marrón más claro que el principal. Los colores claros son blanco, un verde gris con bastante transparencia.

https://dribbble.com/shots/18575810-Eco-Recycling-App

Maze Podcast – Web

Paleta de color de la web de Maze

El primer color que te llama la atención primero en esta interfaz es el azul. Es el color más llamativo en comparación con los dos rosas, amarillo mostaza claro y el verde. Esta página es para el pódcast de Maze y entonces tiene algunas diferencias. ¡Adivina cuál es el color principal de Maze! Exacto el azul En este diseño añaden profundidad con blanco y negro, clásicos.

https://maze.co/podcast/

Project Steps – App

Paleta de color de la App Steps

Tomando como inspiración el diseño circular del Apple Watch, esta aplicación para la salud emplea colores neón en degradado. Los botones amarillos son fáciles de ver y el fondo verde intenso, también en degradado, se siente profundo y agradable. Todo el texto es de un tono casi blanco que es fácil de leer y no molesta la vista. Lo más lindo son los degradados en los diagramas de barras con los resultados personales.

https://www.behance.net/gallery/145996683/Project-Steps-App

GOYA – Instalación Interactiva

Paleta de color del Proyecto Goya del Museo de Agen

Esta interfaz interactiva de una instalación de GOYA en el Museo de Agen utiliza colores reminiscentes de las interfaces que vemos en películas de ciencia ficción. La combinación de azules grises, turquesas suaves, amarillo y fucsia completan la paleta de colores de esta interfaz. Los cuadros de Goya sobre estos colores combinan bastante bien y hacen de la instalación una experiencia divertida.

https://www.behance.net/gallery/29460691/GOYA-Interactive-installation

Ruggero Corsini – Web

Paleta de color de la web de Ruggeri Corsini

La combinación de colores de la página web de Ruggero Corsini es un excelente ejemplo de cómo se pueden emplear los colores fundamentales de una localización para crear una marca visual. En este caso, Ruggero Corsini es una finca de viñedos y los colores en la interfaz representan esa realidad. Aparte del fondo casi blanco y la tipografía casi negra, los colores de acento son el verde los las hojas y el amarillo de las uvas.

https://ruggericorsini.it/

Hobbies – App

Paleta de color de la App Hobbies

Esta aplicación de Hobbies tiene una interfaz con colores muy llamativos. El rosado, violeta y amarillo combinan perfectamente con el color de la piel de los personajes más los detalles blancos y negros. ¡En esta paleta no hay color principal, todos compartenla atención! Y, como no siempre sucede, esta vez sí que funciona. Para que varios colores fuertes se complementen y no compitan, hay que combinarlos con criterio y comprobar sus posibilidades y funcionamiento. En ese caso, la paleta funciona perfectamente.

https://dribbble.com/shots/18562976-Hobbies-app

Tus interfaces a todo color con Flaticon

¿Sabías que cuando usas iconos o Uiconos de Flaticon, puedes personalizar el color como quieras? Así podrás utilizar cualquier icono sin importar cuál es la paleta de la interfaz. Solo tienes que ingresar el editor de iconos en Flaticon e ingresar el número HEX del color que necesitas. De igual manera, si estás diseñando una UI con Figma, podrás utilizar los iconos Flaticon en archivo SVG y cambiar el color hasta conseguir el tono perfecto.