One of the most popular website design trends for the last several years is the use of hero images, large images used to span much of all of the screen. As time progressed since hero images first rose to popularity, though, we’ve noticed hero images used in a specific way: with a color laid over the image. Color overlays are frequently used when text is laid over an image, as the solid color makes the text easier to read. You’ve likely noticed the technique used in several places on our site, but it has gained popularity across the web more recently as well.
Here’s a look at how color overlays are used across the web:
Dark overlays are becoming increasingly common. In addition to making text easier to read, dark images with white or light-colored text are also easy on the eyes, especially at night. Dark themes are becoming more common on mobile phone apps as well because the use of solid black pixels saves battery life on OLED displays. If your site has a lot of mobile visitors who stay on your site for long periods of time, this could be another added benefit of using a dark overlay.
De Buris is an Italian winery with a spectacular website. In addition to the use of a dark overlay over several images on their home page, the site makes use of interesting scrolling effects as well.
The Lafayette Grande is a wedding venue in Pontiac, Michigan. It makes use of an immersive hero image at the top of the home page covered with a mostly black overlay. This allows the picture of the venue to show through while making the white text easy to read.
Julius Silvert is an American food distributor. The company’s website uses a hero video overlaid with a semi-transparent black. The site uses images and video extremely well, taking full advantage of the photogenic nature of their product.
Bright-colored overlays are also popular, adding a splash of color to a site while maintaining text legibility.
Gizmo Experience is a French real estate website. Even if you don’t speak French, it’s worth checking out the site just to see the way they use vivid colors. The top of the home page uses a gray overlay over a hero video, and lower sections of the site use bright colors — a golden yellow, a light blue, and an orange hue — over pictures with text overlaid. It’s a beautiful, creative look.
Tens is a sunglasses company. The use of a bronze color simulates the color of their lenses, subtly reinforcing the effects of their product.