Prussian Blue

Tints & Shades

Scale from white (50) through Prussian Blue (500) to black (900), interpolated in Lab color space.

Design Applications

Color Harmonies

Similar Colors

Color Meaning & Psychology

Blue is the world's most universally preferred color across cultures. It slows respiration, lowers blood pressure, and promotes calm — the physiological opposite of red. Blue's associations with sky and water make it feel limitless, trustworthy, and reliable. In corporate design, blue dominates banking, insurance, healthcare, and technology precisely because it communicates stability. Dark navy conveys authority and tradition; royal blues suggest quality and aspiration; sky blues feel open and optimistic; teal bridges trust with modernity. The primary limitation of blue is food — it suppresses appetite, with almost no naturally blue foods existing in nature. Its very dark, near-black depth creates dramatic intensity — maximally contrastive, powerful, and reserved for focal design elements where other dark colors would disappear.

Industry Usage

Common contexts and industries where Prussian Blue is applied in professional design.

• Banking, insurance, and financial institutions
• Healthcare and medical device companies
• Enterprise software and SaaS platforms
• Government and public sector organizations
• Airlines and aviation brands
• Communication and social networking apps
• Cybersecurity and data protection products
• Pharmaceutical companies and clinical products

Accessibility Considerations

CSS & Code Examples

Tailwind CSS Utilities

Use arbitrary value syntax in Tailwind CSS to apply Prussian Blue without a custom config.

Design Tokens

Ready-to-use Prussian Blue design token in CSS custom properties, SCSS, Tailwind v3/v4, and JSON formats.

:root {
  --color-prussian-blue: #003153;
  --color-prussian-blue-rgb: 0, 49, 83;
  --color-prussian-blue-hsl: 205, 100%, 16%;
}

$color-prussian-blue: #003153;
$color-prussian-blue-rgb: 0, 49, 83;
$color-prussian-blue-hsl: 205, 100%, 16%;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'prussian-blue': '#003153',
      },
    },
  },
};

/* tailwind.css */
@theme {
  --color-prussian-blue: #003153;
}

{
  "prussian-blue": {
    "value": "#003153",
    "type": "color",
    "description": "Prussian Blue — #003153"
  }
}

Accessibility & Design Guides

Frequently Asked Questions

What is the hex code for Prussian Blue?

▾

The hex code for Prussian Blue is #003153. Its RGB values are rgb(0, 49, 83) and its HSL values are hsl(205, 100%, 16%).

What does Prussian Blue mean in design?

▾

Blue is the world's most universally preferred color across cultures. It slows respiration, lowers blood pressure, and promotes calm — the physiological opposite of red. Blue's associations with sky and water make it feel limitless, trustworthy, and reliable. In corporate design, blue dominates banking, insurance, healthcare, and technology precisely because it communicates stability. Dark navy conveys authority and tradition; royal blues suggest quality and aspiration; sky blues feel open and optimistic; teal bridges trust with modernity. The primary limitation of blue is food — it suppresses appetite, with almost no naturally blue foods existing in nature. Its very dark, near-black depth creates dramatic intensity — maximally contrastive, powerful, and reserved for focal design elements where other dark colors would disappear.

Is Prussian Blue WCAG accessible?

▾

Prussian Blue (#003153) passes WCAG AAA on white with a 13.43:1 contrast ratio. Its overall accessibility score is 96/100.

What colors go well with Prussian Blue?

▾

Prussian Blue pairs well with its complementary color Coffee (#6F4E37). Analogous colors like Tiffany Cyan and Sky Cyan also work harmoniously. Check the Color Harmonies section above for the full palette.

What is Prussian Blue used for?

▾

Prussian Blue is commonly used for: Banking, insurance, and financial institutions; Healthcare and medical device companies; Enterprise software and SaaS platforms; Government and public sector organizations; Airlines and aviation brands.

What are the CSS and Tailwind values for Prussian Blue?

▾

In CSS, use `color: #003153` or `background-color: #003153`. The CSS custom property is `--color-prussian-blue: #003153`. In Tailwind CSS, use the arbitrary value class `bg-[#003153]` for backgrounds or `text-[#003153]` for text.