Palette

Coastal Serenity Shores

Reflects the peaceful meeting of sea and sky on a cool, quiet morning shore, evoking a sense of calm.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Serenity Shores 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 Serenity Shores.

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

Data visualization

#87A9BE#BADCEB#EBF3F8#4A6C8C#B2CADB

Palette guide

How to use Coastal Serenity Shores

Overview

The Coastal Serenity Shores palette offers a deeply calming collection of cool blues and soft greys, reflecting the peaceful meeting of sea and sky. Ranging from the anchoring #4A6C8C to the serene #87A9BE and the expansive #BADCEB, this palette establishes a profound sense of tranquility. The lightest #EBF3F8 provides a clean, airy canvas, while #B2CADB acts as a versatile mid-tone. This harmonious blend is ideal for designers seeking to create inviting, calm, and sophisticated aesthetics. It's particularly well-suited for projects that aim to evoke clarity, peace, and a quiet, contemplative atmosphere, reminiscent of a tranquil morning by the ocean.

Best used for

Luxury spa and retreat branding
High-end interior design for bedrooms
Mindfulness and meditation app interfaces
Coastal resort and hotel marketing
Professional services websites
Art gallery and museum branding

Suggested color roles

primary

Utilize #87A9BE as a dominant, calming blue for main sections or branding elements.

secondary

Employ #BADCEB for secondary content blocks, navigation, or subtle graphical elements, adding lightness.

accent

Introduce #B2CADB as a soft accent for highlights, icons, or delicate decorative touches.

background

Choose #EBF3F8 for a light, airy background, or #BADCEB for a slightly more saturated yet soft canvas.

text

Use #4A6C8C for body text and headings for excellent readability against lighter palette colors, or a dark charcoal.

Accessibility notes

The darker #4A6C8C provides excellent contrast for text on #EBF3F8, #BADCEB, and #87A9BE.
Ensure sufficient contrast when using #EBF3F8 for text on any background, as it is very light.
Avoid using #BADCEB for text on #87A9BE backgrounds; opt for a darker or lighter contrasting color.
Check contrast ratios for all text pairings, especially for large blocks of content to ensure readability.

Recommended combinations

Deep Horizon

Create a sophisticated, deep-to-light gradient for headers, main content, and bright accents in web design.

#4A6C8C · #87A9BE · #EBF3F8

Sky & Shore

Ideal for clean, minimalist interfaces with a very light background, a soft mid-tone, and strong dark text.

#EBF3F8 · #BADCEB · #4A6C8C

Serene Layers

Use for subtle visual layering, combining mid-tone blues for depth and a lighter one for highlights.

#B2CADB · #87A9BE · #BADCEB

CSS variables

:root {
  --coastal-serenity-shores-1: #87A9BE;
  --coastal-serenity-shores-2: #BADCEB;
  --coastal-serenity-shores-3: #EBF3F8;
  --coastal-serenity-shores-4: #4A6C8C;
  --coastal-serenity-shores-5: #B2CADB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-serenity-shores": {
        1: "#87A9BE",
        2: "#BADCEB",
        3: "#EBF3F8",
        4: "#4A6C8C",
        5: "#B2CADB",
      }
    }
  }
}

Hex values

Color 1#87A9BE

Color 2#BADCEB

Color 3#EBF3F8

Color 4#4A6C8C

Color 5#B2CADB

Accessibility

Contrast checker

1.7:1Fail

2.2:1Fail

1.5:1Fail

1.7:1Fail

1.3:1Fail

3.8:1AA18

1.2:1Fail

2.2:1Fail

1.3:1Fail

4.9:1AA

1.5:1Fail

2.2:1Fail

3.8:1AA18

4.9:1AA

3.2:1AA18

1.5:1Fail

1.2:1Fail

1.5:1Fail

3.2:1AA18

Similar palettes

More like Coastal Serenity Shores

Coastal Serenity Shores

See it in context.

Ready when you are.

Built with Coastal Serenity Shores.

How to use Coastal Serenity Shores

Overview

Best used for

Suggested color roles

Accessibility notes

Recommended combinations

Deep Horizon

Sky & Shore

Serene Layers

CSS variables

Tailwind config

Related searches

Hex values

Contrast checker

More like Coastal Serenity Shores