Skip to main content
professional

Navy and Linen

14.73:1 contrast ratio —

AAA

Visual Preview

#001F3FNavy
#FAF0E6Linen

The quick brown fox

Body text — Navy on Linen

Supporting text at reduced opacity

Badge

Reversed — Linen on Navy

Inverted combination preview

Contrast Analysis

Contrast Ratio

14.73:1

AAA

WCAG AA

✓ Pass

Requires 4.5:1

WCAG AA Large

✓ Pass

Requires 3:1

WCAG AAA

✓ Pass

Requires 7:1

Color Values

Navy

Foreground (Text)

HEX
#001F3F
RGB
rgb(0, 31, 63)
HSL
hsl(210, 100%, 12%)

Linen

Background

HEX
#FAF0E6
RGB
rgb(250, 240, 230)
HSL
hsl(30, 67%, 94%)

Design Use Cases

  • Corporate websites
  • Healthcare interfaces
  • Banking apps
  • Government portals
  • SaaS dashboards

Industry Recommendations

Finance & Banking
Healthcare
Government
B2B SaaS
Insurance

Color Psychology

The Navy tone evokes trust, stability, and professionalism, while Linen brings purity, clarity, and simplicity. Together, they create a balanced palette suited for compelling visual communication.

Palette Exports

:root {
  --color-navy: #001F3F;
  --color-linen: #FAF0E6;
}

.combo-navy-linen {
  color: var(--color-navy);
  background-color: var(--color-linen);
}

Quick Snippets

CSS Variables

:root {
  --color-navy: #001F3F;
  --color-linen: #FAF0E6;
}

Tailwind CSS

<div class="bg-stone-200 text-slate-900">
  Your content here
</div>

Individual Colors

Similar Combinations