What Colors Go with Deep Red? Color Pairing Examples That Make the Most of Deep Crimson’s Calm Character [#981B1B]

TIPS

Deep Red (#981B1B) is a deep crimson that keeps noticeable red saturation while reducing brightness. On a website, it can work well for cinema or independent-theater screening schedules and seat-selection pages, including film titles, selected showtimes, and primary “Choose Seats” buttons, when you want a more restrained layout than a brighter red. If red is spread across too much of the interface, however, the UI can become more visually dominant than posters or showtimes, and states such as on sale or sold out may end up relying on color alone. This example pairs Deep Red with warm porcelain, charcoal plum, and muted sage to make the most of deep crimson’s calm character while keeping screening information organized.

Build on warm porcelain and add a gentle hue contrast with muted sage

With #981B1B, one practical combination is warm porcelain #F7F2EE for the background, charcoal plum #342F30 for body and supporting text, and muted sage #B8C5A9 as the accent.

#F7F2EE is a light color with a slight warmth, creating a strong brightness difference from deep crimson while keeping screening lists and film-information cards visually soft. #342F30 is a low-saturation dark neutral with a faint red-violet bias, which helps organize showtimes, running times, theater names, and notes without turning every text level red. #B8C5A9 is a muted green-leaning color that shifts away from red in hue without becoming vivid, adding a gentle change to a deep-red-led interface.

On screening schedules, concentrate Deep Red in film titles and primary actions

Use #F7F2EE across screening-list and film-information card backgrounds, then reserve #981B1B for film titles, selected showtimes, and primary “Choose Seats” button backgrounds. Use #F7F2EE for text on the deep-red surface so normal-size text has sufficient contrast. Put showtimes, running times, theater names, and price conditions in #342F30 so Deep Red stays focused on key information and primary actions.

For supporting UI (user-interface elements such as buttons and seat-selection controls), a small #B8C5A9 “View Details” button or label can sit on a dark #981B1B surface, with #342F30 text.

#981B1B#F7F2EE#342F30#B8C5A9

Screening-list and film-information card background: #F7F2EE

Film-title, selected-showtime, and primary-button background: #981B1B / text on it: #F7F2EE

Showtimes, theater names, and price conditions on the light background: #342F30

Supporting-button background on #981B1B: #B8C5A9 / text on it: #342F30

A contrast ratio is the numerical difference in relative brightness between foreground and background colors. #981B1B against #F7F2EE is about 7.53:1, #342F30 against #F7F2EE is about 11.84:1, and #342F30 against #B8C5A9 is about 7.27:1. WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 for normal-size text, so the text combinations shown here meet that threshold. The contrast between #981B1B and #B8C5A9 is about 4.62:1, which also exceeds the 3:1 threshold for visual information needed to identify meaningful UI components against adjacent colors.

Make the most of its calm character without communicating sales or seat selection through red alone

The contrast between #B8C5A9 and #F7F2EE is only about 1.63:1. Do not use muted sage as normal text on the light background, and do not rely on the boundary between those two colors alone to identify a button or seat. On light surfaces, combine #981B1B or #342F30 borders and text with the control.

States such as “On Sale,” “Limited Seats,” “Sold Out,” or a selected seat should not be distinguished by red, sage, or any other color alone. Add explicit status text, a check mark, a symbol, or a stronger border so the meaning remains clear without relying on hue. If a film poster or promotional image already contains a lot of red, keeping enough #F7F2EE whitespace and information cards can help separate the artwork from interactive controls better than adding more red across the page. In HueRoll, you can enter #981B1B as a HEX color code (a web color notation beginning with #), review related colors and palette suggestions, and compare the selected color with white or black. HueRoll does not compare arbitrary pairs of colors or automatically judge WCAG AA/AAA conformance, so the two-color contrast ratios in this article were calculated separately.