Palette

Coastal Breeze Mist

A refreshing collection inspired by the cool, misty air and subtle hues of a tranquil coastline.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Breeze 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 Coastal Breeze Mist.

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

Data visualization

#A7D9D3#72A5A2#E0F2F1#3F5E64#BCD8DB

Palette guide

How to use Coastal Breeze Mist

Overview

The Coastal Breeze Mist palette is a refreshing collection inspired by the cool, misty air and subtle hues of a tranquil coastline. Ranging from the light, airy #E0F2F1 to the deep, grounding #3F5E64, this palette evokes serenity, nature, and a quiet sense of calm. Designers can leverage these hex codes for eco-friendly branding, spa-like digital experiences, or natural print materials. Developers will find these harmonious tones excellent for building user interfaces that feel organic, refreshing, and inviting, with #A7D9D3 providing a balanced mid-tone and #72A5A2 offering a subtle, natural aqua accent.

Best used for

spa and wellness centers
eco-tourism websites
sustainable fashion brands
meditation apps
coastal real estate
natural product packaging

Suggested color roles

primary

#72A5A2 - A muted, earthy aqua, excellent for main headings, primary navigation, or prominent natural brand elements.

secondary

#A7D9D3 - A lighter, supportive aqua-green, perfect for subheadings, background panels, or supportive graphics.

accent

#3F5E64 - The deepest, darkest teal-grey, ideal for strong accents, important links, or focal points that require high contrast and depth.

background

#E0F2F1 - The lightest, airy blue-green, providing a clean, fresh, and expansive canvas.

text

#3F5E64 - This deep, muted teal offers excellent readability for body text against the lighter backgrounds like #E0F2F1 or #A7D9D3.

Accessibility notes

Text in #3F5E64 or #72A5A2 on backgrounds like #E0F2F1 or #A7D9D3 should meet WCAG AA contrast standards.
Avoid using lighter shades like #A7D9D3 or #BCD8DB for small text on the lightest background #E0F2F1 due to potential low contrast.
Ensure interactive elements have clear visual feedback beyond just color, especially for mid-tone aquas.
Always verify contrast ratios for all text and interactive elements, particularly for critical information.

Recommended combinations

Misty Lagoon

For creating soft, layered backgrounds or inviting card designs, evoking tranquil waters.

#E0F2F1 · #BCD8DB · #A7D9D3

Deep Calm

Ideal for professional layouts, using the deeper aquas for headlines and lighter tones for content.

#72A5A2 · #3F5E64 · #E0F2F1

Aqua Harmony

For content blocks or subtle dividers, maintaining a refreshing and harmonious visual flow with natural depth.

#A7D9D3 · #BCD8DB · #72A5A2

CSS variables

:root {
  --coastal-breeze-mist-2-1: #A7D9D3;
  --coastal-breeze-mist-2-2: #72A5A2;
  --coastal-breeze-mist-2-3: #E0F2F1;
  --coastal-breeze-mist-2-4: #3F5E64;
  --coastal-breeze-mist-2-5: #BCD8DB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-breeze-mist-2": {
        1: "#A7D9D3",
        2: "#72A5A2",
        3: "#E0F2F1",
        4: "#3F5E64",
        5: "#BCD8DB",
      }
    }
  }
}

Hex values

Color 1#A7D9D3

Color 2#72A5A2

Color 3#E0F2F1

Color 4#3F5E64

Color 5#BCD8DB

Accessibility

Contrast checker

1.8:1Fail

1.3:1Fail

4.5:1AA

1:1Fail

1.8:1Fail

2.4:1Fail

2.5:1Fail

1.8:1Fail

1.3:1Fail

2.4:1Fail

6.1:1AA

1.3:1Fail

4.5:1AA

2.5:1Fail

6.1:1AA

4.7:1AA

1:1Fail

1.8:1Fail

1.3:1Fail

4.7:1AA

Similar palettes

More like Coastal Breeze Mist

Coastal Breeze Mist

See it in context.

Ready when you are.

Built with Coastal Breeze Mist.

How to use Coastal Breeze Mist

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Misty Lagoon

Deep Calm

Aqua Harmony

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Breeze Mist