What Colors Go with Very Dark Mint? Color Pairings to Give Dark Mint a Cool, Refined Look [#17362A]

Very Dark Mint (■#17362A) is a deep color that sits close to black while retaining a mint-toned blue-green cast. On a website, it works well in headers, hero sections, and footers when you want a calm cool palette, but relying only on similar greens and blue-greens can make the layout feel flat. This article pairs ■#17362A with mist pearl, muted mint, and smoky violet to give the dark mint a cool, refined look.

Pair it with mist pearl, muted mint, and smoky violet

One practical combination for ■#17362A is a light mist pearl ■#E9F3EE with a slight green cast, a related muted mint ■#89B2A1, and a smoky violet ■#A99AB8 that moves a little farther away from blue-green.

■#E9F3EE creates a large brightness difference from the base color, making it useful for headings and body text on dark areas and as the background of light information surfaces. ■#89B2A1 keeps the mint-family relationship while adding lightness, so it works well for supporting text or thin separators. ■#A99AB8 is a low-saturation violet, so it can distinguish a primary button or small label without becoming as forceful as a vivid purple.

Giving the colors clear roles as a light information surface, a related middle tone, and a separate cool accent helps preserve the depth of ■#17362A while making the page easier to structure.

Use the dark mint for structure and keep reading surfaces light

When ■#17362A is the base color, it is usually easier to use when the dark tone is concentrated in the header, hero section, or footer rather than spread across the entire page. Long passages and numeric information can then move onto a lighter surface.

A contrast ratio describes the difference in relative brightness between a foreground element and its background. The ratio is about 11.59:1 for ■#17362A with ■#E9F3EE, 5.60:1 for ■#17362A with ■#89B2A1, and 5.01:1 for ■#17362A with ■#A99AB8. Under WCAG 2.2, normal text needs at least 4.5:1 contrast. Visual information required to identify interface components or meaningful graphics needs at least 3:1 contrast against adjacent colors. The text pairs shown on the dark base meet the 4.5:1 threshold.

By contrast, ■#89B2A1 on ■#E9F3EE is about 2.07:1, and ■#A99AB8 on ■#E9F3EE is about 2.31:1. Neither should be used for normal body text on that light background; switch body text to a sufficiently dark color such as ■#17362A.

For a cool, refined look, limit the number of colors and keep their roles clear

If you want ■#17362A to feel refined, it is generally easier to define clear roles for the light surface, supporting color, and accent than to add many steps of similar mint and teal. Keep ■#89B2A1 for supporting information or separators, while the main reading experience relies on the stronger light-dark difference between ■#E9F3EE and ■#17362A.

Reserve ■#A99AB8 for a primary action, thin line, or small label so it adds variation to the blue-green palette while keeping the overall scheme on the cool side. If photography or product images already contain a lot of mint or violet, avoid adding more supporting colors and increase the light ■#E9F3EE area to reduce overall color density.

In HueRoll, you can enter ■#17362A as a HEX value. HEX is one way to represent a web color using a code that begins with #. You can explore related colors and palette suggestions and compare the selected color with white or black. HueRoll does not compare arbitrary color pairs or automatically determine WCAG conformance levels, so the pairwise contrast ratios in this article were calculated separately.