Palette

Foggy Shore Serene

A tranquil blend of cool blues and grays, reminiscent of a misty coastline at dawn.

monochromecalm5 colors

More monochrome palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Foggy Shore Serene 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 Foggy Shore Serene.

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

Data visualization

#364B59#647B8C#92AABF#BFD2E0#D9E4EC

Palette guide

How to use Foggy Shore Serene

Overview

The Foggy Shore Serene palette offers a tranquil blend of cool blues and grays, perfect for creating a calm and contemplative atmosphere. With its serene monochromatic progression from deep ocean blue #364B59 to the light, airy mist of #D9E4EC, alongside the balanced mid-tones like #92AABF, this collection is ideal for projects seeking a sense of peace and sophistication. Designers and developers will find these hues versatile for crafting user interfaces that feel both stable and inviting, or for branding that conveys clarity and quiet strength. The subtle variations allow for depth without overwhelming the senses, making it a truly harmonious choice.

Best used for

Wellness and spa branding
Minimalist UI design
Corporate and finance websites
Serene interior design concepts
Nature-themed photography layouts
Calm educational platforms

Suggested color roles

primary

Use #364B59 as a grounding, dominant color for headers, main navigation, or strong brand elements.

secondary

Employ #647B8C for supporting elements, subheadings, or as a rich background for sections requiring depth.

accent

Apply #BFD2E0 for subtle highlights, interactive states, or as a gentle visual break in lighter compositions.

background

Utilize #D9E4EC as a clean, airy base for main content areas, providing excellent readability for darker text.

text

For optimal contrast, use #364B59 or a dark charcoal for body text on lighter backgrounds like #D9E4EC.

Accessibility notes

Ensure #364B59 text on #D9E4EC background meets WCAG AAA contrast ratios for maximum readability.
Exercise caution using #BFD2E0 as text on #D9E4EC due to insufficient contrast; reserve it for larger decorative elements.
Use #647B8C or #364B59 for critical text elements on lighter shades to maintain accessibility.
Always test interactive elements (buttons, links) for sufficient contrast in both normal and hover states.

Recommended combinations

Deep Calm

Ideal for corporate websites, formal branding, and stable, trustworthy interfaces.

#364B59 · #647B8C · #D9E4EC

Misty Horizon

Perfect for soft UI elements, tranquil illustrations, or subtle background gradients.

#92AABF · #BFD2E0 · #D9E4EC

Shoreline Gradient

Excellent for visual storytelling, layered graphics, or creating depth in branding.

#364B59 · #92AABF · #BFD2E0

CSS variables

:root {
  --foggy-shore-serene-1: #364B59;
  --foggy-shore-serene-2: #647B8C;
  --foggy-shore-serene-3: #92AABF;
  --foggy-shore-serene-4: #BFD2E0;
  --foggy-shore-serene-5: #D9E4EC;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "foggy-shore-serene": {
        1: "#364B59",
        2: "#647B8C",
        3: "#92AABF",
        4: "#BFD2E0",
        5: "#D9E4EC",
      }
    }
  }
}

Hex values

Color 1#364B59

Color 2#647B8C

Color 3#92AABF

Color 4#BFD2E0

Color 5#D9E4EC

Accessibility

Contrast checker

2.1:1Fail

3.8:1AA18

5.9:1AA

7:1AAA

2.1:1Fail

1.8:1Fail

2.8:1Fail

3.4:1AA18

3.8:1AA18

1.8:1Fail

1.5:1Fail

1.9:1Fail

5.9:1AA

2.8:1Fail

1.5:1Fail

1.2:1Fail

7:1AAA

3.4:1AA18

1.9:1Fail

1.2:1Fail

Similar palettes

More like Foggy Shore Serene

View all monochrome

Azure Ripple Effect

Azure Depths Gradient