Palette

Coastal Cliff Retreat

Evokes a serene morning where the ocean mist meets rugged cliffs and soft sandy shores.

coolcalm5 colors

More cool palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Coastal Cliff Retreat 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 Cliff Retreat.

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

Data visualization

#4D6E8E#7CA2B0#B2D2D7#F0F5F5#D7B58D

Palette guide

How to use Coastal Cliff Retreat

Overview

The "Coastal Cliff Retreat" palette offers a serene collection of cool blues and soft neutrals, perfectly capturing the tranquil essence of a misty morning where ocean meets rugged cliffs. With deep ocean blue #4D6E8E anchoring the scheme, it progresses through the calming mid-tones of #7CA2B0 and the airy #B2D2D7. The near-white #F0F5F5 provides a pristine, expansive canvas, while #D7B58D introduces a subtle, warm sandy contrast, reminiscent of sun-kissed shores. This palette is excellent for designers seeking to evoke calm, luxury, and a connection to nature, ideal for sophisticated and relaxing environments.

Best used for

Luxury spa and wellness branding
Coastal real estate developments
High-end hospitality (boutique hotels)
Serene interior design projects
Websites for meditation or mindfulness apps
Minimalist fashion or lifestyle brands

Suggested color roles

primary

Use #4D6E8E for strong brand elements, headers, or backgrounds that require depth and a calming, authoritative presence.

secondary

Apply #7CA2B0 for supporting sections, subheadings, or UI elements, offering a lighter, approachable blue.

accent

Introduce #D7B58D for unique highlights, call-to-actions, or decorative elements, providing a warm, inviting contrast to the cool blues.

background

Employ #F0F5F5 as the primary background color, ensuring a clean, crisp, and expansive feel.

text

Use a dark charcoal (e.g., #333333) or #4D6E8E for body text against light backgrounds, ensuring readability.

Accessibility notes

Ensure #4D6E8E text has good contrast against #F0F5F5 and #B2D2D7 backgrounds.
Avoid using #F0F5F5, #B2D2D7, or #D7B58D for text as they are too light for readability on most backgrounds.
When using #D7B58D as an accent, ensure it stands out clearly from surrounding blues.
Consider using a very light text color (e.g., #F0F5F5) on #4D6E8E for optimal contrast.

Recommended combinations

Ocean Mist

Creates a fresh, airy, and sophisticated look, perfect for clean layouts and serene branding.

#4D6E8E · #F0F5F5 · #B2D2D7

Sandy Shoreline

Ideal for softer, inviting sections where the warm sand tone provides a gentle contrast against cool, light blues.

#D7B58D · #F0F5F5 · #7CA2B0

Deep Waters

Best for strong, impactful sections where depth and a subtle warm accent are desired, like footers or key feature panels.

#4D6E8E · #7CA2B0 · #D7B58D

CSS variables

:root {
  --coastal-cliff-retreat-1: #4D6E8E;
  --coastal-cliff-retreat-2: #7CA2B0;
  --coastal-cliff-retreat-3: #B2D2D7;
  --coastal-cliff-retreat-4: #F0F5F5;
  --coastal-cliff-retreat-5: #D7B58D;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-cliff-retreat": {
        1: "#4D6E8E",
        2: "#7CA2B0",
        3: "#B2D2D7",
        4: "#F0F5F5",
        5: "#D7B58D",
      }
    }
  }
}

Hex values

Color 1#4D6E8E

Color 2#7CA2B0

Color 3#B2D2D7

Color 4#F0F5F5

Color 5#D7B58D

Accessibility

Contrast checker

1.9:1Fail

3.3:1AA18

4.8:1AA

2.8:1Fail

1.9:1Fail

1.7:1Fail

2.5:1Fail

1.4:1Fail

3.3:1AA18

1.7:1Fail

1.5:1Fail

1.2:1Fail

4.8:1AA

2.5:1Fail

1.5:1Fail

1.8:1Fail

2.8:1Fail

1.4:1Fail

1.2:1Fail

1.8:1Fail

Similar palettes

More like Coastal Cliff Retreat

View all cool

Azure Coast Serenity

Coastal Seafoam Spray