Palette

Golden Aegean Sands

Sun-drenched Mediterranean coast evokes warmth, ancient history, and serene sandy shores.

earthnatural5 colors

More earth palettes

Preview

See it in context.

Interface

New

Ready when you are.

A quick look at how Golden Aegean Sands 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 Golden Aegean Sands.

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

Data visualization

#F7E7CD#E0B49C#B58467#7B5239#3A2F2B

Palette guide

How to use Golden Aegean Sands

Overview

The "Golden Aegean Sands" palette captures the serene warmth of sun-drenched Mediterranean coasts, with a harmonious blend of sandy beiges and earthy browns. From the soft `#F7E7CD` to the deep, grounding `#3A2F2B`, this palette features inviting mid-tones like `#E0B49C`, `#B58467`, and `#7B5239`. It's ideal for designs that seek to convey natural beauty, comfort, and a touch of rustic elegance. Designers can use this palette to evoke a sense of calm, warmth, and authenticity, perfect for travel, wellness, or home decor branding with a sophisticated, earthy appeal.

Best used for

Coastal-themed interior design
Travel and tourism marketing (Mediterranean focus)
Organic and natural product branding
Spa and wellness retreat websites
Handcrafted goods and artisanal shops
Warm, inviting home decor websites

Suggested color roles

primary

Utilize `#B58467` for main brand elements or key calls-to-action, offering a balanced, inviting warmth.

secondary

Employ `#7B5239` for subheadings, secondary navigation, or as a grounding accent, adding depth and stability.

accent

Apply `#E0B49C` for subtle highlights, interactive states, or to add a soft, sun-kissed touch to elements.

background

The light and airy `#F7E7CD` serves as an excellent primary background, creating a serene and open feel.

text

Use `#3A2F2B` for body text against lighter backgrounds like `#F7E7CD` to ensure high readability and maintain the earthy aesthetic.

Accessibility notes

Ensure text contrast, especially when using lighter browns like `#E0B49C` or `#B58467` on the `#F7E7CD` background.
The darkest color, `#3A2F2B`, provides excellent contrast for text on any of the lighter shades in the palette.
Avoid using `#E0B49C` for small text elements on `#F7E7CD` due to potential readability issues.
Always test color combinations for WCAG AA or AAA compliance, particularly for interactive elements.

Recommended combinations

Coastal Serenity

A light, sandy background with a warm mid-brown and a deep anchor for elegant, natural designs.

#F7E7CD · #B58467 · #3A2F2B

Earthy Depth

Creates a rich, layered effect, suitable for textured backgrounds or illustrations.

#7B5239 · #B58467 · #E0B49C

Warm Welcome

Soft mid-tone with light highlights and dark text, ideal for inviting landing pages.

#E0B49C · #F7E7CD · #3A2F2B

CSS variables

:root {
  --golden-aegean-sands-1: #F7E7CD;
  --golden-aegean-sands-2: #E0B49C;
  --golden-aegean-sands-3: #B58467;
  --golden-aegean-sands-4: #7B5239;
  --golden-aegean-sands-5: #3A2F2B;
}

Tailwind config

theme: {
  extend: {
    colors: {
      "golden-aegean-sands": {
        1: "#F7E7CD",
        2: "#E0B49C",
        3: "#B58467",
        4: "#7B5239",
        5: "#3A2F2B",
      }
    }
  }
}

Hex values

Color 1#F7E7CD

Color 2#E0B49C

Color 3#B58467

Color 4#7B5239

Color 5#3A2F2B

Accessibility

Contrast checker

1.5:1Fail

2.7:1Fail

5.6:1AA

10.6:1AAA

1.5:1Fail

1.7:1Fail

3.6:1AA18

6.9:1AA

2.7:1Fail

1.7:1Fail

2.1:1Fail

4:1AA18

5.6:1AA

3.6:1AA18

2.1:1Fail

1.9:1Fail

10.6:1AAA

6.9:1AA

4:1AA18

1.9:1Fail

Similar palettes

More like Golden Aegean Sands

Coastal Driftwood Sands