Today I want to share some insights about a technique that has become increasingly popular in web design: duotone.
What is duotone?
Put simply, duotone refers to the creation or reproduction of images by removing midtones—what used to be the middle gray in analog photography—and highlights.
Most commonly, duotone designs feature shades of blue, brown, red, and yellow.
Of course, as designers, we can choose whichever colors best suit our web design projects, and that’s exactly what’s happening today.
Here are a few websites where images and illustrations are clearly influenced by this creative technique.
1. Adidas Football
The main aesthetic of the Adidas website campaign is built around fullscreen duotone imagery.
The visuals are paired with matching backgrounds, creating a striking atmosphere that delivers the impact the sports brand was aiming for.
2. Mirage Festival
The Mirage Festival website features a bold and daring design that sets it apart from other websites.
Its visual identity is defined by a red and blue duotone palette that transforms the imagery throughout the site.
3. Fjord Trend
This example demonstrates a more subtle use of duotone, applying the technique to both images and backgrounds.
The result gives the web design an extra boost, reinforcing its philosophy and creating strong contrast with the finer details.
4. Triple 9
Duotone is also widely used in film and video, enriching the dialogue between image and viewer, and adding drama, intensity, and raw emotion.
5. La Marine Nationale on Board Careers
This example focuses on illustration rather than photography. In this web design, the creator uses duotone illustration—various shades of red and white—to highlight the website’s unique character.
Ultimately, duotone comes in many forms. It can be bold, aggressive, dramatic, or the complete opposite.
It’s worth getting to know this technique—knowledge always brings new opportunities, whether to use it, reject it, or simply learn from it.