Back to palettes

Palette

Oceanic Wave Crest

Refreshing blues mirroring the changing colors of ocean waves as they crest and break.

coolenergetic5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Oceanic Wave Crest 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 Oceanic Wave Crest.

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

Data visualization

#00BFFF#87CEEB#ADD8E6#1E90FF#5F9EA0

Palette guide

How to use Oceanic Wave Crest

Overview

The Oceanic Wave Crest palette offers a refreshing and energetic collection of blues, mirroring the dynamic colors of ocean waves. This vibrant scheme, featuring a bright `#00BFFF` sky blue, a calming `#87CEEB` light blue, and a grounding `#5F9EA0` seafoam green, is perfect for projects demanding a sense of freshness and vitality. Designers and developers can utilize these hues to evoke clarity, movement, and a connection to nature. Its range allows for striking contrasts and harmonious blends, making it highly adaptable for various digital and print applications.

Best used for

  • Travel and tourism websites
  • Environmental non-profit campaigns
  • Sports and fitness branding
  • Children's educational apps
  • Wellness and spa promotions
  • Summer product packaging

Suggested color roles

primary

Use `#1E90FF` as a strong, dynamic primary for brand identity, main calls-to-action, or key interactive elements. It conveys energy and trustworthiness.

secondary

Apply `#00BFFF` for vibrant accents, secondary headlines, or to draw attention to specific content. It adds a lively, refreshing touch.

accent

Introduce `#5F9EA0` for a grounding, calming accent. Ideal for subtle background textures, dividers, or complementary graphics.

background

Choose `#ADD8E6` as a light, airy background for content areas, providing a clean canvas that enhances readability and lightness.

text

For main body text, use a dark charcoal or black. For headlines and larger text on light backgrounds, `#1E90FF` provides excellent readability and impact.

Accessibility notes

  • Ensure `#1E90FF` or `#00BFFF` text on `#ADD8E6` meets WCAG contrast standards, especially for smaller font sizes.
  • The lighter shades like `#87CEEB` and `#ADD8E6` are best suited for backgrounds or large graphical elements, not for small text.
  • When using `#5F9EA0` for text, ensure it's on a sufficiently light background like `#ADD8E6` to maintain readability.
  • Pairing dark text with `#ADD8E6` as a background offers the best contrast for extensive reading.

Recommended combinations

Energetic Contrast

Ideal for hero banners: `#1E90FF` for primary text, `#ADD8E6` for background, and `#00BFFF` for a striking call-to-action.

#1E90FF · #ADD8E6 · #00BFFF

Aqua Gradient

Perfect for creating smooth, refreshing gradients in UI elements, progress bars, or background textures.

#00BFFF · #87CEEB · #ADD8E6

Fresh & Grounded

Use `#5F9EA0` for section dividers or footers, `#ADD8E6` for content, and `#1E90FF` for key headings to balance calm with energy.

#5F9EA0 · #ADD8E6 · #1E90FF

CSS variables

:root {
  --oceanic-wave-crest-2-1: #00BFFF;
  --oceanic-wave-crest-2-2: #87CEEB;
  --oceanic-wave-crest-2-3: #ADD8E6;
  --oceanic-wave-crest-2-4: #1E90FF;
  --oceanic-wave-crest-2-5: #5F9EA0;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-wave-crest-2": {
        1: "#00BFFF",
        2: "#87CEEB",
        3: "#ADD8E6",
        4: "#1E90FF",
        5: "#5F9EA0",
      }
    }
  }
}

Related searches

refreshing blue palettevibrant aqua colorsenergetic cool tonesocean wave colorsbright blue design

Palette colors

Hex values

Color 1#00BFFF
·
Color 2#87CEEB
·
Color 3#ADD8E6
·
Color 4#1E90FF
·
Color 5#5F9EA0
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.2:1Fail
1.4:1Fail
1.5:1Fail
1.4:1Fail
2
1.2:1Fail
1.1:1Fail
1.9:1Fail
1.8:1Fail
3
1.4:1Fail
1.1:1Fail
2.1:1Fail
2:1Fail
4
1.5:1Fail
1.9:1Fail
2.1:1Fail
1.1:1Fail
5
1.4:1Fail
1.8:1Fail
2:1Fail
1.1:1Fail

Similar palettes

More like Oceanic Wave Crest

View all cool
Abstract Ocean Currents
Aqua Marine Sparkle
Aqua Ocean Shimmer
Celestial Ocean Reef
Aegean Blue Depths
Arctic Aurora Hues