Dim Gray & Gray Color Palette

01 #696969
02 #757575
03 #808080
04 #D2D2D2
05 #333333

Why do Dim Gray and Gray go well together?

The combination of Dim Gray (#696969) and Gray (#808080) creates a striking designer pairing. The contrast ratio between these two colors is measured at 1.39:1, which is a low-contrast combination best kept for decorative background accents rather than readable text elements. When used in digital projects, this duo offers a cohesive balance of color temperatures.

How to use the Dim Gray & Gray color combination

In modern branding and web interfaces, pairing Dim Gray with Gray is commonly utilized to evoke specific emotional responses. This combination is highly effective for technical platforms, retail packaging, and creative studio portfolios. To implement this palette, use #696969 for primary brand elements and #808080 as the accent or background container.

👁 Live UI Mockup Preview

See how this palette coordinates on actual web components.

Dim Gray Canvas

Dim Gray & Gray UI Layout

This component template demonstrates Dim Gray styling applied to headers and Gray styled interactive blocks.

Gray Focus Rate 85%

🛠 Stylesheet Integration Codes

CSS Variables 
:root {
  --color-primary:   #696969;
  --color-secondary: #808080;
  --color-midtone:   #757575;
  --color-highlight: #D2D2D2;
  --color-shadow:    #333333;
}

◉ Parent Color Reference Sheets

Dim Gray Details All web and printing specifications
Gray Details All web and printing specifications
Copied!