Back to palettes

Palette

Sea Spray Ocean

A refreshing gradient of blues and whites, mirroring the invigorating spray of waves crashing in the deep ocean.

CoolCalm5 colors
More Cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Sea Spray Ocean 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 Sea Spray Ocean.

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

Data visualization

#0D47A1#1976D2#42A5F5#B0BEC5#ECEFF1

Palette guide

How to use Sea Spray Ocean

Overview

The Sea Spray Ocean palette brings the invigorating essence of deep ocean waves to digital and print designs. Featuring a refreshing gradient of blues from the profound #0D47A1 to the vibrant #42A5F5, complemented by cool greys like #B0BEC5 and the airy #ECEFF1, this scheme evokes serenity and clarity. Ideal for designers crafting experiences that require a sense of freshness, trustworthiness, or expansive calm, it provides a versatile foundation. Developers can leverage the distinct contrast levels for accessible interfaces, ensuring visual hierarchy is maintained across various elements. This palette is perfect for conveying professionalism and a clean, open feel.

Best used for

  • Coastal-themed branding and websites
  • Tech interfaces and educational platforms
  • Environmental and marine conservation organizations
  • Travel agencies promoting sea-based destinations
  • Medical and wellness applications
  • Corporate designs seeking a professional, calming aesthetic

Suggested color roles

primary

Use #0D47A1 for strong brand presence, primary headings, or key call-to-action buttons, conveying depth and authority.

secondary

Apply #1976D2 for supporting headers, navigation elements, or important data visualization, offering balance.

accent

Employ #42A5F5 to highlight interactive elements, calls to action, or key information, drawing immediate attention.

background

Utilize #ECEFF1 as a clean, spacious primary background, providing excellent contrast for darker text and elements.

text

For optimal readability, use #0D47A1 or a deep charcoal on light backgrounds like #ECEFF1.

Accessibility notes

  • Ensure sufficient contrast when using #B0BEC5 for text on #ECEFF1; it's generally too light for body copy.
  • The contrast between #0D47A1 and #ECEFF1 is excellent for all text sizes.
  • Verify that interactive elements colored with #42A5F5 have adequate contrast against their surrounding backgrounds.
  • Consider using #1976D2 for larger headings on #ECEFF1 for good readability without being too stark.

Recommended combinations

Deep Ocean Contrast

Ideal for a clean layout with dark blue text on a light background, accented by a bright, engaging blue.

#0D47A1 · #ECEFF1 · #42A5F5

Serene Interface

Creates a calm, professional interface with a light background, subtle grey elements, and clear blue headings.

#ECEFF1 · #B0BEC5 · #1976D2

Dynamic Waves

Excellent for visual interest in headers, charts, or navigation, simulating a gradient effect of ocean depths.

#1976D2 · #42A5F5 · #0D47A1

CSS variables

:root {
  --sea-spray-ocean-1: #0D47A1;
  --sea-spray-ocean-2: #1976D2;
  --sea-spray-ocean-3: #42A5F5;
  --sea-spray-ocean-4: #B0BEC5;
  --sea-spray-ocean-5: #ECEFF1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "sea-spray-ocean": {
        1: "#0D47A1",
        2: "#1976D2",
        3: "#42A5F5",
        4: "#B0BEC5",
        5: "#ECEFF1",
      }
    }
  }
}

Related searches

ocean blue color schemecool tone web designmarine branding colorsrefreshing ui palettedeep sea hex codes

Palette colors

Hex values

Color 1#0D47A1
·
Color 2#1976D2
·
Color 3#42A5F5
·
Color 4#B0BEC5
·
Color 5#ECEFF1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.9:1Fail
3.3:1AA18
4.5:1AA
7.5:1AAA
2
1.9:1Fail
1.7:1Fail
2.4:1Fail
4:1AA18
3
3.3:1AA18
1.7:1Fail
1.4:1Fail
2.3:1Fail
4
4.5:1AA
2.4:1Fail
1.4:1Fail
1.7:1Fail
5
7.5:1AAA
4:1AA18
2.3:1Fail
1.7:1Fail

Similar palettes

More like Sea Spray Ocean

View all Cool
Arctic Glacier Melt
Muted Ocean Depth
Ocean Dreamscape
Alpine Lake Dawn
Azure Bay Retreat
Misty Lagoon Serene