What are the hex codes in the Navy Blueberry & Ocean palette?

The Navy Blueberry & Ocean color palette consists of Cobalt #004381, Ocean #0073C6, Blueberry #008EE6, Baby Blue #9BCCFF.

How should I use the Navy Blueberry & Ocean palette on a website?

Use Baby Blue #9BCCFF as the background, Cobalt #004381 for text, Ocean #0073C6 for buttons and links, and Blueberry #008EE6 for accents. 1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cobalt on Baby Blue at 5.88:1.

Which colors in Navy Blueberry & Ocean have enough contrast for text?

The highest-contrast pair is #004381 on #9BCCFF with a ratio of 5.88:1, which passes WCAG AA for normal text.

#004381Cobalt

#0073C6Ocean

#008EE6Blueberry

#9BCCFFBaby Blue

Navy Blueberry & Ocean color palette

Vibrant Cold Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Cobalt	`#004381`	`rgb(0, 67, 129)`	`hsl(209, 100%, 25%)`	`oklch(38.4% 0.120 253)`
Ocean	`#0073C6`	`rgb(0, 115, 198)`	`hsl(205, 100%, 39%)`	`oklch(54.7% 0.155 250)`
Blueberry	`#008EE6`	`rgb(0, 142, 230)`	`hsl(203, 100%, 45%)`	`oklch(62.9% 0.165 247)`
Baby Blue	`#9BCCFF`	`rgb(155, 204, 255)`	`hsl(211, 100%, 80%)`	`oklch(82.9% 0.089 250)`

Why it works and how to use it

Navy Blueberry & Ocean is a vivid monochromatic color palette tagged vibrant, cold, blue. All four colors sit within 8° of hue, so the scheme reads as one color explored across light and dark. These are bold, punchy colors that need generous white space around them. The overall temperature is cool.

With 4 chromatic colors, Ocean takes the lead while the rest support. Lightness runs from 25% to 80%. Well suited to websites, presentations and branding.

Background: Baby Blue (#9BCCFF) is the lightest color, so it belongs on large surfaces.
Text: Cobalt (#004381) on #9BCCFF gives 5.88:1, passing WCAG AA.
Primary: Ocean (#0073C6) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
Accent: Blueberry (#008EE6) for highlights, badges and hover states.

1 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Cobalt on Baby Blue at 5.88:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Navy Blueberry & Ocean

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

#004381

#0073C6

#008EE6

#9BCCFF

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
`#004381` on `#9BCCFF`	Aa	5.88:1	AA
`#0073C6` on `#9BCCFF`	Aa	2.92:1	Fail
`#004381` on `#008EE6`	Aa	2.84:1	Fail
`#008EE6` on `#9BCCFF`	Aa	2.08:1	Fail
`#004381` on `#0073C6`	Aa	2.01:1	Fail
`#0073C6` on `#008EE6`	Aa	1.41:1	Fail

:root {
  --cobalt: #004381;
  --ocean: #0073C6;
  --blueberry: #008EE6;
  --baby-blue: #9BCCFF;
}

$cobalt: #004381;
$ocean: #0073C6;
$blueberry: #008EE6;
$baby-blue: #9BCCFF;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'cobalt': '#004381',
        'ocean': '#0073C6',
        'blueberry': '#008EE6',
        'baby-blue': '#9BCCFF',
      },
    },
  },
};

{
  "name": "Navy Blueberry & Ocean",
  "colors": [
    "#004381",
    "#0073C6",
    "#008EE6",
    "#9BCCFF"
  ]
}

background: linear-gradient(135deg, #004381, #0073C6, #008EE6, #9BCCFF);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-02-02 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood