What Colors Go with Near-Black Rose? Subtle, Elegant Color Pairings for a Dark Rose [#221117]

Near-Black Rose (■#221117) is an extremely dark rose with a subtle red cast. On a website, it works well on dark areas near the top or bottom of the page, but using several dark colors without clear roles can make text and buttons harder to distinguish. This article pairs ■#221117 with three companion colors and shows how to assign them to backgrounds, text, supporting elements, and action buttons.

Pair it with a light off-white, a soft rose, and a subdued gold

One practical combination is ■#F7F2F3 as a light off-white, ■#A97884 as a soft rose, and ■#C6A06B as a subdued gold tone.

■#F7F2F3 creates a large lightness difference from ■#221117, giving the palette a clearly lighter surface. ■#A97884 stays close in hue to the rose family while keeping its saturation restrained, so it works as a related supporting color. ■#C6A06B shifts toward a warm yellow-gold hue and can be used as a contrasting accent. Separating the three jobs into a light surface, a related supporting tone, and a contrasting accent keeps the palette easier to organize.

Give each color a clear job on the page

With ■#221117 as the base, the roles can be defined like this.

For example, a top section can use ■#221117, with headings and introductory copy in ■#F7F2F3, secondary information in ■#A97884, and an action button in ■#C6A06B. The main content area below can switch to ■#F7F2F3 with ■#221117 for body text. This keeps the deep rose prominent while moving longer reading onto a light surface.

A contrast ratio expresses the light-dark difference between text and its background. The ratio is about 16.33:1 for ■#221117 with ■#F7F2F3, 4.92:1 for ■#221117 with ■#A97884, and 7.45:1 for ■#221117 with ■#C6A06B. WCAG 2.2 requires at least 4.5:1 for normal-sized text at Level AA, and all three text pairs shown here meet that requirement. Visual information needed to identify controls or their states needs at least 3:1 contrast against adjacent colors; ■#A97884 with ■#221117 and ■#C6A06B with ■#221117 also meet that condition. By contrast, ■#A97884 on ■#F7F2F3 is about 3.32:1, so it is not suitable for normal body text on that light background.

Adjust how much of the dark color you use

■#221117 can feel much darker when it covers a large area than when it appears as a small swatch. Instead of filling the entire page with the base color, use ■#221117 near the top or bottom and switch the main content area or cards to ■#F7F2F3. Increasing ■#A97884 makes the rose relationship more noticeable, while increasing ■#C6A06B makes the warm accent more prominent. A practical order is to establish the main light-dark structure with ■#221117 and ■#F7F2F3 first, then add the supporting and accent colors where needed.

In HueRoll, you can enter ■#221117 as a HEX color value, explore related colors, and compare the selected color with white or black. HueRoll does not compare arbitrary pairs of colors or automatically judge WCAG conformance levels. The contrast ratios shown in this article were calculated separately. Treat this palette as one practical example and adjust it for the area and surrounding colors in the actual layout.