What are the hex codes in the Prussian Blue & Obsidian Bloom palette?

The Prussian Blue & Obsidian Bloom color palette consists of Baby Blue #A2BEFF, Buttercream #FFF9E1, Prussian Blue #073B6D, Obsidian #000814.

How should I use the Prussian Blue & Obsidian Bloom palette on a website?

Use Buttercream #FFF9E1 as the background, Obsidian #000814 for text, Baby Blue #A2BEFF for buttons and links, and Prussian Blue #073B6D for accents. 4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Buttercream on Obsidian at 19.04:1.

Which colors in Prussian Blue & Obsidian Bloom have enough contrast for text?

The highest-contrast pair is #FFF9E1 on #000814 with a ratio of 19.04:1, which passes WCAG AA for normal text.

#A2BEFFBaby Blue

#FFF9E1Buttercream

#073B6DPrussian Blue

#000814Obsidian

Prussian Blue & Obsidian Bloom color palette

Dark Cold Blue Black

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Baby Blue	`#A2BEFF`	`rgb(162, 190, 255)`	`hsl(222, 100%, 82%)`	`oklch(80.5% 0.098 266)`
Buttercream	`#FFF9E1`	`rgb(255, 249, 225)`	`hsl(48, 100%, 94%)`	`oklch(98.0% 0.032 95)`
Prussian Blue	`#073B6D`	`rgb(7, 59, 109)`	`hsl(209, 88%, 23%)`	`oklch(35.1% 0.101 253)`
Obsidian	`#000814`	`rgb(0, 8, 20)`	`hsl(216, 100%, 4%)`	`oklch(13.1% 0.034 247)`

Why it works and how to use it

Prussian Blue & Obsidian Bloom is a vivid complementary color palette tagged dark, cold, blue. Baby Blue and Prussian Blue 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, Baby Blue takes the lead while the rest support. Lightness runs from 4% to 94%. Well suited to websites, presentations and branding.

Background: Buttercream (#FFF9E1) is the lightest color, so it belongs on large surfaces.
Text: Obsidian (#000814) on #FFF9E1 gives 19.04:1, passing WCAG AAA.
Primary: Baby Blue (#A2BEFF) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Prussian Blue (#073B6D) for highlights, badges and hover states.

4 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Buttercream on Obsidian at 19.04:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Prussian Blue & Obsidian Bloom

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

#A2BEFF

#FFF9E1

#073B6D

#000814

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
`#FFF9E1` on `#000814`	Aa	19.04:1	AAA
`#A2BEFF` on `#000814`	Aa	10.86:1	AAA
`#FFF9E1` on `#073B6D`	Aa	10.72:1	AAA
`#A2BEFF` on `#073B6D`	Aa	6.11:1	AA
`#073B6D` on `#000814`	Aa	1.78:1	Fail
`#A2BEFF` on `#FFF9E1`	Aa	1.75:1	Fail

:root {
  --baby-blue: #A2BEFF;
  --buttercream: #FFF9E1;
  --prussian-blue: #073B6D;
  --obsidian: #000814;
}

$baby-blue: #A2BEFF;
$buttercream: #FFF9E1;
$prussian-blue: #073B6D;
$obsidian: #000814;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'baby-blue': '#A2BEFF',
        'buttercream': '#FFF9E1',
        'prussian-blue': '#073B6D',
        'obsidian': '#000814',
      },
    },
  },
};

{
  "name": "Prussian Blue & Obsidian Bloom",
  "colors": [
    "#A2BEFF",
    "#FFF9E1",
    "#073B6D",
    "#000814"
  ]
}

background: linear-gradient(135deg, #A2BEFF, #FFF9E1, #073B6D, #000814);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2024-10-28 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood