What Colors Go with Rich Mint? A Color Scheme That Makes Deep Mint Feel Fresh and Calm [#14B87A]

Rich Mint (■#14B87A) is a deep mint that keeps a vivid green character while reducing overall lightness. On a website, it can work well for recipe search or food-media detail pages, especially for the selected category, cooking-time labels, and a primary “Save recipe” button. Used this way, the color can keep a fresh feel while helping the page look composed. However, a mint fill by itself may not create enough contrast against a pale background to define buttons or selected chips clearly. Here, we pair Rich Mint with Pale Mint White, Forest Ink, and Clay Rose while checking both text contrast and the visibility of meaningful UI boundaries.

Use Pale Mint White as the base and separate roles with a dark neutral and Clay Rose

One practical combination pairs ■#14B87A with Pale Mint White ■#F5FBF7 for the background, Forest Ink ■#1E342C for body text and borders, and Clay Rose ■#D9B7A8 for secondary controls.

■#F5FBF7 is a very light color with a faint green cast, so it keeps a visual relationship with Rich Mint while working across large background areas. ■#1E342C is a low-saturation dark color with a slight green cast, making it useful for recipe names, ingredients, quantities, and instructions. ■#D9B7A8 is a muted red-leaning color. Its hue sits away from green while its saturation stays restrained, so it can add gentle variation to secondary buttons and category controls without competing strongly with the mint.

On a recipe page, reserve Rich Mint for selected states and saving actions

For a practical layout, use ■#F5FBF7 across recipe lists and ingredient tables, then apply ■#14B87A to the selected category, cooking-time labels, and the background of a primary “Save recipe” button. Use ■#1E342C rather than white for text on the mint background: the contrast ratio is about 5.16:1, which meets the requirement for normal-sized text. Recipe names, ingredients, instructions, and notes can also use ■#1E342C so mint stays focused on the main emphasis.

For secondary UI (user-interface elements such as buttons and category selectors), use ■#D9B7A8 for a button such as “Add to shopping list,” with both text and border in ■#1E342C. Adding the same dark border to the Rich Mint button also prevents its boundary from depending only on the mint fill against the pale background.

A contrast ratio expresses the difference in relative luminance between text or a UI element and its background. ■#1E342C against ■#F5FBF7 is about 12.65:1, ■#1E342C against ■#14B87A is about 5.16:1, and ■#1E342C against ■#D9B7A8 is about 7.13: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 fresh, calm result, do not rely on the mint fill alone to identify saved states or buttons

■#14B87A against ■#F5FBF7 has a contrast ratio of about 2.45:1. Visual information required to identify meaningful UI components needs at least 3:1 against adjacent colors, so avoid relying on the mint fill alone to define a button or selected chip on this pale background. Adding a ■#1E342C border and text provides a clearer boundary.

Likewise, states such as “saved,” “not saved,” and “favorite” should not be communicated only through mint-versus-Clay Rose color differences. Pair color with a bookmark shape, state text, a check mark, or another non-color cue. If recipe photography already contains a lot of leafy greens or herbs, leaving generous ■#F5FBF7 space can separate the imagery from the controls better than extending ■#14B87A across the whole page. In HueRoll, you can enter ■#14B87A 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 pairs of colors or automatically label them AA or AAA, so the pairwise ratios in this article were calculated separately.