Color collection

Ocean Blue Color Palettes

Ocean blue palettes for travel, wellness, fintech, and calm digital products.

OceanBlueCalm
Best for: travel pages, wellness brands, and calm SaaS productsExport: CSS, Tailwind, JSON, SVGPreview: dashboard, landing, mobile UI

How to use these palettes

Start with the primary and surface colors, then test text contrast before exporting. These palettes are most useful for travel pages, wellness brands, and calm SaaS products. Combine ocean blues with sand or white surfaces for a clear coastal feel.

Every generated palette is sorted by a UI quality score that favors readable text, clear surface separation, and controlled saturation.

UI previewPrimary
Card
Button
Accent

CSS Variables

:root {
  --primary: #3182D8;
  --accent: #D67351;
  --surface: #EBEEF4;
  --text: #121821;
  --support: #CE82A7;
}
Text / Surface contrast: 15.33:1

FAQ

Where should I use ocean blue color palettes?

These palettes are designed for travel pages, wellness brands, and calm SaaS products.

Can I copy these colors into a design system?

Yes. Each palette includes clear interface roles such as Primary, Accent, Surface, Text, and Support.

How do I avoid low contrast?

Combine ocean blues with sand or white surfaces for a clear coastal feel.

Related color directions