Back to palettes

Palette

Ocean Breeze Serene

A tranquil blend reflecting the gentle sea, from light foam to deep, calm waters.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Breeze Serene reads on buttons, badges, and alerts before you commit.

This alert border and accent use the palette's detail color.

Marketing banner

Launch

Built with Ocean Breeze Serene.

A bolder treatment that stretches the primary and secondary colors across a full gradient banner.

Data visualization

#ADD8E6#B0E0E6#87CEEB#6A5ACD#4169E1

Palette guide

How to use Ocean Breeze Serene

Overview

The Ocean Breeze Serene palette captures the tranquil essence of the sea, from light, airy foam to deep, calm waters. It features a soothing gradient of blues, starting with the delicate #ADD8E6 (Light Blue) and #B0E0E6 (Powder Blue), transitioning to the more pronounced #87CEEB (Sky Blue). The palette deepens with the rich #6A5ACD (Slate Blue) and the profound #4169E1 (Royal Blue), offering versatility for various design elements. This collection is perfect for creating calm, inviting, and trustworthy digital environments. Designers can use it for wellness apps, financial services, or any brand aiming for a serene and professional aesthetic.

Best used for

  • Wellness and meditation apps
  • Financial service websites
  • Educational platforms
  • Medical and healthcare branding
  • Travel and tourism websites
  • Baby product packaging

Suggested color roles

primary

Use #4169E1 as a strong, trustworthy primary color for buttons, headers, or key graphical elements.

secondary

Employ #6A5ACD for secondary sections, backgrounds, or important data visualization, providing depth.

accent

Apply #ADD8E6 or #B0E0E6 for subtle highlights, interactive states, or decorative elements to introduce lightness.

background

Lighter shades like #ADD8E6 or #B0E0E6 create a clean, airy background, perfect for content-heavy pages.

text

For text on light backgrounds, use a dark charcoal or black. For text on #4169E1 or #6A5ACD, white or very light grey ensures readability.

Accessibility notes

  • Ensure sufficient contrast for all text. Dark text on #ADD8E6 or #B0E0E6 is crucial for readability.
  • White text on #4169E1 and #6A5ACD will generally meet WCAG contrast requirements.
  • Avoid using #87CEEB text on #B0E0E6 backgrounds due to low contrast; use darker blues or black instead.
  • Use the lighter blues like #ADD8E6 for backgrounds and the darker blues for text or key UI elements to ensure visibility.

Recommended combinations

Deep Calm

Excellent for a primary brand presence, combining depth with a clear, calm mid-tone for content.

#4169E1 · #6A5ACD · #87CEEB

Light & Airy

Ideal for clean, minimalist backgrounds and subtle layering, evoking a gentle sky or calm water surface.

#ADD8E6 · #B0E0E6 · #87CEEB

Serene Contrast

A strong dark blue base with light, airy accents or backgrounds, perfect for hero sections with clear calls to action.

#4169E1 · #ADD8E6 · #B0E0E6

CSS variables

:root {
  --ocean-breeze-serene-1: #ADD8E6;
  --ocean-breeze-serene-2: #B0E0E6;
  --ocean-breeze-serene-3: #87CEEB;
  --ocean-breeze-serene-4: #6A5ACD;
  --ocean-breeze-serene-5: #4169E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-breeze-serene": {
        1: "#ADD8E6",
        2: "#B0E0E6",
        3: "#87CEEB",
        4: "#6A5ACD",
        5: "#4169E1",
      }
    }
  }
}

Related searches

calm blue color schemeserene ocean palettelight and dark bluesaquatic design colorstrustworthy brand blues

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#B0E0E6
·
Color 3#87CEEB
·
Color 4#6A5ACD
·
Color 5#4169E1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.1:1Fail
3.5:1AA18
3.2:1AA18
2
1.1:1Fail
1.2:1Fail
3.7:1AA18
3.4:1AA18
3
1.1:1Fail
1.2:1Fail
3:1AA18
2.8:1Fail
4
3.5:1AA18
3.7:1AA18
3:1AA18
1.1:1Fail
5
3.2:1AA18
3.4:1AA18
2.8:1Fail
1.1:1Fail

Similar palettes

More like Ocean Breeze Serene

View all cool
Abyssal Current Glide
Azure Coast Serenity
Calm Ocean Swell
Coastal Seafoam Spray
Ocean Depth Mysteries
Oceanic Rhapsody