What are the hex codes in the Harbor Blue palette?

The Harbor Blue color palette consists of Prussian Blue #0B3954, Teal #087E8B, Powder Blue #BFD7EA, White #FFFFFF.

How should I use the Harbor Blue palette on a website?

Use White #FFFFFF as the background, Prussian Blue #0B3954 for text, Teal #087E8B for buttons and links, and Powder Blue #BFD7EA for accents. 3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Prussian Blue on White at 12.16:1.

Which colors in Harbor Blue have enough contrast for text?

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

#0B3954Prussian Blue

#087E8BTeal

#BFD7EAPowder Blue

#FFFFFFWhite

Harbor Blue color palette

Ocean Muted Cold Teal White

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Prussian Blue	`#0B3954`	`rgb(11, 57, 84)`	`hsl(202, 77%, 19%)`	`oklch(32.9% 0.067 240)`
Teal	`#087E8B`	`rgb(8, 126, 139)`	`hsl(186, 89%, 29%)`	`oklch(54.3% 0.092 208)`
Powder Blue	`#BFD7EA`	`rgb(191, 215, 234)`	`hsl(207, 51%, 83%)`	`oklch(86.7% 0.037 242)`
White	`#FFFFFF`	`rgb(255, 255, 255)`	`hsl(0, 0%, 100%)`	`oklch(100.0% 0.000 0)`

Why it works and how to use it

Harbor Blue is a monochromatic color palette tagged ocean, muted, cold. A monochromatic set: the same hue family from Prussian Blue down to White. Saturation is moderate, which keeps it flexible for both interfaces and print. The overall temperature is cool.

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

Background: White (#FFFFFF) is the lightest color, so it belongs on large surfaces.
Text: Prussian Blue (#0B3954) on #FFFFFF gives 12.16:1, passing WCAG AAA.
Primary: Teal (#087E8B) is the most saturated mid-tone; use it for buttons and links (4.81:1 against the background, fine for UI elements).
Accent: Powder Blue (#BFD7EA) for highlights, badges and hover states.

3 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Prussian Blue on White at 12.16:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Harbor 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

#0B3954

#087E8B

#BFD7EA

#FFFFFF

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
`#0B3954` on `#FFFFFF`	Aa	12.16:1	AAA
`#0B3954` on `#BFD7EA`	Aa	8.18:1	AAA
`#087E8B` on `#FFFFFF`	Aa	4.81:1	AA
`#087E8B` on `#BFD7EA`	Aa	3.23:1	AA large only
`#0B3954` on `#087E8B`	Aa	2.53:1	Fail
`#BFD7EA` on `#FFFFFF`	Aa	1.49:1	Fail

:root {
  --prussian-blue: #0B3954;
  --teal: #087E8B;
  --powder-blue: #BFD7EA;
  --white: #FFFFFF;
}

$prussian-blue: #0B3954;
$teal: #087E8B;
$powder-blue: #BFD7EA;
$white: #FFFFFF;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'prussian-blue': '#0B3954',
        'teal': '#087E8B',
        'powder-blue': '#BFD7EA',
        'white': '#FFFFFF',
      },
    },
  },
};

{
  "name": "Harbor Blue",
  "colors": [
    "#0B3954",
    "#087E8B",
    "#BFD7EA",
    "#FFFFFF"
  ]
}

background: linear-gradient(135deg, #0B3954, #087E8B, #BFD7EA, #FFFFFF);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2026-01-13 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood