Duotone image as background

How to use it

Use only two tones of colour for your hero image or other background image. The example below was generated using an online tool, but there are plenty of Photoshop tutorials for making this effect yourself.

When to use it

If you have a complicated or busy background image, in your hero section or somewhere else that you're overlaying text or other elements, you can make the image a duotone image. This means that it only uses two contrasting colours to make up the entire image. In the example below the image on the left is the original, and the image on the right shows the duotone effect, using only a green and dark blue combination.

This helps the content sitting on top of the background image stand out, and makes it easier to read, but doesn't hide any of the detail of the image - just the colour information.

What to watch out for

Make sure that the colours you choose for the duotone effect will have enough contrast with the foreground content, and won't interfere with the user's ability to see it.

Examples

Example