Palette

Oceanic Wave Crest

Captures the powerful beauty of the ocean, from its deep depths to the serene foam of breaking waves.

coolcalm5 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

#001F3F#0074D9#7FDBFF#B0E0E6#E0FFFF

Palette guide

How to use Oceanic Wave Crest

Overview

The Oceanic Wave Crest palette captures the powerful beauty of the ocean, from its deep depths to the serene foam of breaking waves. This tranquil cool palette, featuring a profound `#001F3F` deep blue, a classic `#0074D9` royal blue, and an ethereal `#E0FFFF` near-white, offers designers and developers a versatile range for creating calming yet impactful designs. It evokes a sense of vastness and clarity, ideal for projects requiring a clean, professional, and soothing aesthetic. The progression from dark to light allows for excellent visual hierarchy and depth.

Best used for

Spa and wellness brand identity
Luxury resort and travel websites
Clean technology user interfaces
Educational and scientific platforms
Marine conservation marketing materials
Minimalist architectural renderings

Suggested color roles

primary

Utilize `#001F3F` as a commanding primary color for strong branding, navigation bars, or foundational backgrounds. It conveys authority and depth.

secondary

Employ `#0074D9` for secondary elements, important links, or graphical accents. It offers a classic, engaging blue that complements the primary.

accent

Introduce `#7FDBFF` sparingly for bright highlights, interactive states, or to add a touch of airy lightness. It provides a striking contrast.

background

Apply `#E0FFFF` as a crisp, serene background for content areas, providing maximum readability and a fresh, expansive feel.

text

For excellent readability, use `#001F3F` for body text on lighter backgrounds like `#E0FFFF` or `#B0E0E6`. For headlines, `#0074D9` also works well.

Accessibility notes

Ensure `#001F3F` text on `#E0FFFF` (or `#B0E0E6`) has high contrast, which this combination achieves well for WCAG compliance.
Be cautious when using `#7FDBFF` for small text, as its contrast with lighter backgrounds might be insufficient.
For text on `#0074D9`, consider using `#E0FFFF` to ensure strong readability.
Avoid placing light text on other light colors like `#B0E0E6` or `#7FDBFF` to prevent accessibility issues.

Recommended combinations

Deep Sea Clarity

Ideal for a striking hero section: `#001F3F` as a background, `#E0FFFF` for prominent text, and `#0074D9` for a strong call-to-action.

#001F3F · #E0FFFF · #0074D9

Wave Foam Transition

Excellent for subtle gradients or background layers, creating a sense of lightness and fluidity, mimicking breaking waves.

#7FDBFF · #B0E0E6 · #E0FFFF

Vast Ocean Depths

Use for data visualizations or infographics where layers of blue represent increasing depth or emphasis, from dark to light.

#001F3F · #0074D9 · #7FDBFF

CSS variables

:root {
  --oceanic-wave-crest-1: #001F3F;
  --oceanic-wave-crest-2: #0074D9;
  --oceanic-wave-crest-3: #7FDBFF;
  --oceanic-wave-crest-4: #B0E0E6;
  --oceanic-wave-crest-5: #E0FFFF;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "oceanic-wave-crest": {
        1: "#001F3F",
        2: "#0074D9",
        3: "#7FDBFF",
        4: "#B0E0E6",
        5: "#E0FFFF",
      }
    }
  }
}

Hex values

Color 1#001F3F

Color 2#0074D9

Color 3#7FDBFF

Color 4#B0E0E6

Color 5#E0FFFF

Accessibility

Contrast checker

3.5:1AA18

10.6:1AAA

11.6:1AAA

15.7:1AAA

3.5:1AA18

3:1Fail

3.3:1AA18

4.4:1AA18

10.6:1AAA

3:1Fail

1.1:1Fail

1.5:1Fail

11.6:1AAA

3.3:1AA18

1.1:1Fail

1.4:1Fail

15.7:1AAA

4.4:1AA18

1.5:1Fail

1.4:1Fail

Similar palettes

More like Oceanic Wave Crest

Coastal Breeze Serene

Coastal Serenity Shores

Deep Ocean Bloom