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

The Azure Navy & Ocean color palette consists of Navy #03045E, Ocean #0077B6, Ice #CAF0F8, Baby Blue #74D3FF.

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

Use Ice #CAF0F8 as the background, Navy #03045E for text, Ocean #0077B6 for buttons and links, and Baby Blue #74D3FF for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Navy on Ice at 14.65:1.

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

The highest-contrast pair is #03045E on #CAF0F8 with a ratio of 14.65:1, which passes WCAG AA for normal text.

#03045ENavy

#0077B6Ocean

#CAF0F8Ice

#74D3FFBaby Blue

Azure Navy & Ocean color palette

Modern Cold Blue

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Navy	`#03045E`	`rgb(3, 4, 94)`	`hsl(239, 94%, 19%)`	`oklch(22.5% 0.146 266)`
Ocean	`#0077B6`	`rgb(0, 119, 182)`	`hsl(201, 100%, 36%)`	`oklch(54.6% 0.131 243)`
Ice	`#CAF0F8`	`rgb(202, 240, 248)`	`hsl(190, 77%, 88%)`	`oklch(93.1% 0.041 212)`
Baby Blue	`#74D3FF`	`rgb(116, 211, 255)`	`hsl(199, 100%, 73%)`	`oklch(82.5% 0.109 230)`

Why it works and how to use it

Azure Navy & Ocean is a vivid analogous color palette tagged modern, cold, blue. Analogous neighbors on the wheel (Navy, Ocean, Ice) give it a natural, low-tension flow. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is cool.

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

Background: Ice (#CAF0F8) is the lightest color, so it belongs on large surfaces.
Text: Navy (#03045E) on #CAF0F8 gives 14.65:1, passing WCAG AAA.
Primary: Ocean (#0077B6) is the most saturated mid-tone; use it for buttons and links (4.02:1 against the background, fine for UI elements).
Accent: Baby Blue (#74D3FF) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Navy on Ice at 14.65:1.

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

BrandFeaturesPricingBlogGet started

Design faster with Azure Navy & 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

#03045E

#0077B6

#CAF0F8

#74D3FF

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
`#03045E` on `#CAF0F8`	Aa	14.65:1	AAA
`#03045E` on `#74D3FF`	Aa	10.57:1	AAA
`#0077B6` on `#CAF0F8`	Aa	4.02:1	AA large only
`#03045E` on `#0077B6`	Aa	3.65:1	AA large only
`#0077B6` on `#74D3FF`	Aa	2.9:1	Fail
`#CAF0F8` on `#74D3FF`	Aa	1.39:1	Fail

Similar palettes 24 more in this mood