Skip to main content
professional

Royal Blue and Ivory

4.8:1 contrast ratio —

AA

Visual Preview

#4169E1Royal Blue
#FFFFF0Ivory

The quick brown fox

Body text — Royal Blue on Ivory

Supporting text at reduced opacity

Badge

Reversed — Ivory on Royal Blue

Inverted combination preview

Contrast Analysis

Contrast Ratio

4.8:1

AA

WCAG AA

✓ Pass

Requires 4.5:1

WCAG AA Large

✓ Pass

Requires 3:1

WCAG AAA

✗ Fail

Requires 7:1

Color Values

Royal Blue

Foreground (Text)

HEX
#4169E1
RGB
rgb(65, 105, 225)
HSL
hsl(225, 73%, 57%)

Ivory

Background

HEX
#FFFFF0
RGB
rgb(255, 255, 240)
HSL
hsl(60, 100%, 97%)

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 Royal Blue tone evokes trust, stability, and professionalism, while Ivory brings purity, clarity, and simplicity. Together, they create a balanced palette suited for compelling visual communication.

Palette Exports

:root {
  --color-royal-blue: #4169E1;
  --color-ivory: #FFFFF0;
}

.combo-royal-blue-ivory {
  color: var(--color-royal-blue);
  background-color: var(--color-ivory);
}

Quick Snippets

CSS Variables

:root {
  --color-royal-blue: #4169E1;
  --color-ivory: #FFFFF0;
}

Tailwind CSS

<div class="bg-white text-blue-600">
  Your content here
</div>

Individual Colors

Similar Combinations