Back to palettes

Palette

Shoreline Serenity Mist

A tranquil palette reflecting the peaceful blend of deep blue ocean, soft sand, and misty sea air, pure serenity.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Shoreline Serenity 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 Shoreline Serenity Mist.

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

Data visualization

#007BA7#D2B48C#F5F5F5#AFEEEE#A9A9A9

Palette guide

How to use Shoreline Serenity Mist

Overview

The Shoreline Serenity Mist palette captures the tranquil essence of a peaceful coastline, blending deep ocean blues with soft sandy beiges and misty greys. The vibrant #007BA7 provides a refreshing anchor, while #D2B48C introduces the warmth of beach sand. Light and airy tones like #F5F5F5 and #AFEEEE evoke sea foam and mist, balanced by the grounding #A9A9A9 grey. This palette is ideal for creating designs that feel calm, clean, and inviting, perfect for wellness, travel, or any brand aiming for a fresh, approachable, and serene aesthetic.

Best used for

  • Spa and wellness brand identities
  • Coastal resort websites
  • Eco-friendly product packaging
  • Beach-themed home decor branding
  • Travel blogs focusing on serene destinations
  • Lifestyle apps promoting relaxation

Suggested color roles

primary

Use #007BA7 for headings, calls to action, or key brand elements to convey freshness and trust.

secondary

Apply #D2B48C for subheadings, decorative elements, or content dividers, adding warmth and natural texture.

accent

#AFEEEE works well for subtle highlights, hover states, or background textures, maintaining an airy feel.

background

#F5F5F5 provides a crisp, clean canvas, ensuring excellent readability and a spacious feel.

text

For primary text, a deep charcoal or black is recommended for optimal legibility against #F5F5F5. #A9A9A9 can be used for secondary text or captions.

Accessibility notes

  • Ensure good contrast between text and background, especially when using #A9A9A9 for text on #F5F5F5. A darker grey might be needed.
  • #D2B48C and #AFEEEE are too light for body text on #F5F5F5; use them for accents or larger decorative elements.
  • #007BA7 provides excellent contrast for text on #F5F5F5.
  • Check contrast for interactive elements, ensuring visible states for focus and hover.

Recommended combinations

Ocean Breeze

Ideal for clean, refreshing interfaces, main navigation, or headers.

#007BA7 · #F5F5F5 · #AFEEEE

Sandy Shores

Perfect for content blocks, testimonials, or areas needing a warm, grounded feel.

#D2B48C · #F5F5F5 · #A9A9A9

Misty Coast

Effective for layered designs, subtle gradients, or brand elements combining cool and warm tones.

#007BA7 · #A9A9A9 · #D2B48C

CSS variables

:root {
  --shoreline-serenity-mist-1: #007BA7;
  --shoreline-serenity-mist-2: #D2B48C;
  --shoreline-serenity-mist-3: #F5F5F5;
  --shoreline-serenity-mist-4: #AFEEEE;
  --shoreline-serenity-mist-5: #A9A9A9;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "shoreline-serenity-mist": {
        1: "#007BA7",
        2: "#D2B48C",
        3: "#F5F5F5",
        4: "#AFEEEE",
        5: "#A9A9A9",
      }
    }
  }
}

Related searches

serene coastal color palettecalm ocean blue beigemisty beach color schemefresh nautical brandingtranquil wellness colors

Palette colors

Hex values

Color 1#007BA7
·
Color 2#D2B48C
·
Color 3#F5F5F5
·
Color 4#AFEEEE
·
Color 5#A9A9A9
·

Accessibility

Contrast checker

1
2
3
4
5
1
2.4:1Fail
4.4:1AA18
3.7:1AA18
2:1Fail
2
2.4:1Fail
1.8:1Fail
1.5:1Fail
1.2:1Fail
3
4.4:1AA18
1.8:1Fail
1.2:1Fail
2.2:1Fail
4
3.7:1AA18
1.5:1Fail
1.2:1Fail
1.8:1Fail
5
2:1Fail
1.2:1Fail
2.2:1Fail
1.8:1Fail

Similar palettes

More like Shoreline Serenity Mist

View all cool
Azure Coast Serenity
Coastal Breeze Mist
Coastal Fog Drift
Coastal Seafoam Spray
Ocean Spray Whispers
Aegean Isle Horizon