Palette

Aegean Coast Drift

A sun-baked journey through ancient coastal landscapes, featuring warm, inviting earthy tones.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Aegean Coast Drift 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 Aegean Coast Drift.

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

Data visualization

#F9E7D2#EBC08F#B47D5C#8F644A#5D3E2F

Palette guide

How to use Aegean Coast Drift

Overview

The Aegean Coast Drift palette offers a sun-baked journey through ancient coastal landscapes, featuring warm, inviting earthy tones. This collection, ranging from the light #F9E7D2 to the deep #5D3E2F, is perfect for designs seeking a natural, rustic, or serene aesthetic. The inviting #EBC08F and grounding #B47D5C provide excellent versatility for creating gradients, layered backgrounds, or defining distinct UI elements. Designers and developers can leverage this palette for travel brands, artisanal crafts, or any project that benefits from an authentic, sun-drenched, and warm presence, ensuring a comforting and memorable user experience with a touch of ancient charm.

Best used for

Rustic travel and tourism websites
Handmade craft and artisan product branding
Home decor and furniture catalogs
Natural beauty product packaging
Earthy lifestyle blogs and apps
Vintage photography portfolios

Suggested color roles

primary

Use #5D3E2F as a deep, grounding primary for backgrounds or foundational elements, evoking rich earth.

secondary

Apply #8F644A or #B47D5C for content blocks or secondary sections, offering warm, inviting depth.

accent

Introduce #EBC08F as a soft, luminous accent for interactive elements, highlights, or decorative details, mimicking sun-baked sand.

background

The lightest #F9E7D2 provides an excellent warm, airy background, while #5D3E2F offers a profound dark base.

text

For lighter backgrounds, use a dark brown like #5D3E2F or charcoal. For dark backgrounds, a crisp white or #F9E7D2 ensures readability.

Accessibility notes

Ensure good contrast when using #B47D5C or #8F644A for text on backgrounds; white or a very light cream often works best.
The lightest color, #F9E7D2, offers excellent contrast with the darkest #5D3E2F for primary text.
Avoid placing #EBC08F directly on #F9E7D2 for small text; larger headings might work but verify contrast.
Prioritize clear typography and sufficient line height to maintain readability within this warm, earthy scheme.

Recommended combinations

Coastal Earth

Creates a smooth, warm gradient for backgrounds or banners, transitioning from deep earth to light sand.

#5D3E2F · #B47D5C · #F9E7D2

Sun-baked Read

Pairs a light, sandy background with a deep brown for content, ensuring legibility with dark text.

#F9E7D2 · #8F644A · #EBC08F

Rustic Layers

Ideal for creating layered UI elements or subtle transitions, evoking the textures and shades of ancient coastal landscapes.

#5D3E2F · #8F644A · #B47D5C

CSS variables

:root {
  --aegean-coast-drift-1: #F9E7D2;
  --aegean-coast-drift-2: #EBC08F;
  --aegean-coast-drift-3: #B47D5C;
  --aegean-coast-drift-4: #8F644A;
  --aegean-coast-drift-5: #5D3E2F;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "aegean-coast-drift": {
        1: "#F9E7D2",
        2: "#EBC08F",
        3: "#B47D5C",
        4: "#8F644A",
        5: "#5D3E2F",
      }
    }
  }
}

Hex values

Color 1#F9E7D2

Color 2#EBC08F

Color 3#B47D5C

Color 4#8F644A

Color 5#5D3E2F

Accessibility

Contrast checker

1.4:1Fail

2.9:1Fail

4.3:1AA18

7.9:1AAA

1.4:1Fail

2.1:1Fail

3:1AA18

5.7:1AA

2.9:1Fail

2.1:1Fail

1.5:1Fail

2.7:1Fail

4.3:1AA18

3:1AA18

1.5:1Fail

1.9:1Fail

7.9:1AAA

5.7:1AA

2.7:1Fail

1.9:1Fail

Similar palettes

More like Aegean Coast Drift

View all earth

Coastal Driftwood Sands