Do Purple and Gray Go Together? Color Scheme Patterns by Adjusting Shades

Purple and gray can work well together when you adjust how light or dark each shade is. Pairing a very dark purple with dark gray may cause both areas to blend together, while pale purple and light gray can leave important boundaries difficult to see. The key is to decide which color forms the main surface and which colors carry text and actions. This article compares three shade combinations for a fictional design exhibition website, showing how to organize headings, event details, labels, and buttons.

Can purple and gray work together? Start with their brightness

Purple describes a broad family of colors containing red and blue, while gray is a neutral color between black and white. Both names cover many shades, so they do not guarantee a particular digital appearance. In CSS (Cascading Style Sheets), the language that controls web page presentation, the named colors purple ■#800080 and gray ■#808080 have defined values. Our designs are not limited to those two keywords. HEX is a six-digit hexadecimal code used to specify a web color.

For this comparison, we use deep purple ■#56326B, pale purple ■#CDBBD9, light gray ■#F1F1F3, medium gray ■#A8A6AF, and dark charcoal gray ■#343640 for text. These are deliberately selected design examples, not universal codes attached to the everyday names “purple” and “gray.”

Deep purple ■#56326B contrasts with light gray ■#F1F1F3 at about 9.02:1. Pale purple ■#CDBBD9 and that same light gray have a ratio of only about 1.59:1. A contrast ratio measures the difference in relative luminance between adjacent colors. Even when two pale colors have different hues, the boundary between them may not be strong enough to convey important information.

Three shade patterns for a design exhibition website

Pattern 1: Use light gray as the background and deep purple for emphasis. For a gallery page titled “Design and Everyday Life Exhibition,” make the background light gray ■#F1F1F3 and the headings deep purple ■#56326B. Heading contrast is about 9.02:1. Use dark gray ■#343640 for longer descriptions, at about 10.65:1. A “Reserve Your Visit” button can use a deep purple ■#56326B fill with white ■#FFFFFF lettering. Text inside the button contrasts at about 10.17:1, and the button contrasts with the surrounding light gray at about 9.02:1.

For pale purple ■#CDBBD9 category labels, use dark gray ■#343640 lettering, which provides about 6.70:1. However, the pale purple label differs from the light gray ■#F1F1F3 page by only about 1.59:1. If the label needs a clear boundary, add a dark gray ■#343640 outline. That border contrasts at about 10.65:1 with the outer light gray and 6.70:1 with the pale purple interior.

Pattern 2: Make deep purple the large background and brighten the text. For the exhibition’s opening banner, choose deep purple ■#56326B as the background with white ■#FFFFFF headings and a short introduction. The text-to-background contrast is about 10.17:1. Put the event date and venue into a light gray ■#F1F1F3 card with dark gray ■#343640 text at about 10.65:1. The card itself contrasts with the purple surroundings at about 9.02:1. For a “View Event Details” button, use pale purple ■#CDBBD9 with dark gray ■#343640 lettering at about 6.70:1. The pale purple button differs from the deep purple background at about 5.67:1.

Pattern 3: Lead with medium gray and use pale purple for a small notice. In a practical information section, choose medium gray ■#A8A6AF for the background and dark gray ■#343640 for the description. This pair reaches about 5.00:1. Put a short “Free Admission” notice on a pale purple ■#CDBBD9 panel with dark gray ■#343640 text at about 6.70:1. The notice and medium gray differ by only about 1.34:1, so a border is needed if the boundary is important. Use a roughly 2px deep purple ■#56326B border, which contrasts at about 4.23:1 with the outer medium gray and 5.67:1 with the pale purple inside. A deep purple ■#56326B reservation button with white ■#FFFFFF lettering provides about 10.17:1 within the button and 4.23:1 against the medium gray surroundings.

Check text and boundaries whenever the shades change

White ■#FFFFFF text on pale purple ■#CDBBD9 contrasts at only about 1.79:1. White on medium gray ■#A8A6AF reaches only about 2.40:1. Neither is suitable for normal text or qualifying large headings. Deep purple ■#56326B against dark gray ■#343640 is also a poor pairing for readable text or important adjacent areas, at only about 1.18:1. Different hues alone do not guarantee enough separation when both shades are dark.

Under WCAG 2.2 Level AA (the Web Content Accessibility Guidelines), normal-size text generally needs a contrast ratio of at least 4.5:1, and qualifying large text needs at least 3:1. Some essential non-text cues, such as control borders and meaningful graphical elements, may also need 3:1 against neighboring colors. Do not communicate selected states or reservation availability through color changes alone; add words or shapes. Very thin borders can remain difficult to see even when the numerical ratio passes, so inspect the finished page.

HueRoll lets you adjust colors using HEX codes and view the selected color’s contrast against white or black. It cannot compare arbitrary custom color pairs or automatically determine AA or AAA compliance. Check each actual combination of text, backgrounds, labels, and buttons separately before publishing.