Bordeaux and Gray Color Scheme Examples: How to Create a Calm Look and Visual Contrast

Bordeaux and gray can create a restrained, polished color scheme without adding many colors. Yet using two dark colors across large areas can make a layout feel heavy, while covering too much of the page in bordeaux can overwhelm the message. Using a website announcement banner as an example, this guide shows how to give the background, headings, body text, and buttons different jobs.

Let gray organize the space and reserve bordeaux for emphasis

Bordeaux is a deep red with a slightly purplish character. Using gray for the larger surfaces and reserving bordeaux for headings or an important sign-up button helps establish an information hierarchy without making multiple strong colors compete.

Gray does not need to be a single shade. Light gray can provide breathing room behind content, while dark gray works for body text. Rather than giving bordeaux and charcoal equal amounts of space, separate them with a light background so each has a clearer outline.

Choose the HEX codes—the format that represents a web color with a # followed by six hexadecimal characters—as part of the finished composition. A color that looks appealing alone can behave differently depending on its neighbors and the area it occupies.

Two ways to use the colors in an announcement banner

Example 1: A light gray background for a softer presentation

• Overall background: light gray ■#F2F0F1
• Card holding the information: white ■#FFFFFF
• Heading color and sign-up button fill: bordeaux ■#7A243B
• Body text: charcoal gray ■#353238
• Supporting text: medium gray ■#68636A
• Button text: white ■#FFFFFF

Place a white card over the pale gray background and use bordeaux for the heading and one primary action. Keep the explanation in dark gray, so the reddish accent belongs to the information that matters most. Make supporting text less prominent with size and placement as well as color; do not fade it until it becomes difficult to read.

Example 2: A charcoal heading band above lighter content

• Upper heading band: charcoal gray ■#353238
• Text in the heading band: white ■#FFFFFF
• Lower information area: light gray ■#F2F0F1
• Heading text and button fill in the lower area: bordeaux ■#7A243B
• Body text in the lower area: charcoal gray ■#353238
• Text on the bordeaux button: white ■#FFFFFF

The dark upper band introduces the message; the lighter area below carries the details and sign-up action. Keep bordeaux in that light area rather than layering it directly over the charcoal band. When the two dark colors touch, their boundary is subtle. A light section between them makes the division more apparent.

Check text contrast and the boundaries between colors

A contrast ratio measures the difference in relative brightness between adjacent colors. In the first example, bordeaux ■#7A243B against white ■#FFFFFF has a ratio of about 9.80:1. Charcoal gray ■#353238 against light gray ■#F2F0F1 measures about 11.12:1, and the medium gray ■#68636A against that same light gray measures about 5.17:1. Each exceeds the 4.5:1 threshold for regular text at WCAG Level AA. WCAG stands for the Web Content Accessibility Guidelines, which set accessibility criteria for web content.

In contrast, bordeaux ■#7A243B and charcoal gray ■#353238 have a ratio of only about 1.29:1. Do not rely on that pair alone to distinguish meaningful boundaries or carry text. Review font size and weight, the actual background under each element, and button states such as pressed or selected.

HueRoll can show the contrast ratio of a selected color against white and black. It does not directly compare arbitrary pairs such as bordeaux and gray, so check those with a separate contrast calculator. The final goal is not simply a calm palette: readers should also be able to identify what to read and where to act.