Bordeaux and Ivory Color Scheme Examples: Refining the Look with Headings and White Space
Bordeaux and ivory combine a deep red-purple with a warm, light neutral. Rather than using both over equally large areas, you can reserve Bordeaux for headings and important actions while leaving plenty of ivory-colored white space around photographs and text. This guide uses a seasonal gift page for a small baked-goods shop to show how the pair can work across backgrounds, headings, cards, and buttons.
Make Bordeaux the heading color and let ivory provide white space
Bordeaux is a dark wine-inspired red-purple; ivory is a near-white color with a hint of yellow. Neither color name defines one universally fixed digital value. Here we use Bordeaux #702A43 and ivory #FAF5E9 as practical examples. HEX is a notation for web colors using a hash sign and six hexadecimal digits.
Bordeaux #702A43 lettering on ivory #FAF5E9 has a contrast ratio of about 9.19:1. A contrast ratio measures the difference in relative brightness between two colors. For longer paragraphs, a deep charcoal #373035 has a ratio of about 11.79:1 against the same ivory background. Giving headings a rich hue and body text a quieter dark neutral creates a hierarchy without introducing more strong colors.
Ivory alone does not create white space. You still need to leave empty space before and after headings and around photographs. Start with relatively small areas of the dark hue and larger uninterrupted stretches of the light background. That arrangement gives the headline emphasis without crowding the product information.
A Bordeaux and ivory palette for a seasonal baked-goods gift page
Imagine a page featuring gift photographs, descriptions, delivery dates, and a reservation button. The colors can take on the following roles. In the table, each HEX code is shown directly on its corresponding background color.
| Role | Color swatch and HEX | Purpose |
|---|---|---|
| Page background / white space | #FAF5E9 | Around product photography and long-form descriptions |
| Headings / booking button | #702A43 | A deep wine-purple cue for key content and actions |
| Body copy | #373035 | Product details, prices, and supporting information |
| Information panel | #F0E4DF | A soft surface for delivery dates and important notes |
| Product cards | #FFFFFF | A light surface for each photo and description |
- Opening section: Use ivory #FAF5E9 behind a Bordeaux #702A43 product heading. Leave generous space between the headline and the product photograph, and place a short explanation in charcoal #373035.
- Product cards: Use white #FFFFFF for each card on the surrounding ivory #FAF5E9 page. These two backgrounds have a contrast ratio of only about 1.09:1, so their edge is subtle. Separate cards with spacing, set product names in Bordeaux #702A43, and keep prices in charcoal #373035.
- Delivery details: Use a pale rose-beige #F0E4DF panel with charcoal #373035 text. This text pairing contrasts at about 10.31:1, but the panel itself differs from the surrounding ivory #FAF5E9 by only about 1.14:1. Add an explicit heading such as “Estimated delivery” rather than relying on the colored panel alone.
- Reservation action: Fill the main button with Bordeaux #702A43 and use ivory #FAF5E9 for its text. This pair reaches about 9.19:1. Keep it as a distinct primary action instead of surrounding every secondary message with the same dark fill.
In this example, Bordeaux provides a consistent cue for both product names and the reservation action, rather than covering every section. The generous ivory background separates the moments when customers look at photographs from those when they read details or take action.
Recheck subtle boundaries and smaller text
When a card needs a more explicit outline, one option is a muted deep rose border #80636B. It contrasts at about 5.36:1 with the white #FFFFFF card and about 4.93:1 with the ivory #FAF5E9 around it. Yet applying a strong border to every card can break up the page too much. Decorative outlines are optional when spacing and headings already make the grouping clear.
A lighter rose #A46D7C used for a small caption on ivory #FAF5E9 reaches only about 3.82:1, which is insufficient for normal text. Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal text generally needs at least a 4.5:1 contrast ratio, while large text needs 3:1. Keep dates, prices, and other small details dark enough even when the rest of the design is restrained.
On mobile screens, check that headings still have breathing room when they wrap to two lines, and that the reservation button does not crowd photographs or explanatory text. HueRoll lets you adjust colors using HEX codes and compare a selected color with white or black. It does not compare arbitrary pairs of custom colors or automatically determine WCAG compliance. The custom pairings in this example were calculated separately.