Back to palettes

Palette

Ocean Salt Spray

The fresh, airy tones of ocean waves crashing, evoking the feel of cool salt spray on the breeze.

coolnatural5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#E0FFFF#ADD8E6#B0E0E6#6A838E#87CEFA

Palette guide

How to use Ocean Salt Spray

Overview

The Ocean Salt Spray palette embodies the fresh, airy tones of ocean waves, evoking the cool mist on a breeze. It features a range of captivating blues, from the very light #E0FFFF, reminiscent of seafoam, to the gentle #ADD8E6 and #B0E0E6, reflecting clear water. The deeper, grounding presence of #6A838E (a muted blue-grey) adds a touch of oceanic depth, while #87CEFA provides a slightly more vibrant sky blue. This palette is perfect for designers seeking a clean, refreshing, and calming aesthetic. Developers can utilize these hex codes to create user interfaces that feel open, tranquil, and airy, ideal for wellness apps, coastal real estate, or minimalist branding.

Best used for

  • Coastal living and real estate branding
  • Spa and relaxation applications
  • Environmental awareness campaigns
  • Minimalist website designs
  • Weather-related apps or dashboards
  • Bath and body product packaging

Suggested color roles

primary

#87CEFA (Light Sky Blue) - Excellent for main navigation, key headings, or prominent graphical elements to convey freshness.

secondary

#ADD8E6 (Light Blue) - Use for subheadings, background sections, or less prominent UI elements, offering a softer blue.

accent

#6A838E (Muted Blue-Grey) - Ideal for subtle accents, borders, or text elements that need to stand out with understated elegance.

background

#E0FFFF (Light Cyan) - Provides a very light, almost white canvas, enhancing the airy and expansive feel of the design.

text

A dark charcoal like #333333 or even #6A838E for headings, ensuring excellent readability against the light blues.

Accessibility notes

  • #E0FFFF is very light; use dark text (e.g., black) for all content on this background.
  • #ADD8E6, #B0E0E6, and #87CEFA require dark text for WCAG AA contrast.
  • #6A838E provides good contrast for light text, but dark text on it might be too subtle.
  • Ensure sufficient color differentiation for interactive elements if using similar light blues.

Recommended combinations

Calm Horizon

A very light background, a vibrant sky blue for primary elements, and a muted blue-grey for text or subtle accents, creating a spacious feel.

#E0FFFF · #87CEFA · #6A838E

Gentle Waves

Layered light blues for a soft, undulating effect, with the deeper blue-grey providing grounding text or dividers.

#ADD8E6 · #B0E0E6 · #6A838E

Fresh & Clean

A bright, clean base with two distinct light blues for hierarchy and visual interest, perfect for minimalist designs.

#E0FFFF · #ADD8E6 · #87CEFA

CSS variables

:root {
  --ocean-salt-spray-1: #E0FFFF;
  --ocean-salt-spray-2: #ADD8E6;
  --ocean-salt-spray-3: #B0E0E6;
  --ocean-salt-spray-4: #6A838E;
  --ocean-salt-spray-5: #87CEFA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-salt-spray": {
        1: "#E0FFFF",
        2: "#ADD8E6",
        3: "#B0E0E6",
        4: "#6A838E",
        5: "#87CEFA",
      }
    }
  }
}

Related searches

ocean blue color palettecalm salt spray hueslight cyan blue schemecoastal minimalist designrefreshing water tones UI

Palette colors

Hex values

Color 1#E0FFFF
·
Color 2#ADD8E6
·
Color 3#B0E0E6
·
Color 4#6A838E
·
Color 5#87CEFA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.4:1Fail
1.4:1Fail
3.8:1AA18
1.6:1Fail
2
1.4:1Fail
1.1:1Fail
2.6:1Fail
1.1:1Fail
3
1.4:1Fail
1.1:1Fail
2.8:1Fail
1.2:1Fail
4
3.8:1AA18
2.6:1Fail
2.8:1Fail
2.3:1Fail
5
1.6:1Fail
1.1:1Fail
1.2:1Fail
2.3:1Fail

Similar palettes

More like Ocean Salt Spray

View all cool
Azure Coast Relic
Lapis Tidepool
Azure Coastline
Beryl Stream
Celestial Ocean Mirror
Coastal Rockpool