{{ searchResult.published_at | date:'d MMMM yyyy' }}

Loading ...
Loading ...

Enter a search term such as “mobile analytics” or browse our content using the filters above.

No_results

That’s not only a poor Scrabble score but we also couldn’t find any results matching “”.
Check your spelling or try broadening your search.

Logo_distressed

Sorry about this, there is a problem with our search at the moment.
Please try again later.

Earlier this year I highlighted monochromatic design and hypercolour as two of my 18 web design trends for 2014. There is a third way that lives inbetween these two approaches: choosing a limited palette and using different shades of colour.

Designers who go down this route typically choose one vibrant colour (and various shades thereof) and offset it against a neutral background. Sometimes two (or more) complementary colours come into play. 

I thought I'd share a few examples, to hopefully provide you with a little visual inspiration. Many of these examples are, to my eye, rather elegant. 

Select Device

Corey Haggard's 'Select Device' works through a forest green colour palette...

Qatar Airways

Yasser Achachi's elegant design for this mobile app is one of my favourites. So pretty, and with such a limited palette. Shades of dark pink and crimson look lovely. 

Colour Wheel

Frantisek Krivda's colour wheel appears to be diving to the bottom of the ocean...  

GEO Project

Alexander Zaytsev uses the colours of a hazy sunset.

Polaroid

This monochromatic app design concept for Polaroid is absolutely gorgeous. The various shades of grey are offset with colour from the product imagery. A real shame that it didn't get past the concept stage, but top marks to Mikey Hu. 

Events Newsfeed

Alex Strasman uses a card-coloured shades of beige for the background, and darker shades for the text and iconography. A little texture works well here too.  

Alpiner

Rajmund Kuhn dives into the green and blue spectrum, and adds a little fade.

SJQHUB

A data visualisation app that seemingly mirrors the background imagery, along with more shades of grey and a dollop of fade.

Near Guide

This golf course finder app primarily uses shades of peppermint, offset with grey, while the scorecard switches into full-on hypercolour mode. 

Airbank

Tomas Jerabek's concept for think banking app cycles through shades a few of green.

Timezone

Another app concept, which uses oranges and purples for the look and feel. 

Weather App

Amine Mounazil uses the colours of a hot sunny day for this weather app UI. 

Weather App - Spring / Fall edition

Meanwhile, it appears to be colder in France...

Lifebookie

Here's another lovely peppermint-based palette.

What do you think? Have you seen any other examples of visual design based around a limited colour palette? Do leave a comment below.

Chris Lake

Published 27 March, 2014 by Chris Lake

Chris Lake is CEO at EmpiricalProof, and former Director of Content at Econsultancy. Follow him on Twitter, Google+ or connect via Linkedin.

582 more posts from this author

Comments (5)

Pete Austin

Pete Austin, CTO at Fresh Relevance

Very good designs. I especially like how the fonts are readable, in contrast to a lot of other "good" designs.

BTW there's a bug on the "Qatar Airways" UI. The return journey on the lower of their two tickets indicates that "BEY" means "algiers" and "ALG" means beirut. Good design is no substitute for testing.

over 2 years ago

Pete Austin

Pete Austin, CTO at Fresh Relevance

Just looked through them again and saw "Weather App". The exception that proves the rule about readable fonts!

White on light yellow is not good. The illustrates a problem with using shades of color, rather than different colors, because if you use the full range from light-to-dark then you're going to have to switch from dark-to-light text at some stage and that complicates the design.

over 2 years ago

Avatar-blank-50x50

Christopher Payne

First off, designs are great. Why can't app makers utilize this look more often. I love it!

As Pete Austin noted, the white on the bright yellow is harder to read for those temperatures but if the color pallet was shifted as the brightest color being the yellow Tuesday and the transition to cold being a mid point between that and the green Tuesday, I think readability would do just fine for the majority of situations and users.

Another idea would be to have the background change to a default color when the area is pressed for easier reading on those temperatures hues. A long press could open the details (hour by hour / percent chance of precipitation). Then send me a link to buy your app and you're complete. Also, this weather app idea would be awesome as an full-screen android widget.

over 2 years ago

Avatar-blank-50x50

Vicki

The new ideas that designers come up with these days never cease to amaze me ... I try so hard to find designers of this skill level for our buisness ... thanks for showing off a high standard to shoot for!

over 2 years ago

Avatar-blank-50x50

Yasser Achachi, Designer at isorun

Thank You for listing My work here (QATAR FLIGHT APP), and BTW, i updated with fixing the bug @pete Austin
https://www.behance.net/gallery/9517761/Flight-Search-App-IOS-7

over 2 years ago

Comment
No-profile-pic
Save or Cancel
Daily_pulse_signup_wide

Enjoying this article?

Get more just like this, delivered to your inbox.

Keep up to date with the latest analysis, inspiration and learning from the Econsultancy blog with our free Daily Pulse newsletter. Each weekday, you ll receive a hand-picked digest of the latest and greatest articles, as well as snippets of new market data, best practice guides and trends research.