What Colors Go with Near-Black Gold? Refined, Elegant Combinations for a Yellow Tone Close to Black [#202211]

Near-Black Gold (■#202211) is a very dark yellow tone that sits close to black. Here, “Gold” is the HueRoll color name rather than a metallic effect or reflective finish. On a website, it works well for dark backgrounds and outer surfaces, but relying only on nearby yellow tones can make the whole layout feel muddy. This article pairs ■#202211 with a light ivory, a grayish beige, and a muted blue to give the near-black yellow tone a restrained, refined look.

Pair it with ivory, grayish beige, and muted blue

One practical combination is a soft ivory ■#F4F0E6, a grayish beige ■#A99D88, and a muted blue ■#8496A4.

■#F4F0E6 creates a large brightness difference from the base color, making it useful for headings, body text on dark areas, and light reading surfaces. ■#A99D88 keeps some warmth while adding gray, so it can connect supporting text and separators without making the page feel too yellow. ■#8496A4 moves away from yellow toward blue, giving a primary button or small accent a distinct role without introducing another warm color.

Using the three colors as a light surface, a restrained middle tone, and a cool accent helps keep ■#202211 dominant while the layout stays controlled. Keeping the blue muted rather than vivid prevents the contrast with the dark yellow from becoming too strong.

Use the dark yellow tone around the page edges and keep reading surfaces light

With ■#202211 as the base, it helps to separate dark structural areas from lighter information surfaces.

A top or bottom section can use ■#202211, with headings in ■#F4F0E6, supporting information in ■#A99D88, and the primary action button in ■#8496A4. Information panels can then switch to ■#F4F0E6 with ■#202211 for body text, keeping the dark yellow tone 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.21:1 for ■#202211 with ■#F4F0E6, 6.06:1 for ■#202211 with ■#A99D88, and 5.30:1 for ■#202211 with ■#8496A4. 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, ■#A99D88 on ■#F4F0E6 is about 2.35:1, and ■#8496A4 on ■#F4F0E6 is about 2.68:1. Neither should be used for normal body text on that light background. The ■#8496A4 button in this example is intended for the dark ■#202211 surface.

Keep the gold-like impression restrained and control the amount of yellow

To make ■#202211 feel refined, it is usually better to support the dark yellow tone with quiet surrounding colors than to add bright gold or yellow accents. Keep the base color on the top or bottom sections and use ■#F4F0E6 for the main information areas.

Use ■#A99D88 for supporting information or thin separators, and reserve ■#8496A4 for a primary action or a small label. Keeping the blue area limited lets the dark yellow remain dominant while adding contrast only where it is useful. If the page includes photography or product images, review their color strength as part of the overall area balance.

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