Back to palettes

Palette

Ocean Spray Mist

Soft, muted tones reflecting the gentle, airy mist rising from ocean waves.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#A2BEC2#C2D4D6#DDEAEB#7C9AA1#5B7B83

Palette guide

How to use Ocean Spray Mist

Overview

The Ocean Spray Mist palette features soft, muted tones reflecting the gentle, airy mist rising from ocean waves. This subtle collection ranges from the very light, almost white #DDEAEB, through the soft, cool greys of #C2D4D6 and #A2BEC2, to the deeper, grounding blue-greys of #7C9AA1 and #5B7B83. The palette exudes a quiet sophistication and a sense of calm, making it ideal for minimalist and understated designs. Designers can use these hex codes to create projects that convey tranquility, natural elegance, and a sense of refined simplicity. Developers will find this palette perfect for building user interfaces that are clean, unobtrusive, and soothing, suitable for art galleries, luxury personal care brands, or sophisticated tech interfaces.

Best used for

  • Minimalist branding and web design
  • Art gallery websites or catalogs
  • Luxury personal care product packaging
  • Sophisticated tech interfaces
  • Interior design with a calm aesthetic
  • Photography portfolios

Suggested color roles

primary

#5B7B83 (Deep Blue-Grey) - Excellent for primary headings, navigation, or strong brand elements, providing a grounded, sophisticated anchor.

secondary

#7C9AA1 (Muted Grey-Blue) - Use for subheadings, secondary buttons, or background sections, offering a subtle yet distinct presence.

accent

#A2BEC2 (Soft Blue-Grey) - Ideal for interactive elements, borders, or subtle highlights, maintaining the palette's muted elegance.

background

#DDEAEB (Very Light Blue-Grey) - Provides a very light, almost white canvas, enhancing the airy and minimalist feel.

text

A dark charcoal like #333333 or #5B7B83 for headings, ensuring optimal readability on light backgrounds.

Accessibility notes

  • #DDEAEB is very light; use dark text (e.g., black) for all content on this background.
  • Text in #C2D4D6, #A2BEC2, and #7C9AA1 will require dark text for WCAG AA contrast.
  • #5B7B83 provides good contrast for light text, but dark text on light backgrounds is generally preferred.
  • Ensure sufficient contrast for interactive elements, especially if using similar light grey-blues.

Recommended combinations

Misty Calm

A very light background with a deep blue-grey for primary content and a muted grey-blue for secondary details, creating a sophisticated, calm interface.

#DDEAEB · #5B7B83 · #7C9AA1

Subtle Depths

Layered soft blue-greys for a nuanced background, with the deepest blue-grey providing a strong, grounding contrast for text or key elements.

#A2BEC2 · #C2D4D6 · #5B7B83

Refined Simplicity

A clean, almost white base with soft blue-grey accents and a slightly darker grey-blue for subtle hierarchy, perfect for minimalist designs.

#DDEAEB · #A2BEC2 · #7C9AA1

CSS variables

:root {
  --ocean-spray-mist-1: #A2BEC2;
  --ocean-spray-mist-2: #C2D4D6;
  --ocean-spray-mist-3: #DDEAEB;
  --ocean-spray-mist-4: #7C9AA1;
  --ocean-spray-mist-5: #5B7B83;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "ocean-spray-mist": {
        1: "#A2BEC2",
        2: "#C2D4D6",
        3: "#DDEAEB",
        4: "#7C9AA1",
        5: "#5B7B83",
      }
    }
  }
}

Related searches

muted ocean color palettecalm grey blue schememinimalist coastal designsubtle elegant UI colorsserene misty aesthetic

Palette colors

Hex values

Color 1#A2BEC2
·
Color 2#C2D4D6
·
Color 3#DDEAEB
·
Color 4#7C9AA1
·
Color 5#5B7B83
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.3:1Fail
1.6:1Fail
1.5:1Fail
2.3:1Fail
2
1.3:1Fail
1.2:1Fail
2:1Fail
3:1Fail
3
1.6:1Fail
1.2:1Fail
2.4:1Fail
3.7:1AA18
4
1.5:1Fail
2:1Fail
2.4:1Fail
1.5:1Fail
5
2.3:1Fail
3:1Fail
3.7:1AA18
1.5:1Fail

Similar palettes

More like Ocean Spray Mist

View all cool
Aqua Dream Glow
Azure Abyss Calm
Azure Lagoon Drift
Azure Reef Currents
Calm Ocean Swell
Cerulean Shore Breeze