Light Slate Gray & Gray Color Palette

01 #778899
02 #7C848D
03 #808080
04 #D6DBE0
05 #333333

Why do Light Slate Gray and Gray go well together?

A palette built with Light Slate Gray (#778899) and Gray (#808080) delivers a harmonious aesthetic. The contrast score of 1.08:1 indicates that this relationship does not satisfy standard text visibility criteria, so it should be styled as ambient design shapes or background tints. Integrating these two shades helps create depth in layouts.

How to use the Light Slate Gray & Gray color combination

Applying the Light Slate Gray and Gray color scheme gives projects a balanced, professional feel. It fits cleanly into tech applications, banking software, and retail labels. A solid structural strategy is to use the heavier tone #778899 for headers and typography, while reserving the secondary #808080 to guide user attention to key elements.

👁 Live UI Mockup Preview

See how this palette coordinates on actual web components.

Light Slate Gray Canvas

Light Slate Gray & Gray UI Layout

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

Gray Focus Rate 85%

🛠 Stylesheet Integration Codes

CSS Variables 
:root {
  --color-primary:   #778899;
  --color-secondary: #808080;
  --color-midtone:   #7C848D;
  --color-highlight: #D6DBE0;
  --color-shadow:    #333333;
}

◉ Parent Color Reference Sheets

Light Slate Gray Details All web and printing specifications
Gray Details All web and printing specifications
Copied!