What Colors Go with Rich Vermilion? Color Pairings That Make Muted Red-Orange Feel Warm [#B85214]

Rich Vermilion (■#B85214) is a deep, muted red-orange. On a website, it can work well for a pottery-workshop booking page, especially for the selected class, booking time, and a primary “Book this session” button. Used this way, the color can keep the warmth of red-orange while helping the page feel composed. If the pottery photography already contains a lot of terracotta or reddish brown, however, spreading similar hues too widely can make the controls blend into the imagery. Here, we pair Rich Vermilion with Porcelain White, Deep Umber, and Smoky Blue to keep the page warm while giving each role a clear place.

Use Porcelain White as the base and Smoky Blue to add a gentle temperature contrast to red-orange

One practical combination pairs ■#B85214 with Porcelain White ■#FFF8F2 for the background, Deep Umber ■#2D2422 for body and supporting text, and Smoky Blue ■#7592A0 for secondary controls.

■#FFF8F2 is a very light color with a slight red cast, so it keeps a visual relationship with Vermilion while creating a strong lightness difference. ■#2D2422 is a low-saturation dark color with a subtle red undertone, making it useful for class names, prices, duration, and notes. ■#7592A0 is a muted blue, so it sits away from red-orange in hue without making the interface feel overly cool and can separate secondary actions from the main booking action.

On a booking page, concentrate Rich Vermilion on the selected class and primary action

For a practical layout, use ■#FFF8F2 across class lists and booking-information cards, then apply ■#B85214 to the selected class, booking time, and the background of a primary “Book this session” button. Text on that background can use ■#FFF8F2; the contrast ratio is about 4.69:1, which meets the requirement for normal-sized text. Prices, duration, what to bring, and cancellation conditions can use ■#2D2422 so red-orange stays focused on the key selection and action.

For secondary UI (user-interface elements such as buttons and date selectors), use ■#7592A0 for a button such as “View what to bring,” with text in ■#2D2422. Smoky Blue against the light background has a contrast ratio of about 3.13:1, so the button surface itself can also be distinguished from the surrounding background.

A contrast ratio expresses the difference in relative luminance between text or a UI element and its background. ■#2D2422 against ■#FFF8F2 is about 14.39:1, ■#B85214 against ■#FFF8F2 is about 4.69:1, and ■#2D2422 against ■#7592A0 is about 4.60:1. WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 for normal-sized text, so the text combinations shown here meet that threshold.

For a warm result, do not communicate booking states with red-orange and blue alone

■#B85214 against ■#7592A0 has a contrast ratio of about 1.50:1. For that reason, do not communicate states such as “selected” versus “not selected,” or “spaces available” versus “full,” through those two colors alone. Pair color with state text, a check mark, a change in border weight, an icon, or another non-color cue.

If the pottery or glaze photography already contains a lot of red-orange or brown, leaving generous ■#FFF8F2 space can separate the artwork from the booking controls better than extending ■#B85214 across the whole page. In HueRoll, you can enter ■#B85214 as a HEX color (a web color code beginning with #), then inspect related colors, palette suggestions, and the selected color’s contrast against white and black. HueRoll does not compare arbitrary color pairs or automatically label them AA or AAA, so the pairwise ratios in this article were calculated separately.