Palette

Coastal Dune Serenity

Soft, serene shades reflecting quiet coastlines, sun-warmed sand, and gentle ocean breezes.

neutralcalm5 colors

More neutral palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#F8F3ED#EAE2CC#C7B9A2#9EBABF#73A8BB

Palette guide

How to use Coastal Dune Serenity

Overview

The Coastal Dune Serenity palette reflects quiet coastlines, sun-warmed sand, and gentle ocean breezes with its soft, serene shades. This harmonious collection ranges from the almost-white #F8F3ED and warm beige #EAE2CC, through the grounding #C7B9A2, to the calming blues of #9EBABF and #73A8BB. Designers can leverage these tones to evoke a sense of peace, natural elegance, and refreshing tranquility. It’s an ideal choice for projects seeking an airy, sophisticated, and calming aesthetic, from wellness brands to luxury resorts, providing a harmonious and inviting visual experience.

Best used for

Luxury resort branding
Wellness and spa websites
Coastal home decor e-commerce
Relaxation app interfaces
Nature-inspired editorial design
High-end travel brochures

Suggested color roles

primary

#C7B9A2 - A warm, versatile mid-tone beige, excellent for main content areas or as a grounding base color.

secondary

#EAE2CC - A light, sun-warmed beige, perfect for supporting sections, headers, or subtle details.

accent

#73A8BB - A deep, serene ocean blue, used sparingly for impactful calls-to-action or refreshing highlights.

background

#F8F3ED - A very light, creamy off-white, providing an airy, warm, and expansive canvas.

text

Use a dark charcoal or black for body text, or #73A8BB for legible headings against lighter backgrounds.

Accessibility notes

Ensure sufficient contrast between lighter shades like #EAE2CC and text, especially for smaller fonts.
Pair #F8F3ED with #73A8BB or a pure black for text to comfortably meet WCAG AA contrast standards.
Avoid using #9EBABF on #C7B9A2 for small text due to potential low contrast.
Verify contrast ratios for all interactive elements to ensure universal usability.

Recommended combinations

Breezy Foundation

Creates a light, warm, and inviting base, perfect for clean, serene interfaces.

#F8F3ED · #EAE2CC · #C7B9A2

Ocean Calm

Provides depth and tranquility, blending warm beige with serene blues for distinct sections.

#C7B9A2 · #9EBABF · #73A8BB

Clear Horizon

Offers clear text legibility on a light background, with a deep blue accent for visual interest.

#F8F3ED · #73A8BB · #C7B9A2

CSS variables

:root {
  --coastal-dune-serenity-1: #F8F3ED;
  --coastal-dune-serenity-2: #EAE2CC;
  --coastal-dune-serenity-3: #C7B9A2;
  --coastal-dune-serenity-4: #9EBABF;
  --coastal-dune-serenity-5: #73A8BB;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-dune-serenity": {
        1: "#F8F3ED",
        2: "#EAE2CC",
        3: "#C7B9A2",
        4: "#9EBABF",
        5: "#73A8BB",
      }
    }
  }
}

Hex values

Color 1#F8F3ED

Color 2#EAE2CC

Color 3#C7B9A2

Color 4#9EBABF

Color 5#73A8BB

Accessibility

Contrast checker

1.2:1Fail

1.7:1Fail

1.9:1Fail

2.4:1Fail

1.2:1Fail

1.5:1Fail

1.6:1Fail

2:1Fail

1.7:1Fail

1.5:1Fail

1.1:1Fail

1.4:1Fail

1.9:1Fail

1.6:1Fail

1.1:1Fail

1.3:1Fail

2.4:1Fail

2:1Fail

1.4:1Fail

1.3:1Fail

Similar palettes

More like Coastal Dune Serenity