What are the hex codes in the Classic Midnight & Steel Blue palette?

The Classic Midnight & Steel Blue color palette consists of Midnight #0A1F73, Steel Blue #2A8CCD, Snow #F1FDFF, Wheat #FFD285.

How should I use the Classic Midnight & Steel Blue palette on a website?

Use Snow #F1FDFF as the background, Midnight #0A1F73 for text, Wheat #FFD285 for buttons and links, and Steel Blue #2A8CCD for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Midnight on Snow at 13.89:1.

Which colors in Classic Midnight & Steel Blue have enough contrast for text?

The highest-contrast pair is #0A1F73 on #F1FDFF with a ratio of 13.89:1, which passes WCAG AA for normal text.

#0A1F73Midnight

#2A8CCDSteel Blue

#F1FDFFSnow

#FFD285Wheat

Classic Midnight & Steel Blue color palette

Modern Blue White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Midnight	`#0A1F73`	`rgb(10, 31, 115)`	`hsl(228, 84%, 25%)`	`oklch(29.5% 0.145 266)`
Steel Blue	`#2A8CCD`	`rgb(42, 140, 205)`	`hsl(204, 66%, 48%)`	`oklch(61.5% 0.132 243)`
Snow	`#F1FDFF`	`rgb(241, 253, 255)`	`hsl(189, 100%, 97%)`	`oklch(98.6% 0.013 209)`
Wheat	`#FFD285`	`rgb(255, 210, 133)`	`hsl(38, 100%, 76%)`	`oklch(88.6% 0.108 80)`

Why it works and how to use it

Classic Midnight & Steel Blue is a vivid complementary color palette tagged modern, blue, white. Midnight and Wheat sit nearly opposite on the color wheel, so the pairing has real energy; keep one as the accent. These are bold, punchy colors that need generous white space around them. Warm and cool hues are mixed, which adds depth.

With 3 chromatic colors, Wheat takes the lead while the rest support. Lightness runs from 25% to 97%. Well suited to websites, presentations and branding.

Background: Snow (#F1FDFF) is the lightest color, so it belongs on large surfaces.
Text: Midnight (#0A1F73) on #F1FDFF gives 13.89:1, passing WCAG AAA.
Primary: Wheat (#FFD285) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Steel Blue (#2A8CCD) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Midnight on Snow at 13.89:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Classic Midnight & Steel Blue

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#0A1F73

#2A8CCD

#F1FDFF

#FFD285

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#0A1F73` on `#F1FDFF`	Aa	13.89:1	AAA
`#0A1F73` on `#FFD285`	Aa	10.17:1	AAA
`#0A1F73` on `#2A8CCD`	Aa	3.94:1	AA large only
`#2A8CCD` on `#F1FDFF`	Aa	3.53:1	AA large only
`#2A8CCD` on `#FFD285`	Aa	2.58:1	Fail
`#F1FDFF` on `#FFD285`	Aa	1.37:1	Fail

:root {
  --midnight: #0A1F73;
  --steel-blue: #2A8CCD;
  --snow: #F1FDFF;
  --wheat: #FFD285;
}

$midnight: #0A1F73;
$steel-blue: #2A8CCD;
$snow: #F1FDFF;
$wheat: #FFD285;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'midnight': '#0A1F73',
        'steel-blue': '#2A8CCD',
        'snow': '#F1FDFF',
        'wheat': '#FFD285',
      },
    },
  },
};

{
  "name": "Classic Midnight & Steel Blue",
  "colors": [
    "#0A1F73",
    "#2A8CCD",
    "#F1FDFF",
    "#FFD285"
  ]
}

background: linear-gradient(135deg, #0A1F73, #2A8CCD, #F1FDFF, #FFD285);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2026-05-14 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood