What Colors Go with Near-Black Mint? Color Pairings to Give Dark Mint an Urban, Calm Look [#11221C]

Near-Black Mint (■#11221C) is a very dark color with subtle green and blue undertones. On a website, it works well for dark surfaces and menu areas, but relying on only nearby greens can make the layout feel visually heavy. This article pairs ■#11221C with a light neutral, a grayish mint, and a muted mauve to create a calm, urban palette.

Pair it with off-white, grayish mint, and muted mauve

One practical combination is a light off-white ■#F2F4F3, a grayish mint ■#8DA69B, and a muted mauve ■#A18FA8.

■#F2F4F3 creates a large brightness difference from the base color, making it useful for headings, body text on dark areas, and the main light reading surface. ■#8DA69B keeps a connection to the green family while adding more lightness, so it works well for supporting text and separators. ■#A18FA8 introduces a restrained purple direction, giving a primary button or small accent a distinct role without becoming too vivid.

Using the three colors as a light surface, a related supporting tone, and a muted accent helps ■#11221C remain the main color while the page stays calm. Keeping the mauve muted rather than bright helps preserve the overall quiet character.

Use the dark mint for menus and outer surfaces, and keep information areas light

With ■#11221C as the base, it helps to separate the outer structure from the areas where users read information.

A top section or side menu can use ■#11221C, with headings in ■#F2F4F3, secondary information in ■#8DA69B, and the primary action button in ■#A18FA8. Information panels that contain body copy or numbers can switch to ■#F2F4F3 with ■#11221C for text, keeping the dark mint present without forcing long passages onto a dark surface.

A contrast ratio shows the brightness difference between a foreground element and its background. The ratio is about 14.98:1 for ■#11221C with ■#F2F4F3, 6.35:1 for ■#11221C with ■#8DA69B, and 5.52:1 for ■#11221C with ■#A18FA8. Under WCAG 2.2 from W3C, normal text needs at least 4.5:1 contrast, while visual parts needed to identify controls, states, or meaningful icons need at least 3:1 against adjacent colors. The text pairs shown on the dark base meet the 4.5:1 threshold.

By contrast, ■#8DA69B on ■#F2F4F3 is about 2.36:1, and ■#A18FA8 on ■#F2F4F3 is about 2.71:1. Neither should be used for normal body text on that light background. The ■#A18FA8 button in this example is intended for the dark ■#11221C surface.

Create an urban look with spacing and muted color rather than more accents

To keep ■#11221C calm, it is usually easier to control the boundaries between dark and light surfaces, the amount of whitespace, and the muted quality of the supporting colors than to add more accents. Keep the dark color in menus and outer surfaces, and use ■#F2F4F3 for the main information areas.

Use ■#8DA69B for secondary information or thin separators, and reserve ■#A18FA8 for a primary action or another small accent. Because both supporting colors are muted, they help preserve a quieter mint-led palette. If the page includes photography or charts, review the total number of colors and the area each one occupies.

In HueRoll, you can enter ■#11221C as a HEX value. HEX is a color 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 pairs of colors or automatically determine WCAG conformance levels, so the pairwise contrast ratios in this article were calculated separately.