Back to palettes

Palette

Overcast Coast Serene

Soft, cool tones capture the tranquil, muted beauty of a cloudy day along a vast, serene coastline.

coolcalm5 colors
More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Overcast Coast 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 Overcast Coast Serene.

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

Data visualization

#668899#88AABB#AACCDE#CCEEDD#EEF0F2

Palette guide

How to use Overcast Coast Serene

Overview

The Overcast Coast Serene palette captures the tranquil, muted beauty of a cloudy day along a vast, serene coastline. This collection features soft, cool tones, ranging from the deep `#668899` (Cadet Blue) to the airy `#EEF0F2` (Whisper White). Mid-tones like `#88AABB` (Light Slate Gray), `#AACCDE` (Light Steel Blue), and `#CCEEDD` (Pale Green) provide a harmonious blend of blues and greys, evoking a sense of peace and calm. Designers can leverage this palette for projects requiring a soothing, minimalist, or nature-inspired aesthetic that promotes relaxation and clarity.

Best used for

  • Wellness and mindfulness brand identity
  • Minimalist and calming digital interfaces
  • Environmental and nature-focused organizations
  • Serene home decor and textile design
  • Spa and retreat marketing materials
  • Photography and art with a tranquil mood

Suggested color roles

primary

Use `#88AABB` (Light Slate Gray) as a gentle yet robust primary color for main sections or headings, providing a soft anchor.

secondary

Employ `#AACCDE` (Light Steel Blue) for supporting graphics, sub-sections, or as a lighter background accent, adding a refreshing touch.

accent

Apply `#668899` (Cadet Blue) for grounding accents, navigation elements, or subtle calls to action, providing depth and a touch of cool authority.

background

The very light `#EEF0F2` (Whisper White) is ideal for expansive, clean backgrounds, creating a sense of openness and tranquility. `#CCEEDD` can also serve as a soft background.

text

For text on lighter backgrounds, `#668899` (Cadet Blue) or a deep charcoal provides excellent readability. On darker shades like `#668899`, white or a very light gray is recommended.

Accessibility notes

  • Text on `#EEF0F2`, `#CCEEDD`, and `#AACCDE` must be dark, such as `#668899`, to meet WCAG AA contrast standards.
  • Avoid light text on `#88AABB` as it may not provide sufficient contrast.
  • White text on `#668899` generally offers good readability.
  • For a monochromatic look, ensure sufficient lightness difference between text and background for legibility.

Recommended combinations

Misty Shore

Creates a soft, ethereal gradient reminiscent of a misty coastline, ideal for serene backgrounds.

#EEF0F2 · #CCEEDD · #AACCDE

Deep Calm

Offers a sophisticated blend of cool blues and grays, perfect for creating depth in calming designs.

#668899 · #88AABB · #AACCDE

Clear Horizon

Provides clear contrast for information hierarchy, balancing a light base with a strong, cool accent.

#EEF0F2 · #668899 · #AACCDE

CSS variables

:root {
  --overcast-coast-serene-1: #668899;
  --overcast-coast-serene-2: #88AABB;
  --overcast-coast-serene-3: #AACCDE;
  --overcast-coast-serene-4: #CCEEDD;
  --overcast-coast-serene-5: #EEF0F2;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "overcast-coast-serene": {
        1: "#668899",
        2: "#88AABB",
        3: "#AACCDE",
        4: "#CCEEDD",
        5: "#EEF0F2",
      }
    }
  }
}

Related searches

calm coastal color paletteovercast blue gray schemeserene cool tones designminimalist nature colorstranquil ocean hues branding

Palette colors

Hex values

Color 1#668899
·
Color 2#88AABB
·
Color 3#AACCDE
·
Color 4#CCEEDD
·
Color 5#EEF0F2
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
2.2:1Fail
3:1AA18
3.3:1AA18
2
1.5:1Fail
1.5:1Fail
2:1Fail
2.2:1Fail
3
2.2:1Fail
1.5:1Fail
1.4:1Fail
1.5:1Fail
4
3:1AA18
2:1Fail
1.4:1Fail
1.1:1Fail
5
3.3:1AA18
2.2:1Fail
1.5:1Fail
1.1:1Fail

Similar palettes

More like Overcast Coast Serene

View all cool
Azure Coast Dream
Ocean Foam Serene
Azure Abyss Calm
Azure Coast Serenity
Azure Coastline Calm
Azure Horizon Dream