Back to palettes

Palette

Ocean Wave Serenity

Calming blues flowing together, capturing the peaceful rhythm of ocean waves on a serene day.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Ocean Wave Serenity 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 Wave Serenity.

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

Data visualization

#ADD8E6#87CEEB#6495ED#4682B4#1E90FF

Palette guide

How to use Ocean Wave Serenity

Overview

The "Ocean Wave Serenity" palette captures the peaceful rhythm of ocean waves on a serene day with its calming blues flowing together. This cool and harmonious collection, featuring #ADD8E6, #87CEEB, and #6495ED, offers a clear progression from light, airy tones to deep, authoritative blues. Designers can utilize these hues to craft tranquil and trustworthy interfaces, while developers will find the depth provided by #4682B4 and the vibrant punch of #1E90FF excellent for establishing clear visual hierarchy and focus. Ideal for projects that require a sense of calm, reliability, and natural beauty, this palette ensures a cohesive and visually pleasing user experience, reminiscent of a perfectly calm sea.

Best used for

  • Financial advisory websites
  • Healthcare and medical platforms
  • Education and e-learning portals
  • Wellness and mental health apps
  • Insurance company branding
  • Government or public service websites

Suggested color roles

primary

Designate #ADD8E6 as the main light blue, perfect for backgrounds, headers, or large content blocks, providing a soft, expansive feel.

secondary

Utilize #87CEEB for subheadings, active states, or supporting graphical elements, offering a slightly deeper yet still airy blue.

accent

Apply #1E90FF as a strong, vibrant accent for calls-to-action, important links, or focal points, providing necessary depth and energy.

background

Use #ADD8E6 as a soft, inviting background, ensuring excellent readability and a calm, expansive aesthetic.

text

For body text, a dark blue like #4682B4 or a deep charcoal (#333333) on #ADD8E6 provides optimal contrast and a professional appearance.

Accessibility notes

  • Ensure #1E90FF provides strong contrast against lighter blues like #ADD8E6 for text or interactive elements.
  • For body text on #ADD8E6, use a dark color like #4682B4 or black to meet WCAG AA/AAA standards easily.
  • Avoid using #87CEEB for small text on #ADD8E6 backgrounds as contrast may be insufficient; reserve for large titles.
  • Leverage #ADD8E6 for backgrounds to maximize readability of all darker elements, especially #4682B4 and #1E90FF.

Recommended combinations

Calm Waters

A light blue base with a mid-tone for content and a vibrant blue for strong accents or key interactive elements.

#ADD8E6 · #87CEEB · #1E90FF

Deep Current

Create a gradient or layered effect for elements requiring depth, from a medium blue to a deep, powerful blue.

#6495ED · #4682B4 · #1E90FF

Serene Shore

A light background with a deep blue for main content and a calming mid-blue for secondary information.

#ADD8E6 · #4682B4 · #6495ED

CSS variables

:root {
  --ocean-wave-serenity-1: #ADD8E6;
  --ocean-wave-serenity-2: #87CEEB;
  --ocean-wave-serenity-3: #6495ED;
  --ocean-wave-serenity-4: #4682B4;
  --ocean-wave-serenity-5: #1E90FF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-wave-serenity": {
        1: "#ADD8E6",
        2: "#87CEEB",
        3: "#6495ED",
        4: "#4682B4",
        5: "#1E90FF",
      }
    }
  }
}

Related searches

calming blue color schemeocean wave ui colorsserene web design palettereliable blue brandinglight to dark blue palette

Palette colors

Hex values

Color 1#ADD8E6
·
Color 2#87CEEB
·
Color 3#6495ED
·
Color 4#4682B4
·
Color 5#1E90FF
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.1:1Fail
1.9:1Fail
2.7:1Fail
2.1:1Fail
2
1.1:1Fail
1.7:1Fail
2.4:1Fail
1.9:1Fail
3
1.9:1Fail
1.7:1Fail
1.4:1Fail
1.1:1Fail
4
2.7:1Fail
2.4:1Fail
1.4:1Fail
1.3:1Fail
5
2.1:1Fail
1.9:1Fail
1.1:1Fail
1.3:1Fail

Similar palettes

More like Ocean Wave Serenity

View all cool
Abyssal Blue Descent
Abyssal Current Glide
Aegean Coast Whisper
Aqua Marine Vista
Aqua Ocean Dream
Arctic Ocean