Thursday , 22 March 2018
Breaking News

23 examples of duotones and colour filters in web design

I’ve rounded up 23 examples of websites using duotones (or sometimes gradients, colour filters or a classy monotone / grayscale).

There are various reasons these effects abound, notably allowing informational websites to use authentic photography without distracting from navigational elements or important copywriting.

Duotones can establish a colour theme for an agency website, for example, and help to liven up what can sometimes be quite basic website designs.

Before you scan through these examples for inspiration, why not bookmark the rest of our web design trends for 2017, including reduced primary navigation, ditching the hamburger menu, and meaningful motion.

Chris Redshaw

Look at Chris Redshaw! What does he do? Presumably something with design and direction. Whatever he does, I’m convinced he does it well, given how beautiful he looks under this yellow filter.

chris redshaw


Evoluir’s website isn’t exactly to my taste, as it uses some tricksy scrolling and ‘floaty’ geometric shapes.

However, the duotone backgrounds used are certainly impactful, conveying plenty of humanity without being too busy.





Showcasing agency work can lead to slightly messy web design, as different logos and creative clash, whether on the same page or on a slider.

LPK mitigates this effect by applying colour gradients, duotones and filters to its slider. I think it creates a high quality aesthetic with photography that might otherwise underwhelm.




Social Chain

Social Chain is a great example of an agency using simple duotone background images to give that ‘print’ feel to a basic hamburger and scroll website.

The website’s homepage goes further and uses duotone video of agency staff larking about, helping to paint the picture of a social agency that has fun.

social chain


A simple grid of squares makes a very cool navigational aid, especially painted in apple red with alternate squares carrying colour-filtered photographs of each city.

host students

host students

Andover Fork Truck Services

Who doesn’t love a fork truck? And who doesn’t love a splash of mint green?

Andover Fork Truck Services livens up a perfectly serviceable black and white background image with some on-brand colouring.

andover trucks

Coup de Coeur

A pink and red duotone used on homepage and across artist images perfectly complements the Coup de Coeur brand (which I think means ‘crush’).

coup de coeur

coup de coeur


An agency once again using a duotone to give an instant impression of mythic creativity.


Jargon Free Fridays

Duotone-tastic, these backgrounds give full force to the central message on the page.

jargon free fridays

jargon free fridays

Das Bevo

With its jaunty autoplay sound and animated sails, this website for a windmill events venue is not everyone’s cup of tea.

I loved it, and not just for the colour filter applied to both windmill and moustachioed fella.

Venue websites can often seem a little anaemic, failing to give a sense of fun – none such accusation here.

das bevo

das bevo

Daniel Marshall Architects

I love this website. DMA’s projects scroll by in elegant grayscale, with a mouse rollover revealing them in vivid colours.

Forgive me for not making a GIF, just click through and have a play yourself. A wonderful way to use an elegant restrained pallette whilst livening up browsing.



Adison Partners

Another slider given some pep with a blue-purple filter.

adison partners

adison partners


No colour here, but an interesting example of a video background in low-fi black and white.

Though video backgrounds are a divisive element of homepage design, in this case the company is a video production company, and therefore this compromise makes a lot of sense.

A quicker loadtime and less intrusive movement come from this stripped back video style. Clickthrough to view.



This Dutch agency uses neon colour gradients, giving the bold black header copy maximum punch.



One Republic

I think this is some kind of band that the kids like. And why wouldn’t they, given the band’s website and its use of colour filters and gradients?

one republic

Winter Capital

Winter Capital is another professional website that confers status with the use of black and white background images, this time using a subtle split-screen filter.

winter capital


Adaptive uses a dark blue filter on its header, with white text and white button sharply picked out.


Semu Design

Grey sophistication.

semu design

Lipman Burgon

A simple black and white image gives Lipman Burgon & Partners’ website a veneer of gravitas.



Another very subtle and simple way of jazzing up a page with one primary use and search field. The image doesn’t have to be all-singing, all-dancing to make a difference.


Owen O’Donell

Owen’s site has one big call to action and a hamburger menu. The chunky text says it all, ‘developer’, and the black and white background lends some personality.


Chinatown London

The last of our black and white examples. A big header like this sets the tone before the user delves into detail, further down the scrolling homepage or in the header menu.

chinatown london


Pink for the win.


Ben Davis

Published 17 January, 2017 by Ben Davis @ Econsultancy

Ben Davis is a senior writer at Econsultancy. He lives in Manchester, England. You can contact him at [email protected], follow at @herrhuld or connect via LinkedIn.

942 more posts from this author

1 comment
Web Design, Web Design Trends, Colour, Duotones, Customer Experience