What are the hex codes in the Denim & Prussian Blue Haze palette?

The Denim & Prussian Blue Haze color palette consists of Prussian Blue #003D63, Denim #0060AE, Peach Puff #FFD7B1, Smoke #F7F7F7.

How should I use the Denim & Prussian Blue Haze palette on a website?

Use Smoke #F7F7F7 as the background, Prussian Blue #003D63 for text, Denim #0060AE for buttons and links, and Peach Puff #FFD7B1 for accents. 4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Prussian Blue on Smoke at 10.61:1.

Which colors in Denim & Prussian Blue Haze have enough contrast for text?

The highest-contrast pair is #003D63 on #F7F7F7 with a ratio of 10.61:1, which passes WCAG AA for normal text.

#003D63Prussian Blue

#0060AEDenim

#FFD7B1Peach Puff

#F7F7F7Smoke

Denim & Prussian Blue Haze color palette

Modern Blue White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Prussian Blue	`#003D63`	`rgb(0, 61, 99)`	`hsl(203, 100%, 19%)`	`oklch(34.7% 0.086 244)`
Denim	`#0060AE`	`rgb(0, 96, 174)`	`hsl(207, 100%, 34%)`	`oklch(48.7% 0.145 252)`
Peach Puff	`#FFD7B1`	`rgb(255, 215, 177)`	`hsl(29, 100%, 85%)`	`oklch(90.4% 0.067 65)`
Smoke	`#F7F7F7`	`rgb(247, 247, 247)`	`hsl(0, 0%, 97%)`	`oklch(97.6% 0.000 0)`

Why it works and how to use it

Denim & Prussian Blue Haze is a vivid complementary color palette tagged modern, blue, white. Near-complementary hues (about 178° apart) make this a high-contrast, attention-grabbing combination. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. Warm and cool hues are mixed, which adds depth.

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

Background: Smoke (#F7F7F7) is the lightest color, so it belongs on large surfaces.
Text: Prussian Blue (#003D63) on #F7F7F7 gives 10.61:1, passing WCAG AAA.
Primary: Denim (#0060AE) is the most saturated mid-tone; use it for buttons and links (5.97:1 against the background, fine for UI elements).
Accent: Peach Puff (#FFD7B1) for highlights, badges and hover states.

4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Prussian Blue on Smoke at 10.61:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Denim & Prussian Blue Haze

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

#003D63

#0060AE

#FFD7B1

#F7F7F7

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
`#003D63` on `#F7F7F7`	Aa	10.61:1	AAA
`#003D63` on `#FFD7B1`	Aa	8.45:1	AAA
`#0060AE` on `#F7F7F7`	Aa	5.97:1	AA
`#0060AE` on `#FFD7B1`	Aa	4.75:1	AA
`#003D63` on `#0060AE`	Aa	1.78:1	Fail
`#FFD7B1` on `#F7F7F7`	Aa	1.26:1	Fail

:root {
  --prussian-blue: #003D63;
  --denim: #0060AE;
  --peach-puff: #FFD7B1;
  --smoke: #F7F7F7;
}

$prussian-blue: #003D63;
$denim: #0060AE;
$peach-puff: #FFD7B1;
$smoke: #F7F7F7;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'prussian-blue': '#003D63',
        'denim': '#0060AE',
        'peach-puff': '#FFD7B1',
        'smoke': '#F7F7F7',
      },
    },
  },
};

{
  "name": "Denim & Prussian Blue Haze",
  "colors": [
    "#003D63",
    "#0060AE",
    "#FFD7B1",
    "#F7F7F7"
  ]
}

background: linear-gradient(135deg, #003D63, #0060AE, #FFD7B1, #F7F7F7);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-12-26 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood