Ocean Color Palette

Deep sea navy through lagoon teal to foam white. Cool, fresh and depth-layered.

oceanbluefresh
#05445E
#189AB4
#75E6DA
#D4F1F4
#05445e #189ab4 #75e6da #d4f1f4
#05445E #189AB4 #75E6DA #D4F1F4

Semantic roles

Assigned deterministically: lightest = background, darkest = text, most saturated = primary.

background#D4F1F4
surface#75E6DA
text#05445E
text-muted#189AB4
primary#189AB4
secondary#75E6DA
accent#75E6DA

CSS variables 

:root {
  --background: #d4f1f4;
  --surface: #75e6da;
  --text: #05445e;
  --text-muted: #189ab4;
  --primary: #189ab4;
  --secondary: #75e6da;
  --accent: #75e6da;
}
Preview in UIs →

Accessibility matrix

Text color (rows) on background (columns). Green = WCAG AA pass for normal text (≥4.5:1).

Text \ BG#05445E#189AB4#75E6DA#D4F1F4
#05445E
1.0
3.2
7.1
8.9
#189AB4
3.2
1.0
2.2
2.8
#75E6DA
7.1
2.2
1.0
1.3
#D4F1F4
8.9
2.8
1.3
1.0

Under deuteranopia

Machado et al. (2009) simulation, severity 1.0 — approximation, not a medical tool.

Colors in this palette

#05445E
rgb(5, 68, 94)
#189AB4
rgb(24, 154, 180)
#75E6DA
rgb(117, 230, 218)
#D4F1F4
rgb(212, 241, 244)

Similar palettes

Spring Color Palette
Pastel Color Palette
Dark Mode UI Palette

FAQ

How do I use the ocean color palette in CSS?

Copy the CSS variables below into :root and use var(--primary), var(--background) etc. Full palette: #05445E, #189AB4, #75E6DA, #D4F1F4.

Do these colors pass accessibility checks?

See the WCAG matrix on this page: every text-on-background pairing with ratio ≥ 4.5 passes AA for normal text; ≥ 3 passes AA for large text and UI components.