Skip to main content
professional

Midnight Blue and Light Gray

9.92:1 contrast ratio —

AAA

Visual Preview

#191970Midnight Blue
#D3D3D3Light Gray

The quick brown fox

Body text — Midnight Blue on Light Gray

Supporting text at reduced opacity

Badge

Reversed — Light Gray on Midnight Blue

Inverted combination preview

Contrast Analysis

Contrast Ratio

9.92:1

AAA

WCAG AA

✓ Pass

Requires 4.5:1

WCAG AA Large

✓ Pass

Requires 3:1

WCAG AAA

✓ Pass

Requires 7:1

Color Values

Midnight Blue

Foreground (Text)

HEX
#191970
RGB
rgb(25, 25, 112)
HSL
hsl(240, 64%, 27%)

Light Gray

Background

HEX
#D3D3D3
RGB
rgb(211, 211, 211)
HSL
hsl(0, 0%, 83%)

Design Use Cases

  • Corporate identity
  • B2B SaaS
  • Consulting firms
  • Financial services
  • Legal platforms

Industry Recommendations

Finance & Banking
Healthcare
Government
B2B SaaS
Insurance

Color Psychology

The Midnight Blue tone evokes trust, stability, and professionalism, while Light Gray brings neutrality, balance, and professionalism. Together, they create a balanced palette suited for compelling visual communication.

Palette Exports

:root {
  --color-midnight-blue: #191970;
  --color-light-gray: #D3D3D3;
}

.combo-midnight-blue-light-gray {
  color: var(--color-midnight-blue);
  background-color: var(--color-light-gray);
}

Quick Snippets

CSS Variables

:root {
  --color-midnight-blue: #191970;
  --color-light-gray: #D3D3D3;
}

Tailwind CSS

<div class="bg-stone-300 text-indigo-900">
  Your content here
</div>

Individual Colors

Similar Combinations