Back to palettes

Palette

Coastal Dune Breeze

Reflects the tranquil beauty of a windswept sandy beach with muted earth tones and subtle hints of ocean mist.

earthnatural5 colors
More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

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

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

Data visualization

#EAD2AC#C0A98F#8D9F87#B3C1CC#F4F0E1

Palette guide

How to use Coastal Dune Breeze

Overview

The "Coastal Dune Breeze" palette beautifully reflects the tranquil beauty of a windswept sandy beach, blending muted earth tones with subtle hints of ocean mist. From the light, airy #F4F0E1 to the deeper, grounding #8D9F87, this palette offers a harmonious blend of warm sands, cool grays, and soft greens. The intermediate shades of #EAD2AC, #C0A98F, and #B3C1CC introduce varied warmth and coolness, ideal for creating organic and calming designs. This collection is perfect for designers seeking to convey natural authenticity, peacefulness, and a timeless connection to coastal landscapes.

Best used for

  • Coastal residential property marketing
  • Natural skincare and beauty product lines
  • E-commerce for sustainable home goods
  • Outdoor and nature photography showcases
  • Spa and wellness retreat branding
  • Eco-conscious fashion or lifestyle blogs

Suggested color roles

primary

Use #C0A98F for main sections, headers, or prominent UI elements, establishing a stable, warm-neutral foundation.

secondary

Apply #B3C1CC for supporting content blocks, subheadings, or subtle background variations, introducing a calming cool note.

accent

The soft green #8D9F87 serves well for gentle accents, interactive elements, or decorative flourishes, providing an organic pop.

background

Employ #F4F0E1 as the primary background color, providing a clean, expansive, and softly illuminated canvas.

text

Use a dark charcoal or deep brown (e.g., #333333 or #5A5A5A) for body text and navigation links to ensure excellent readability against the lighter backgrounds.

Accessibility notes

  • Ensure dark text (charcoal/deep brown) has excellent contrast against #F4F0E1, #EAD2AC, and #C0A98F backgrounds.
  • Text in #8D9F87 will need a very light background like #F4F0E1 for readability.
  • Avoid using #F4F0E1, #EAD2AC, or #B3C1CC for text directly, as they are too light for general readability.
  • When using accent colors, ensure they don't rely solely on color to convey meaning for users with color vision deficiencies.

Recommended combinations

Windswept Sands

Creates a soft, inviting backdrop with warm sandy tones against an airy off-white, ideal for serene layouts.

#C0A98F · #F4F0E1 · #EAD2AC

Ocean Mist

Perfect for a fresh, natural feel, with cool blue-grey and soft green against a light background, evoking sea and dune grass.

#B3C1CC · #8D9F87 · #F4F0E1

Earthy Balance

Best for demonstrating depth and texture, suitable for complex data visualizations or multi-tiered navigation.

#8D9F87 · #C0A98F · #B3C1CC

CSS variables

:root {
  --coastal-dune-breeze-3-1: #EAD2AC;
  --coastal-dune-breeze-3-2: #C0A98F;
  --coastal-dune-breeze-3-3: #8D9F87;
  --coastal-dune-breeze-3-4: #B3C1CC;
  --coastal-dune-breeze-3-5: #F4F0E1;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "coastal-dune-breeze-3": {
        1: "#EAD2AC",
        2: "#C0A98F",
        3: "#8D9F87",
        4: "#B3C1CC",
        5: "#F4F0E1",
      }
    }
  }
}

Related searches

coastal dune beige palettenatural sand green bluecalm earthy hex codeswindswept beach colorsmuted coastal design

Palette colors

Hex values

Color 1#EAD2AC
·
Color 2#C0A98F
·
Color 3#8D9F87
·
Color 4#B3C1CC
·
Color 5#F4F0E1
·

Accessibility

Contrast checker

1
2
3
4
5
1
1.5:1Fail
1.9:1Fail
1.3:1Fail
1.3:1Fail
2
1.5:1Fail
1.3:1Fail
1.2:1Fail
2:1Fail
3
1.9:1Fail
1.3:1Fail
1.5:1Fail
2.5:1Fail
4
1.3:1Fail
1.2:1Fail
1.5:1Fail
1.6:1Fail
5
1.3:1Fail
2:1Fail
2.5:1Fail
1.6:1Fail

Similar palettes

More like Coastal Dune Breeze

View all earth
Seagrass Whisper Tones
Bamboo Serene Path
Coastal Dune Breeze
Coastal Dune Grass
Coastal Dune Grass
Coastal Seagrass Dunes