Web Color Schemes Centered on Peacock Blue: Tips for Pairing Photos and Text

Peacock blue is a deep blue-green reminiscent of a peacock’s feathers. It can work well alongside photography, but when a photo already contains plenty of blue or green, the boundary between the two may become unclear. Text placed directly over a photo can also be difficult to read. Using a website’s hero section (the area first seen when a page opens) as an example, this article explains how to give peacock blue a leading role without overpowering the photograph.

Give peacock blue a clear role before deciding how much to use

There is no single, universally fixed color code for peacock blue. For this example, we will use the fairly deep blue-green ■#006875. HEX is a way of expressing web colors with a # sign followed by hexadecimal digits, using numbers and the letters A–F.

If peacock blue fills the headings, header, and buttons all at once, those colored areas may draw more attention than the photograph. Start by assigning it a specific job, such as the main heading and primary button, and leave light-colored space around the image. Use less of the blue-green when it already appears prominently in the photograph; with warmer images featuring wood or fabric, a larger heading band may work well.

Two color layouts for different kinds of photos

The following five colors can serve as a starting palette. Their placement, rather than the number of colors, changes with the photograph.

• Peacock blue ■#006875: headings, header, or primary button
• Warm ivory ■#F7F4EE: page background and space around copy
• Dark gray ■#25353A: paragraphs and smaller information
• White ■#FFFFFF: text on peacock-blue bands or buttons
• Pale blue-green gray ■#E5EEEB: an information panel beneath the photo

For photos with plenty of blue or green, such as water or plants

Place the photo on the right and the text on an ivory ■#F7F4EE area to its left. Use peacock blue ■#006875 for the heading and dark gray ■#25353A for the paragraph. Give the primary button a peacock-blue ■#006875 background and white ■#FFFFFF text. Because the words sit outside the photo, their legibility does not depend on whether the water or leaves behind them are light or dark. This also avoids adding another large blue-green block beside an already blue-green image.

For warmer photos of wood products or interiors

With photographs dominated by warm browns, try a peacock-blue ■#006875 heading band across the top, with white ■#FFFFFF heading text. Keep the photo in its own area below that band. Place supporting copy in a pale blue-green gray ■#E5EEEB panel, using dark gray ■#25353A text. The difference between the cool heading band and the warm photograph creates a section boundary without changing the photo’s original colors.

Check text contrast before placing words over a photograph

A contrast ratio describes the difference in relative lightness between text and its background. In this palette, peacock blue ■#006875 against ivory ■#F7F4EE measures about 5.91:1; dark gray ■#25353A against ivory ■#F7F4EE measures about 11.60:1; and white ■#FFFFFF against peacock blue ■#006875 measures about 6.49:1. All three exceed the 4.5:1 threshold for normal-sized text in WCAG 2.2.

However, a photograph changes in brightness from place to place, so white text directly over a photo is not necessarily readable. If text must overlap an image, place a solid, opaque peacock-blue ■#006875 panel behind the words, or separate the image and copy into their own areas. Also check the mobile layout: cropping the photograph can change what appears behind overlaid text.

HueRoll lets you compare a selected color with white and black to inspect their contrast ratios. For ivory or any other background color, calculate that specific pair separately and check it with the actual font size and placement.