Back to palettes

Palette

Coastal Dune Serenity

Soft sandy tones meet gentle sky blues, creating the calm and expansive feel of a peaceful coastal dune.

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

#F5DEB3#D2B48C#A9A9A9#B0C4DE#87CEFA

Palette guide

How to use Coastal Dune Serenity

Overview

The Coastal Dune Serenity palette elegantly blends soft sandy tones with gentle sky blues, creating the calm and expansive feel of a peaceful coastal dune. This harmonious collection features the warm light sand of #F5DEB3 and grounding #D2B48C, complemented by the versatile grey #A9A9A9, and the serene blues of #B0C4DE and #87CEFA. Designers can leverage these shades to evoke a sense of tranquility, natural spaciousness, and gentle optimism. It’s an ideal choice for projects seeking a refreshing, soothing, and subtly sophisticated aesthetic, from wellness brands to travel websites.

Best used for

  • Travel and tourism branding
  • Wellness and meditation apps
  • Coastal real estate websites
  • E-commerce for natural products
  • Serene interior design concepts
  • Digital art backgrounds

Suggested color roles

primary

#D2B48C - A warm, inviting sand beige, excellent for main content areas or as a grounding base color.

secondary

#B0C4DE - A soft, cool blue-grey, perfect for supporting sections, headers, or subtle UI elements.

accent

#87CEFA - A gentle sky blue, used sparingly for impactful calls-to-action or refreshing highlights.

background

#F5DEB3 - A very light, creamy sand tone, providing an airy, warm, and expansive canvas.

text

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

Accessibility notes

  • Ensure sufficient contrast between #F5DEB3 and text, especially when using lighter palette colors like #B0C4DE.
  • Pair #F5DEB3 with #A9A9A9 or a pure black for text to meet WCAG AA contrast standards.
  • Avoid using #B0C4DE on #D2B48C for small text due to potential low contrast.
  • Check contrast for all interactive elements to ensure usability for all users.

Recommended combinations

Sandy Sky

Creates a light, airy foundation with a gentle transition from sand to sky, ideal for backgrounds.

#F5DEB3 · #D2B48C · #B0C4DE

Coastal Harmony

Blends warm and cool tones for a balanced, serene feel, suitable for feature blocks or distinct sections.

#D2B48C · #A9A9A9 · #87CEFA

Fresh Read

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

#F5DEB3 · #A9A9A9 · #B0C4DE

CSS variables

:root {
  --coastal-dune-serenity-2-1: #F5DEB3;
  --coastal-dune-serenity-2-2: #D2B48C;
  --coastal-dune-serenity-2-3: #A9A9A9;
  --coastal-dune-serenity-2-4: #B0C4DE;
  --coastal-dune-serenity-2-5: #87CEFA;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-dune-serenity-2": {
        1: "#F5DEB3",
        2: "#D2B48C",
        3: "#A9A9A9",
        4: "#B0C4DE",
        5: "#87CEFA",
      }
    }
  }
}

Related searches

calm sand blue palettecoastal tranquility colorsserene dune aestheticnatural beige blue schemepeaceful beach design

Palette colors

Hex values

Color 1#F5DEB3
·
Color 2#D2B48C
·
Color 3#A9A9A9
·
Color 4#B0C4DE
·
Color 5#87CEFA
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.8:1Fail
1.4:1Fail
1.3:1Fail
2
1.5:1Fail
1.2:1Fail
1.1:1Fail
1.1:1Fail
3
1.8:1Fail
1.2:1Fail
1.3:1Fail
1.4:1Fail
4
1.4:1Fail
1.1:1Fail
1.3:1Fail
1:1Fail
5
1.3:1Fail
1.1:1Fail
1.4:1Fail
1:1Fail

Similar palettes

More like Coastal Dune Serenity

View all Neutral
Zen Matcha Moment
Seaside Driftwood Shingles
Bamboo Garden Calm
Clouded Moon Reflection
Coastal Driftwood Grey
Coastal Dune Breeze