11 color palettes for interface designs

Choosing a color palette for a new interface is as important as choosing the icons that you’re going to use. The color combination between the background and the interaction elements will help you to tell the story behind the website or application that you’re designing.

But how do you choose a color palette? Start off by looking for inspiration and references. You probably came across this blog for that very same reason, to find the best color palettes for interface designs.

So, here we’ll show you 11 interface designs with interesting color palettes. Draw inspiration from these designs to create your own color combinations.

Innocent Drinks – Website

Innocent Drinks Color Palette

When you visit the Innocent Drinks website, you’ll find that, just like their juices, it’s full of color. But in the section where they share their story, they use the brand’s original colors. This interface is based on three colors, the maroon of their logo, a pink in a raspberry shade, and a white background. It is also complemented by another two tones: blue and blueish green.

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

Neverland Agency – Website

Neverland Agency Colors Palette

The color palette used on the website of the Neverland agency greets you like a mysterious doll house. First, a pale pink that then leads you to discover the brand’s other colors: bright blue, turquoise with a gradient effect, and just a touch of black to round it all off. As you venture further into the website, you’ll discover other colors such as orange and green. The base colors are white and cream.

https://neverland.agency/

Barge 166 – Website

Barge166 Colors Palette

The first thing that may strike you about Barge 166’s website is its dark gray background and mustard-colored lettering. This makes for a spectacular combination, but there was something missing. The interface designers complemented the palette with a raspberry pink for the buttons and other details. White is not used for the sections that contain a greater amount of information, but rather a cream tone with a vintage look that combines perfectly with the other colors.

https://barge166.com/

Eco Recycling – App

Eco Recycling App Colors Palette

This concept for a recycling and reuse app uses the classic colors associated with organic or ecological designs: green and brown. In this case, the interesting thing about this combination is the texture of the green background. To create more depth, they added another more intense green and a lighter brown than the main one used. The light colors are white and a somewhat transparent grayish green.

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

Maze Podcast – Website

Maze Podcast Web Colors Palette

The first color that will catch your eye on this interface is blue. It’s the most eye-catching color compared to the two pinks, the light mustard yellow, and the green. This website is for the Maze podcast, so it has certain differences. Guess what Maze’s main color is! Exactly! It’s blue. They add depth to this design with classic black and white.

https://maze.co/podcast/

Project Steps – App

Project Steps App Colors Palette

Taking the circular design of Apple Watch as inspiration, this health app uses neon colors with a gradient effect. The yellow buttons are easy to see, and the deep green background, also with a gradient effect, has a profound and pleasant feel. All the text has an almost white tone, which is easy to read and is not irritating to the eyes. The nicest feature are the gradients used for the bar graphs displaying individual results.

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

GOYA – Interactive Installation

Goya Instalation Project Colors Palette

This interactive interface for a GOYA installation at the Museum of Agen uses colors that are reminiscent of the interfaces seen in science fiction movies. The combination of grayish blues, soft turquoise, yellow and fuchsia complete the color palette of this interface. Goya’s paintings on top of these colors make for a good combination, making the installation a fun experience.

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

Ruggero Corsini – Website

Ruggeri Corsini website Colors Palette

The color combination on the Ruggero Corsini website is an excellent example of how a location’s basic colors can be used to create a visual brand. In this case, Ruggero Corsini is an estate of vineyards, and the interface colors represent this reality. Besides the almost white background and the almost black font, the accent colors are the green of the leaves and the yellow of the grapes.

https://ruggericorsini.it/

Hobbies – App

Hobbies App Colors Palette

This Hobbies app has an interface with very bright colors. Pink, violet and yellow combine perfectly with the skin color of the characters, in addition to black and white details. There’s no main color in this palette, they all share the limelight! And, as is not always the case, this time it does work. For several different strong colors to complement each other and not compete, they must be combined wisely, checking their possibilities and ensuring they work. In this case, the palette works perfectly.

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

Your full-color interfaces with Flaticon

Did you know that when you use icons or Flaticon UIcons, you can customize the color however you want? This way, you can use any icon regardless of the palette of your interface. You simply have to access the Flaticon icon editor and enter the HEX number of the color you need. Likewise, if you’re designing a UI with Figma, you’ll be able to use the Flaticon icons in an SVG file and change the color until obtaining the perfect tone.