What Colors Go with Rust Brown? Color Combinations for a Calm Banner Design

Rust brown, known as sabi-iro in Japanese, is a dark reddish brown. In a banner for pottery or handmade goods, it can create a restrained, earthy appearance. But filling the entire banner with dark brown and then choosing equally dark lettering may obscure the message. This guide pairs rust brown with a warm off-white and pale sage green, assigning distinct roles to the background, headline, event date, and button.

Pair rust brown with warm off-white and pale sage green

The Japanese color reference Wairo Daijiten lists ■#6C3524 as one example of sabi-iro. It is a useful reference, not the only possible numeric definition of the color name. HEX is a notation for web colors using a hash sign followed by six hexadecimal digits. Starting from this rust brown, we will use a warm off-white ■#F7F1E6 and pale sage green ■#D8DFC9 as supporting colors.

Off-white ■#F7F1E6 lettering on rust brown ■#6C3524 has a contrast ratio of about 8.60:1. A contrast ratio measures the difference in relative brightness between two colors. A rust-brown headline on the off-white background has the same 8.60:1 ratio. This makes it practical to swap which of the two colors fills the banner and which appears in the headline.

Pale sage green ■#D8DFC9 differs in hue from rust brown ■#6C3524. It works as a supporting surface for a short date or venue label. Rust-brown text against this pale green has about 7.05:1 contrast. Rather than filling another large area with green, keep it to a small label to add variety while letting rust brown remain the main color.

Two pottery exhibition banner layouts using the same palette

Imagine a banner announcing a pottery exhibition, with the exhibition name, dates, venue, and a “View details” action. Decide where the text will sit before placing the pottery photograph so important information does not disappear against the colors of the artwork.

• Rust-brown background: Fill the left side with rust brown ■#6C3524 and set the exhibition name in large off-white ■#F7F1E6 lettering. Place the photograph of the pottery on the right, without overlaying text on the image. Use a pale sage-green ■#D8DFC9 event-date label with rust-brown ■#6C3524 text, maintaining about 7.05:1 contrast. Make the “View details” button off-white ■#F7F1E6 with rust-brown ■#6C3524 lettering.
• Warm off-white background: Use off-white ■#F7F1E6 over most of the banner and place the exhibition title in rust brown ■#6C3524. A short description in dark charcoal ■#342E2A has about 11.90:1 contrast with off-white. For the booking button, fill it with rust brown ■#6C3524 and put off-white ■#F7F1E6 text on top. The button lettering retains about 8.60:1 contrast.

The first layout works when a wide banner needs a short, prominent headline. The second provides more light space for a photograph and longer information. If you use both layouts in one campaign, swap the roles of rust brown and off-white while keeping the other colors consistent instead of adding more strong accent hues.

Check the boundaries of pale areas and where the text sits

A pale sage-green ■#D8DFC9 label against an off-white ■#F7F1E6 background has a contrast ratio of only about 1.22:1, so its boundary can become unclear. If the outline needs to be visible, try a deeper green-gray ■#566653 border. It contrasts with sage green at about 4.48:1 and with off-white at about 5.46:1. However, this green-gray against sage green is only 4.48:1 for text, narrowly below the usual 4.5:1 requirement for normal-size lettering. Dark charcoal ■#342E2A on sage green reaches about 9.76:1 and is a better text choice.

Under WCAG (Web Content Accessibility Guidelines) 2.2 Level AA, normal text generally needs at least 4.5:1 contrast, while large text needs at least 3:1. White ■#FFFFFF text against pale sage green ■#D8DFC9 has only about 1.37:1 and is unsuitable for ordinary lettering. If you place text directly over a pottery photograph, check both the light and dark areas of the image. A solid-color panel behind the text may be needed.

HueRoll lets you adjust a color using its HEX value and check the selected color against white or black. It does not directly compare any two custom colors or automatically give a WCAG pass/fail result. The off-white, sage-green, and text combinations used here were checked separately, one pair at a time.