What Colors Go with Near-Black Cyan? Color Pairings to Highlight a Blue-Green Close to Black with a Cool Look [#112222]

Near-Black Cyan (■#112222) is an extremely dark blue-green that can look almost black. On a website, it works well for cool dark surfaces, but using only nearby blue-green tones can make the whole layout feel visually heavy. This article pairs ■#112222 with a light neutral, a muted cyan, and a warm accent so the blue-green character remains clear while each element has a distinct role.

Pair it with off-white, blue-gray cyan, and muted coral

One practical combination is a cool off-white ■#F1F5F5, a blue-gray cyan ■#7FA9AD, and a muted coral ■#C58F78.

■#F1F5F5 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. ■#7FA9AD keeps the palette connected to blue-green while adding more lightness, so it works well for supporting information and separators. ■#C58F78 adds a contrasting red cast, making it useful for a primary button or another small accent on the dark base.

Using the three colors as a light surface, a related supporting tone, and a warm accent helps preserve the cool character of ■#112222 without making the page flat. Coral becomes more dominant as its area increases, so it is easier to control when it is reserved for the actions that genuinely need attention.

Use the dark blue-green in headers or side areas and keep reading surfaces light

With ■#112222 as the base, the roles can be divided like this.

A top section or side area can use ■#112222, with headings and introductory copy in ■#F1F5F5, secondary information in ■#7FA9AD, and the primary action button in ■#C58F78. The main reading area can then switch to ■#F1F5F5 with ■#112222 for body text, keeping the blue-green identity visible 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.99:1 for ■#112222 with ■#F1F5F5, 6.41:1 for ■#112222 with ■#7FA9AD, and 5.94:1 for ■#112222 with ■#C58F78. 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, ■#7FA9AD on ■#F1F5F5 is about 2.34:1, and ■#C58F78 on ■#F1F5F5 is about 2.52:1. Neither should be used for normal body text on that light background. The ■#C58F78 button in this example is specifically intended for the dark ■#112222 surface.

Keep the warm accent limited if you want the layout to stay cool

■#112222 appears closer to black as it covers more area, so it is easier to control when it is concentrated in headers, side areas, or other sections with a clear role. Use ■#F1F5F5 for the main content and card surfaces so the dark and light zones remain easy to distinguish.

Use ■#7FA9AD as the supporting color that keeps the blue-green family connected, and reserve ■#C58F78 for a primary action or another small accent on the dark surface. Keeping the warm accent area small helps preserve the cool, cyan-led character of the page. Check the balance again with the actual photography, spacing, and amount of text.

In HueRoll, you can enter ■#112222 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.