How to Use Purple and Gold Elegantly | A Color Scheme That Keeps Web Decorations from Drawing Too Much Attention

Purple and gold can add depth and a touch of ornament to a web page. But if every heading, button, and border is gold, it may become difficult to see which information deserves attention first. A more restrained approach is to let purple organize the important content and reserve gold for short lines or small decorative details. Here are two ways to apply that idea to a special website for a craft exhibition.

Make purple the primary color and let gold support the content

Start by separating colors used for reading and interaction from colors used only for decoration. Use purple for headings and primary buttons, then add gold beneath a heading or along part of a divider. Avoid asking gold to carry both important text and navigation cues.

For these examples, we use a subdued purple ■#493454 and a muted gold ■#B99B69. A HEX code is a web color notation that starts with a hash sign and uses hexadecimal digits. A flat gold color on a screen does not have the actual reflective shine of metal, so choosing a brighter gold alone will not determine how refined a page looks. Spacing and placement matter too.

For instance, put one gold underline about 40px wide and 2px thick beneath a section heading. There is no need to repeat the same line under every label. If you also add a gold outline around a photograph, consider removing the line from its nearby heading. Using fewer decorative elements helps keep purple headings in the leading role.

Compare two layouts for a craft exhibition website

A light background, purple headings, and short gold lines

For a page focused on artwork descriptions and visiting information, set the background to ivory ■#F8F4EF, headings to purple ■#493454, and descriptions and dates to dark gray ■#302B30. The text-to-background contrast ratios are approximately 10.08:1 for headings and 12.67:1 for body text. Add a short accent line in ■#B99B69 next to or below selected headings, but do not use gold for small text.

Muted gold ■#B99B69 against ivory ■#F8F4EF has a contrast ratio of only about 2.41:1, too low for ordinary small text. It is suitable here only as a nonessential decorative line. For a “Reserve a Visit” button, use a purple ■#493454 background and white ■#FFFFFF lettering. The button text has a contrast ratio of approximately 11.04:1. The action is communicated by the labeled button, not by the gold ornament.

Use deep purple only in the opening feature area

If the site needs a more dramatic introduction to the exhibition, use deep purple ■#35263F in the hero section—the prominent area near the top of the page—and place the exhibition title in pale cream ■#F6EFE6. This text and background have a contrast ratio of approximately 12.27:1. Keep lighter gold ■#D5B778 to small details such as the corners of a photograph frame or a narrow rule near the title. The gold contrasts at about 7.25:1 with the deep purple, but that does not mean more ornament is needed.

Return to a light ■#F8F4EF background and dark ■#302B30 lettering for artwork descriptions, hours, and directions. Concentrating the deep purple in the introductory section, rather than across the whole page, separates the area for viewing artwork from the area for reading practical information. If you place a reservation button on the dark purple area, use pale cream ■#F6EFE6 as the button background and deep purple ■#35263F for its text. That text pairing also provides approximately 12.27:1 contrast.

Review decorative details separately from text contrast

First, check whether visitors could still recognize headings and interactive elements if the gold lines disappeared. When a line is the only visual cue for a section boundary or a state, it is not merely decorative. Under the Web Content Accessibility Guidelines (WCAG) 2.2, Level AA, normal-size text generally needs at least 4.5:1 contrast against its background, while qualifying large text needs at least 3:1. Essential visual information identifying interface components or meaningful graphics generally needs 3:1 against adjacent colors. A purely decorative line is not automatically subject to that same non-text requirement.

On phones, short lines may look relatively prominent, and the available spacing becomes tighter. Check the page at narrower widths to make sure headings, buttons, and photographs keep the intended priority. When an image or translucent overlay changes a background, test the colors that actually touch each other.

HueRoll lets you enter a HEX code, explore lighter and darker variations and palette suggestions, and check the selected color against white and black. It does not compare arbitrary color pairs or automatically judge WCAG AA compliance. The contrast ratios in this article were calculated separately for the specified opaque colors. Use purple to organize the information, then add gold only where decoration genuinely helps the composition.