What Colors Go with Vermilion? Color Combination Examples That Make the Most of Its Vibrancy
In Japanese, shu-iro (vermilion) is described as a red with yellow undertones. However, there is no single worldwide HEX value assigned to every color called vermilion. In this article, #E73121, which Figma presents as Vermilion, is used as one representative example for website and banner color schemes that make the most of its vibrancy.
CSS (Cascading Style Sheets), the language used to style web pages, defines standard named colors such as red, but there is no standard vermilion keyword. In practical web work, specifying the HEX code together with the color name helps everyone work from the same shade.
What colors go well with vermilion?
The reference #E73121 is a vivid red that leans slightly toward orange. Its visual presence increases as its area becomes larger. Rather than making the background and body text equally strong, use ivory or beige across larger surfaces and darker colors to define text and key controls.
- Warm ivory: #FFF7F1. Slightly warmer than pure white, it preserves vermilion’s warmth while creating breathing room.
- Dark brown: #342B28. It works well for body text and headings while keeping a warm relationship with the accent color.
- Sand beige: #E9D6C8. On cards or supporting surfaces, it creates lightness contrast without leaving the warm palette.
- Muted sage: #8DA394. It introduces a different hue while keeping the contrast calmer than a vivid green would.
- Deep teal: #31535C. It is useful for primary buttons or headings that need a role distinct from the vermilion accent.
Three color schemes that make the most of vermilion’s vibrancy
Use ivory broadly and keep vermilion as the accent
Set the background to #FFF7F1, body text to #342B28, and use #E73121 on heading rules, labels, or icons. The contrast ratio between the body text and background is about 13.03:1. Keeping vermilion to selected focal areas preserves its vivid character without making the entire page feel intense.
Build warm depth with sand beige
Use #FFF7F1 for the page background, #E9D6C8 for card surfaces, #342B28 for body text, and #E73121 as the accent. The contrast ratio between the text and beige surface is about 9.80:1. Giving the pale warm colors larger areas and reserving vermilion for smaller accents helps similar temperatures feel layered rather than flat.
Add sage and teal for natural hue contrast
Use #8DA394 on a supporting surface with #342B28 text; the contrast ratio is about 5.12:1. For the CTA (call to action), such as the main purchase or sign-up button, use #31535C with white #FFFFFF text; the contrast ratio is about 8.33:1. Rather than giving vermilion, sage, and teal equal visual weight, assign them to accent, supporting surface, and control roles.
Black text can outperform white on this vermilion background
The contrast ratio between #E73121 and white #FFFFFF is about 4.32:1. Under the Web Content Accessibility Guidelines (WCAG) 2.2, Level AA requires at least 4.5:1 for normal-size text, so this pair falls slightly short. Black #000000 reaches about 4.86:1 against the same vermilion, which clears the normal-text threshold.
For this reference shade, do not assume white text is the better choice on a vermilion button or banner. Black may provide stronger contrast. Because vermilion is a flexible color name, a different HEX value may produce a different result. HueRoll can compare a selected color with white and black, making it useful to enter the exact shade you plan to use and compare both ratios before choosing the text color.